html5标签及语义化
html5标签
结构标签：
article标记定义一篇文章
header标记定义一个页面或一个区域的头部
nav标记定义导航链接
section标记定义一个区域
aside标记定义页面内容部分的侧边栏
hgroup标记定义文件中一个区块的相关信息
figure标记定义一组媒体内容以及它们的标题
figcaption标签定义 figure 元素的标
footer标记定义一个页面或一个区域的底部
dialog标记定义一个对话框(会话框)类似微信
多媒体交互标签
video标记定义一个视频
audio标记定义音频内容
source标记定义媒体资源
canvas标记定义图片
embed标记定义外部的可交互的内容或插件 比如flash
Web应用标签
menu命令列表
menuitemmenu命令列表标签 FF（嵌入系统
commandmenu标记定义一个命令按钮
meter状态标签(实时状态显示:气压、气温)C、O
progress状态标签 (任务过程:安装、加载) C、F、O
datalist为input标记定义一个下拉列表,配合option F、O
details标记定义一个元素的详细内容 ，配合dt、dd C
注释标签
ruby 标记定义 注释或音标
rp告诉那些不支持 Ruby元素的浏览器如何去显示
rt标记定义对ruby的注释内容文本
其他标签
keygen标记定义表单里一个生成的键值(加密信息传送)O、F
mark标记定义有标记的文本 (黄色选中状态)
output标记定义一些输出类型,计算表单结果配合oninput事
删除的HTML标签
纯表现的元素： basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素： frame，frameset，noframes；
产生混淆的元素： acronym ，applet，isindex，dir
重新定义的HTML标签
b代表内联文本，通常是粗体，没有传递表示重要的意思
i代表内联文本，通常是斜体，没有传递表示重要的意思
dd可以同details与figure一同使用，定义包含文本，dialog也可用
dt可以同details与figure一同使用，汇总细节，dialog也可用
hr表示主题结束，而不是水平线，虽然显示相同
menu重新定义用户界面的菜单，配合commond或者menuitem使用
small表示小字体，例如打印注释或者法律条款
strong表示重要性而不是强调符号
语义化的HTML结构的好处
1.去掉或样式丢失的时候能让页面呈现清晰的结构： html本身是没有表现的，我们看到例如h1是粗体，字体大小2em，加粗；strong是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页. 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱.
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.
4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重. 过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.
5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记。
因此,如果页面文件的标题被标记,而不是，那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。
6.便于团队开发和维护 W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。