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给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。