html5语法规则
标签要小写
属性值不加" "或 ' '
可以省略某些标签 html body head tbody
可以省略某些结束标签 tr td li
单标签不用加结束标签 img input
废除的标签 font center big
新添加的标签
文档声明
定义和用法 <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行，也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属于 HTML 标签; 它是一条指令，告诉浏览器编写页面所用的标记的版本。
在所有 HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行。）。
结构性标签
结构性标签（construct tag）主要负责Web的上下文结构的定义，确保 HTML文档的完整性，这类标签包括以下几个。
section。用于表达书的一部分或一章，或者一章内的一节。在Web页面应用中，该标签也可以用于区域的章节表述。
hgroup 对网页或区段（section）的标题进行组合：。
header。页面主体上的头部，注意区别于head标签。这里可以给初学者提供一个判断的小技巧：head标签中的内容往往是不可见的，而header标签往往在一对body标签之中。
footer。页面的底部（页脚）。通常，人们会在这里标出网站的一些相关信息，例如关于我们、法律申明、邮件信息、管理入口等。
nav。是专门用于菜单导航、链接导航的标签，是navigator的缩写。
article。用于表示一篇文章的主体内容，一般为文字集中显示的区域
块级性标签
级块性标签（block tag）主要完成Web页面区域的划分，确保内容的有效分隔，这类标签包括以下几个。
aside。用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上看，就是侧边栏，可以在左边，也可以在右边。从一个页面的局部看，就是摘要。
figure 标签规定独立的流内容，通常与figcaption联合使用。
code。表示一段代码块。
dialog 对话标签 配合dt dd标签使用
行内标签
行内语义性标签（in-line tag ）主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础，这类标签包括以下几个。
meter。表示特定范围内的数值，可用于工资、数量、百分比等 max表示最大值，min表示最小值，value代表当前值。
time。表示时间值，属性datetime强调时间
progress。用来表示进度条
多媒体标签
video。视频标签，用于支持和实现视频（含视频流）文件的直接播放，支持缓冲预载和多种视频媒体格式，例如MPEG-4、OggV和WebM等。
audio。音频标签，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式。
列表标签
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 所有主流浏览器都支持 <datalist> 标签，除了 Internet Explorer 和 Safari。
交互性标签
交互性标签（interactive tag）主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，这类标签包括以下几个。
menu。主要用于交互菜单（这是一个曾被废弃现在又被重新启用的标签）。
command。用来处理命令按钮。
结构性标签的使用
注：让搜索引擎更加的友好
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 *,html,body{ 6 margin:0;padding:0;list-style:none;width:100%;height:100%; 7 } 8 header{ 9 width:auto;height:20%;background:red;font-size:25px;line-height:100px;text-align:center; 10 } 11 12 #main{ 13 width:100%;height:70%;background:#ccc; 14 } 15 #main nav{ 16 width:100%;height:10%;line-height:50px;text-align:center;background:pink; 17 } 18 #main section{ 19 float:left;height:90%;background:#aaa;width:65%;border-left:1px solid red; 20 } 21 #main section hgroup{ 22 width:100%;height:100px;background:#eee; 23 } 24 #main section hgroup h1,h2{ 25 width:100%;height:30px;font-size:15px;font-weight:normal;text-align:center; 26 } 27 #main aside{ 28 float:left;height:90%;background:#888;width:34%; 29 } 30 footer{ 31 width:100%;height:10%;background:blue; 32 } 33 </style> 34 </head> 35 <body> 36 <header> 37 我是头部 38 </header> 39 <div id="main"> 40 <nav> 41 <a hred="#">首页</a> 42 <a hred="#">产品页</a> 43 <a hred="#">售后服务页</a> 44 </nav> 45 46 <section> 47 <hgroup> 48 <h1>文章</h1> 49 <h2>产品</h2> 50 </hgroup> 51 <article> 52 <a>www.tukulin.com</a><br/> 53 <a>图库林图库林图库林图库林图库林图库林</a><br/> 54 <a>图库林图库林图库林图库林图库林图库林</a><br/> 55 <a>图库林图库林图库林图库林图库林图库林</a><br/> 56 </article> 57 </section> 58 <aside> 59 </aside> 60 </div> 61 62 <footer> 63 图库林版权所有 64 </footer> 65 </body> 66 </html>
块级性标签的使用
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 </head> 5 <body> 6 <!--figure 标签规定独立的流内容，通常与figcaption联合使用。 7 <figure> 8 <figcaption>这是一个图片的集合</figcaption> 9 <img src="1.jpg"> 10 <img src="2.jpg"> 11 </figure> 12 --> 13 <!--dialog 对话标签 配合dt dd标签使用--> 14 <dialog> 15 <dt>老师：</dt> 16 <dd>2+2=?</dd> 17 <dt>学生：</dt> 18 <dd>等于4</dd> 19 <dt>老师：</dt> 20 <dd>回答正确加10分</dd> 21 <dt>学生：</dt> 22 <dd>不用加分给我一个ipad</dd> 23 </dialog> 24 </body> 25 </html>
meter标签的使用
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script> 5 window.onload=function () { 6 var meter=document.getElementsByTagName("meter")[0]; 7 meter.onclick=function () { 8 meter.value+=1; 9 } 10 } 11 </script> 12 </head> 13 <body> 14 <meter max=10 min=0 value=5></meter> 15 </body> 16 </html>
