本文是自己当时学习html5新标签的笔记整理,主要是记录新增的结构性标签。

大家都知道Html5添加了很多语义化标签。

新增的结构标签

1、header标签和footer标签

顾名思义,header标签表示头部,主要用于整个页面的头部或者某一区块的头部。  

同理,footer标签,主要用于表示一个页面或一个区域的页脚,可包含文档的作者姓名、创作日期或者联系信息。  

2、nav标签

nav标签标示导航,从navigation(导航)字面就知道它的用处了。

3、section标签

我个人习惯从字面意思理解,section表示部分,也可以说是页面某一个部分区块,用于划分页面不同的区域部分。比如章节、页眉、页脚或文档中的其他部分。

但是section不用于布局,布局还是用div来做。

4、article和aside标签

article标签表示页面中一块结构完整且独立的内容,比如一篇文章,用户的评论等。

自己在写文章列表的时候也经常使用article标签。

aside标签

表示article标签内容之外的附属信息部分、应该与article元素内容相关的。

最常用的是表示侧边栏(sidebar),还有广告、引用、nav元素组,以及其他类似的有别与主要内容的部分

article标签可以包含与当前页面或主要内容相关的引用、广告单元、附属导航,以及其他类似的有别与主要内容的部分。

5、hgroup标签

看名字也知道大概,它由h+group(组、团体)组成,意思就是把一组h1–h6标题元素组团起来,统管,一起happy去哈哈。好吧,专业一点就是表示对页面一个区块的标题进行组合。

6、figure标签和figcaption标签

figure标签用于定义一组媒体内容,比如图像、图表、照片、代码等,一般常见用于图片。

figcaption 标签用于定义 figure 元素的标题,比如我们用在图片上时,figcaption 标签可以说对这张图片进行描述,在seo上,它的作用类似img的alt作用,不过他是直接就显示出来了,貌似更有语义化。

“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

7、datalist

datalist定义选项列表,需与 input 元素配合使用,通过input 元素的 list 属性来绑定,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

8、details和summary

details标签用于描述文档或文档某个部分的细节,用于摘录、引用等。它的open属性定义 details 是否可见。

summary是定义标题的,标题是可见的,用户点击标题时,会显示出 details。

9、dialog

dialog标签定义对话框或窗口。默认是不显示的,加上open属性后,dialog 元素是可见的,是活动的,用户可与之交互。

默认的样式是绝对定位的

10、mark

定义有标记的文本。请在需要突出显示文本时使用此标签。在chrome测试中默认是高亮黄色背景显示。

11、keygen

标签规定用于表单的密钥对生成器字段。

keygen标签会生成一个公钥和私钥,私钥会存放在用户本地,而公钥则会发送到服务器

12、progress和meter

progress用来定义进度条的,一般结合javascript使用。

progress标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 meter标签代替。

meter标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。

13、time标签  

定义一个日期/时间,该元素能够以机器可读的方式对日期和时间进行编码,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

练习的demo