感觉在Sublime Text3中写起来比较方便~~

将HTML5中要用到的基本标签全部放在了一起，没有好好的整理，为了自己记忆的方便，就先这样写下来了~~

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>All Base knowledge</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>

标题

<h1>I am h1</h1>

<h2>I am h2</h2>

<h3>I am h3</h3>

<h4>I am h4</h4>

<h5>I am h5</h5>

<h6>I am h6</h6>

段落

<p>I am paragraph</p>

链接

<a href="http://www.baidu.com">我是链接</a>

图片

<img src="img/back.jpg" alt="">

换行

<br>

I am line feed

<br>

<br>

I am line feed

水平线

<hr >

hr is horizontal line

<!---->

<! --I am not see-->

<br>

<br><br>

粗体字

<br>

<b>I am bold face letter  </b>

<br>

加重语气

<br>

<strong>I am say sth. with emphasis</strong>

<br>

<br>

着重文字<br>

<em>I am focus on words</em>

<br>

斜体字<br><br>

<i>I am inclined letter</i>

<br><br>

大号文字<br><br>

<big>I am bigger letter</big>

<br><br>

小号字<br><br>

<small>I am small letter</small>

<br><br>

上标字<br>

HTML<sup>5</sup><br>

下标字<br>

HTML<sub>5</sub><br>

插入字<br>

<ins>I am insert letter</ins>

<br>

删除字<br>

<del>I am delete letter</del>

<br>

缩写字<br>

<abbr>I am  abbrevation letter</abbr><br>

<abbr title="World Wide Web">WWW是万维网</abbr><br>

首字母缩写<br>

<acronym title="World Wide Web">WWW</acronym>

<br>地址<br>

<address>

    联系地址：area<br>

    联系电话：1212324<br>

    联系人：cat

</address>

<br>

div

<div>I am div</div>

<br>

span

<br>

<span>I am span</span><br>

表格：table

<br>

<tr>

    <th>name</th>

    <th>age</th>

    <th>sex</th>

</tr>

<br>

<tr>

    <td>Mary</td>

    <td>18</td>

    <td>girl</td>

</tr>

<br>

<tr>

    <td>Helen</td>

    <td>38</td>

    <td>girl</td>

</tr>

<br>

无序列<br>

<ul>

    <li>I am gradefather

    <ul>

        <li>I am father

        <ul>

            <li>I am son</li>

            <li>I am son, too</li>

        </ul></li>

        <li>I am father, too</li>

    </ul></li>

    <li>I am gradefather, too</li>

</ul>

<br>

有序列<br>

<ol>

    <li>I am gradefather

    <ol start="30">

    <li>I am father

    <ol start="50">

        <li>I am son</li>

        <li>I am son,too</li>

    </ol>

    </li>

    <li>I am father,too</li>

</ol>

</li>

<li>I am gradefaher, too</li>

</ol>

<br>

定义列表<br>

dl dt dd

<br>

<dl>

    <dt>计算机</dt>

    <dd>用来计算的仪器</dd>

    <dt>显示器</dt>

    <dd>以视觉方式显示信息的装置</dd>

</dl>

<br>

表单<br>

<form action="">

    <input type="text" name="t1">

    <input type="text" name="t2">

    <input type="submit">

    <!<input type="password">

    <input type="submit">

</form>

<br>

文本域<br>

textarea<br>

<textarea name="textarea" id="" cols="10"rows="5"maxlength="10" placeholder="请填写" readonly readonly></textarea>

rows:高度

<br>

cols：宽度<br>

maxlength:最大输入文字数

disabled:禁止输入

placeholder="请填写"：制定占位符

readonly:只读

<br>

控制标签:label

<br>

<label for="l1">性别：</label><input type="radio" id="l1" name="set">

<label for="l2">城市</label><input type="radio" id="l2" name="set">

<br>

对表单进行组合<br>filedset legend<br>

<form>

    <fieldset>

        <legend>健康信息</legend>

        身高：<input type="text"/>

        体重：<input type="text"/>

    </fieldset>

</form>

<br>

<br><br>

标签：<br>

头部：header<br>

尾部：footer<br>

主体：section<br>

导航：nav<br>

生成注释：aside<br>

引入插件：embed<br>

独立主体：article<br>

组合标签：hgroup

<br>

<hgroup>

     <h1>I am h1</h1>

     <h2>I am h2</h2>

     </hgroup>

<br>进度条:progress<br>

<progress value="22" max="100"></progress>(ie9以下不支持的标签)

<br>

使用图片：figure figcation<br>

<figure><img src="img/img.jpg"/></figure>

<figcation>html5</figcation>

<br>

按钮：button<br>

<form action="">

    name:<input type="text" name="t1">

    phone:<input type="tetx" name="t2">

    <button type="submit">提交</button>

    <button type="reset">重置</button>

    <button type="button">按钮</button>

</form>

<br>

输入框：input<br>

<input type="radio"/>

<input type="checkbox">

<input type="text">

<input type="passward">

<input type="color">

<input type="number" min="5" max="50" step="0.1">

<input type="file">

<br><br>

视频：video<br>

音频：audio<br>

<br><br>

背景：background:#00FF00 url(../img/img.jpg)no-repeat fixed top;

<br>

background-img

<background-img>

<background-size>

<background-color>

<background-position>

<background-repeat>

<br>

background-img<br>

background-size<br>

background-color<br>

background-position<br>

background-repeat<br>

文本：<br>

text-indent<br>

text-align<br>

tetx-spacing<br>

text-decoration<br>

text-shadow<br>

<tetx-spacing>

<text-shadow>

<text-decoration>

<text-align>

<text-indent>

<br><br><br><br><br>

<h1>样式</h1>

<br>字体<br>

font-size<br>

font-stye<br>

font-weight<br>

font-family:"Microsoft Yahei"<br>

@font-face<br>

<font-family>

<font-face>

<font-weight>

<font-stye>

<font-size>

<br>

定位：

<br>position：fixed<br>

position:absolute<br>

position:relative<br>

<position>

<position：fixed>

<br>溢出<br>

overflow:

    <br>hidden quto scroll<br>

    <overflow>

 <br>尺寸<br>

 height<br>width<br>max-height<br>max-width<br>min-height<br>min-width<br>line-height<br>

 浮动<br>

 clear:

 <br > left:<br>right<br>both<br>

 <br>

 光标：<br>

 curosr<br><br>pointer<br>text<br>help<br>wait<br>

 圆角：<br>

 border-radius:5px

 <br>

 内边距：

 <br>padding

 <br>外边距：<br> margin<br>

 浮动：<br>float<br>

 透明<br>opacity<br>

 链接:<br>

 未被访问的链接：a:link<br>

 已被访问的链接：a:visited<br>

 鼠标指针移动到链接上：a:hover<br>

 正在被点击的链接：a:active<br>

<br>2D<br>

移动：transform:translate(50px, 80px)<br>

缩放：transform:scale(0.5, 0.5);

<br>旋转：transform:rotate(50deg)<br>

倾斜：transform:skew(50deg, 80deg);

<br>

动画<br>

div{

    height:200px;

    width:200px;

    animation:mymove 5s infinite;

    position:relative;

    }

    @-moz-keyframes mymove{

    0% {top:0px; left:0px; background}

    0%   {top:0px; left:0px; background:red;}

            25%  {top:0px; left:100px; background:blue;}

            50%  {top:100px; left:100px; background:yellow;}

            75%  {top:100px; left:0px; background:green;}

            100% {top:0px; left:0px; background:red;}

    }

}

<br>

-moz-:Firefox<br>

-webkit-:Safari 和Chrome<br>

-o-:Opera<br>

-ms-:IE<br>

<br>

<h1>CSS 的核心</h1>

<h2>>盒模型（padding, margin， border</h2>

<h2>定位(position</h2>

<h2>浮动(float)</h2>

</body>

</html>

HTML5基本标签、样式的更多相关文章

  1. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  2. 支持HTML5新标签

    IE8/IE7/IE6支持通过document.createElement方法产生的标签,               可以利用这一特性让这些浏览器支持HTML5新标签,               ...

  3. 盒子模型，定位技术，负边距，html5 新增标签

    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...

  4. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  5. 如何处理HTML5新标签的兼容性问题

    支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添 ...

  6. html5\CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  7. 解决html5中标签出现的不兼容的问题

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...

  8. 如何让旧浏览器支持HTML5新标签

    HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...

  9. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

  10. html5常用标签table表格布局

    html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...

随机推荐

  1. matplotlib basic and boxplot

    ============================================matplotlib 绘图基础========================================= ...

  2. $(document).ready(){}、$(fucntion(){})、(function(){})(jQuery)onload()的区别

     1.首先说JQuery的几个写法  $(function(){     //do someting   });   $(document).ready(function(){     //do so ...

  3. JavaScript中 window.parent 、window.top、window.self代表的含义

    在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...

  4. R-数据导入

    目录 键盘输入 导入文本文件 导入Excel文件 访问数据库管理系统 键盘输入 > mydata <- data.frame(age=numeric(0), gender=characte ...

  5. PHP安装laravel(win+linux)

    作为一名不优秀的程序猿,忙碌的四月终于结束了,五一大假的最后一天,终于有时间来整理整理这段时间的收获了. 一.laravel介绍 首先看看http://www.sitepoint.com/网站做的一个 ...

  6. wordpress如何批量关闭旧日志留言功能

    于一些wordpress技术博客或者其他wordpress博客来说,一些旧日志的内容可能已经过时了,但是一些读者,还是对一些问题“纠缠不清”或者“喋喋不休”,怎么办,把留言关了就好了: UPDATE ...

  7. js面试题

    前几天在学习js的时候,碰到了这样一道面试题,要求计算出给你一个随机乱敲的一个字符串,要求在其中找出那个字符出现的次数最多,以及出现的个数. 这你有两种方案,请大家仔细阅读,有可能在你将来的面试中会碰 ...

  8. HTTPS科普扫盲帖 对称加密 非对称加密

    http://www.cnblogs.com/chyingp/p/https-introduction.html

  9. androids-addjavascriptinterface-equivalent-in-ios

    http://stackoverflow.com/questions/7103159/androids-addjavascriptinterface-equivalent-in-ios

  10. JS的构造函数

    //构造函数  //使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法  //当对象被实例化后,构造函数会立即执行它所包含的任何代码  function myObject(ms ...