HTML5 新增与删除的标签

HTML5约等于HTML+CSS+Javascript+API

新增标签

1.结构类标签(有意义的div)
<article> 标记定义一篇文章
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中一个区块的相关信息
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption> 标签定义figure元素的标题
<footer> 标记定义一个页面或一个区域的底部(建议header 和footer标签只用于页面的头部和底部,用在区域的话容易混淆)
<dialog> 标记定义一个对话框(会话框)类似微信(里面用p,或者dl,dt标签)

注意: a. header/section/aside/article/footer 不要嵌套使用
b. header/section/footer(外层)>aside/articles/figure/hgroup/nav(内层)>div/figcaption
注意位置,这些标签最好不要互相嵌套,最里面可以用div

下面的图可以帮助更好地理解新的结构标签
_config.yml

2.多媒体标签
三类多媒体标签
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的课交互的内容或插件,比如flash,svg图片

标签意义
多媒体标签的出现意味着富媒体的发展以及支持不使用差价的情况下即可操作媒体文件,极大地提升了用户体验。

3.web应用标签

状态标签
<meter> 状态标签(实时状态显示:气压,气温)
<progress> 状态标签(任务过程:安装、加载)

浏览器兼容
<meter> Chrome,Opera
<progress> Chrome, Firefox, Opera

列表标签
<datalist> 为input标记定义一个下拉列表,配合option
<details> 标记定义一个元素的详细内容,配合summary

浏览器兼容
<datalist> Firefox,Opera
<details> Chrome

Menu(可能会被w3c标签放弃)
<menu> 命令列表(目前所有主流浏览器都不支持)
<menuitem> menu命令列表标签(只有Firefox8.0+支持)
<command> menu标记定义一个命令按钮(只有IE9支持)

4.其他标签

注释标签
<ruby> 标记定义注释或音标
<rt> 标记定义对ruby的注释内容文本
<rp> 告诉那些不支持ruby元素的浏览器如何去显示
<rp> 不要放在<rt>标签内

<mark> 标记定义有标记的文本(黄色选中状态)
<output> 标记定义一些输出类型,计算表单结果配合oninput事件(oninput事件可以实时监听文本框的输入变化)

<keygen> 标记定义表单里一个生成的键值(加密信息传送)
<time> 标记定义一个日期/事件,目前所有主流浏览器都不支持

HTML5删除的标签

1.纯表现的元素(结构与表现分离)
Basefont, big, center, font, s, strike, tt, u

2.对可用性产生负面影响的元素
frame, frameset, noframes

3.产生混淆的元素
acronym, applet, isindex, dir

HTML5 重定义标签
显示不变,只是表达的含义进行了重新定义的标签

<b> 代表内联文本,通常是粗体,没有传递表示重要的意思
<i> 代表内联文本,通常是斜体,没有传递表示重要的意思
<dd> 可以同details与figure一同使用,定义包含文本,dialog也可用(同三个块级元素一起)
<dt> 可以同details(默认的标题标签是summary)与figure(默认的标题标签是figcaption)一同使用,汇总细节,dialog也可用
注:dt仍然表示标题 dd表示描述
<hr> 表示主题结束,而不是水平线,虽然显示相同(论坛,贴吧,小说等)
<menu> 重新定义用户界面的菜单,配合commond或者menuitem使用
<small> 表示小字体,例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号

Li标签是最不利与搜索引擎收录的标签
ID类的权重比较高,不要写在css中,可在js中用

Written on February 2, 2017