在HTML5之前采用HTML+CSS文档结构写法
【ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）】
【class选择器说明 class类选择器——可以应用于页面任意多个元素，非常适合标识内容类型或其他相似的条目】
image
（上图展示典型的两列布局标记使用div的id和class类属型.它包含一个页眉，页脚，横向的导航栏.主要内容包含一篇文章和右边的侧边栏 ）
缺点 ：
1.不利于SEO搜索引擎对页面内容的抓取
2.文档结构定义不明确
于是HTML5出现，解决上述问题，专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签
image
（div元素被替换成新的元素：header 页眉, nav 导航, section 区块, article 文章, aside 侧边栏 , and footer 页脚.）
HTML5结构代码
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
对HTML5语义化标签解释
<main> 定义主要内容
<header> 页眉，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等
<header>
<hgroup>
<h1>页眉主标题</h1>
<h1>页眉副标题</h1>
</hgroup>
</header>
<nav> 定义主体模块或者导航链接的集合
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。
<article>
<header>
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<time datetime="2011-03-20">2011.03.20</time>
</header>
<p>文章内容详情</p>
</article>
<section>表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。
一般通过是否包含一个标题** (<h1>-<h6> element)** 作为子节点 来 辨识每一个<section>
<section>
<h1>这里是section标题...</h1>
<p>这里是section标题对于内内容...</p>
</section>
<aside>与一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。
<aside id="sidebar">
<section class="widget">
<h4 class="widgettitle">Sidebar</h4>
<ul>
<li><a href="#">WordPress</a> (3)</li>
<li><a href="#">Design</a> (23)</li>
<li><a href="#">Design </a>(18)</li>
</ul>
</section>
</aside>
<footer> 定义了整个页面或其中一部分的页脚（并且通常包含原创作者，版权信息，联系方式和站点地图,文档相关的链接等信息）
<footer>
原创作者;版权信息;联系方式;文档相关链接等...
</footer>
<hgroup> 标签用于对网页或区段（section）的标题(h1-h6)进行组合。使用新的HTML5元素hgroup，可以为header元素添加更多的信息。（头部主标题/副标题）
<hgroup>
<h1>Main title</h1>
<h2>Secondary title</h2>
</hgroup>
<figure> 元素代表一段独立的内容.用于对元素进行组合。多用于图片与图片描述组合。
<!-- Just a figure -->
<figure>
<img src="figure.png" alt="figure.png图片按" title="figure图片">
</figure>
<p>段落</p>
<!-- Figure with figcaption -->
<figure>
<img src="figure.png" alt="figure.png图片按" title="figure图片">picture">
<figcaption>figure图片描述</figcaption>
</figure>
<p>段落.....</p>
<figcaption> 标签:定义 figure 元素的标题（caption）。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<figure>
<figcaption>美女图片</figcaption>
<img src="meizi.jpg" width="350" height="234" />
</figure>
<time>:定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果
<mark>:定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。
<datalist>:选项列表。与 input 元素配合使用，来定义 input 可能的值。
<input type="text" list="valList"/>
<datalist id="valList">
<option value="JavaScript">JavaScript</option>
<option value="html">html</option>
<option value="css">CSS</option>
</datalist>
<details></details>用于描述文档或文档某个部分的细节
< summary></summary> details 元素的标题
该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容
Open 属性默认展开
状态交互元素
progress元素 ：标签定义运行中的进度（进程）
<progress value="0" max="100"></progress>
meter元素 ：标签定义度量衡。仅用于已知最大和最小值的度量。
<meter value="70" max="100" min="0"></meter>
Forms
email : 电子邮箱文本框，跟普通的没什么区别,当输入不是邮箱的时候，验证通不过.移动端的键盘会有变化
tel : 电话号码,移动端的键盘
url : 网页的URL
search : 搜索引擎
range : 特定范围内的数值选择器
min、max、step( 步数 )、value
用JS来显示当前数值
新的表单特性和函数
placeholder : 输入框提示信息
例子 : 密码框提示
autocomplete : 是否保存用户输入值默认为on，关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id
required : 此项必填，不能为空带有必填字段的表单
Pattern : 正则验证 pattern="\d{1,5}“
formaction 在submit里定义提交地址
网友评论