前端知识学习---HTML5标签变化

近期在复习前端方面的知识,将学习的知识整理一下做一个输出

H5新增加的标签大致可以分为4类:

1.结构标签:
结构标签为块状元素,可以理解成有意义的DIV,主要包括
-article标签 主要用于定义一篇文章;
-header标签 主要用户定义一个页面或一个区域的头部;
-nav标签 主要用于定义导航栏链接;
-section标签 主要用于定义一个区域;
-aside标签 主要用于定义内容部分的侧边栏;
-hgroup标签 主要用于定义一个区块的相关信息;
-figure标签 主要用于定义一组媒体内容及他们的标题;
-figcation标签 主要用于定义figure的标题;
-footer标签 主要用于定义一个页面或者一个区域的底部;
-dialog标签 主要用于定义一个对话框;
其中article,section,header,footer,aside这5个标签不建议进行嵌套;
header,footer,section优先级最高;
aside,article,figure,hgroup,nav优先级其次;
优先级最低的是div,figcaption;
标签之间可以按照优先级进行嵌套。

2.多媒体标签:

-video标签 用于定义视频文件;
-audio标签 用于定义音频文件;
-source标签 用于定义媒体资源;
-canvas标签 用于定义图片;
-embed标签 用于定义外部可交互的内容或插件,比如flash;
这些多媒体标签的出现意味着以及支持不使用插件的情况下即可以操作媒体文件,使得用户体验的的提高

3.web应用标签:

-meter 状态标签 显示实时状态如:气压,气温;
兼容浏览器firefox,opera,chrome
-datalist 列表标签 用于为input标签定义一个下拉列表,配合option使用;
兼容浏览器firefox,opera,chrome
-menu 命令列表,目前所有浏览器都不能兼容
-menuitem menu命令列表标签,仅兼容firefox8.0以上
-command menu标记定义一个命令按钮,仅兼容IE9

4.其他标签:
-ruby标签 用于定义注释或音标;
-rt标签 用于定义对ruby的注释内容文本;
-rp标签 用于定义不支持ruby标签的浏览器如何显示;
-mark标签 用于定义有标记的文本,以黄色选中状态显示;
-output标签 用于定义一些输出类型,计算表单结果配合oninput事件使用;
-keygen标签 用于定义表单里一个生成的键值,主要用于加密信息传输;
-time标签 用于定义一个时间/日期,目前主流浏览器均不支持

除以上内容外,h5还删除了一些标签:
纯表现元素:basefont,big,center,font,strike,tt,u
对可用性能产生负面影响的元素:
frame,frameset,nofarmes
产生混淆的元素:
acronym,applet,isindex,dir

H5还对一些标签进行了重新定义:
-b 代表内联文本,通常是粗体,没有传递表示重要的意思;
-i 代表内联文本,通常是斜体,没有传递表示重要的意思;
-dd 可以同details和figure一同使用,定义包含文本,dialog也可用;
-dt 可以同details和figure一同使用,汇总细节,dialog也可用;
-hr表示主题结束,而不是水平线,虽然显示相同
-menu 重新定义用户界面的菜单,配合commond或者menuitem 使用;
-small 表示小字体,例如打印注释或者法律条款;
-strong 表示重要性而不是强调符号。

猜你喜欢

转载自blog.csdn.net/kf_qyl/article/details/78843754