1.结构标签
2.多媒体标签
3.web应用标签
4.其他标签
●结构标签
结构标签(块状元素)——有意义的div
<article> 标记定义一篇文章
<header> 标记定义一个页面或者一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgrounp> 标记定义文件中一个区块的相关信息
<aside> 标记定义页面内容部分的侧边栏
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption>标签定义 figure元素的标题
**<footer> ** 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框(会话框)类似微信
第一点补充:header/section/aside/article/footer这五个标签不要嵌套
第二点补充:header/section/footer 大于aside/article/figure/hgroud/nav
大于div/figcaption
header/section/footer这三个标签的级别最高,一般写在外层.
同一层级互不嵌套
●多媒体标签
三类多媒体标签
<video>标记定义一个视频
<audio>标记定义音频内容
<sourse>标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件,比如flash
标签意义
多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件,极大地提升了用户体验。
●web应用标签
状态标签、列表标签、Menu
-状态标签
<meter> 状态标签(实时状态显示:气压、气温)
-HTML5 元素中<meter>标签用于显示给定范围内的数据
**<progress> ** 状态标签(任务过程:安装、加载)
浏览器兼容
<meter> Chrome、Opera
<progress> Chrome、Firefox、Opera
-列表标签
<datalist> 为input标记定义一个下拉列表,配合option
<details> 标记定义一个元素的详细内容,配合summary
-Menu
<menu> 命令列表(目前所有主流浏览器都不支持)
<menuitem> menu命令列表标签(只有Firefox8.0+支持)
<command> menu标记定义一个命令按钮(只有IE9支持)
浏览器兼容
<datalist> Firefox、Opera、Chrome
<details> Chrome
●其他标签
-注释标签
<ruby> 标记定义注释或音标
<rt> 标记定义对ruby的注释内容文本
<rp> 告诉那些不支持ruby元素的浏览器如何去显示
注意:<rp>不要放在<rt>标签内
-其他标签
<mark> 标记定义有标记的文本(黄色选中状态)
<output>标记定义一些输出类型,计算表单结果配合oninput事件
oninput事件可以实时监听文本框的输入变化
注意:type属性为number表示数值型
type属性为range表示范围
<keygen>标记定义表单里一个生成的键值(加密信息传递)
<time> 标记定义一个日期/时间,目前所有主流浏览器都不支持