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

原文地址:https://www.cnblogs.com/tang-lei/p/4641281.html