HTML5新增文档结构元素

一、简介:

相比HTML4在HTML5中有一个比较重大的变化就是新增了很多新的结构元素,例如article、section、aside、nav、header等。
这些元素和div的元素有类似的功能,但是具有更强的语义表示。
总结一句话就是:“见其名知其意”。

二、为什么要引入语义元素呢:

在这里很多朋友就会产生疑问了,这些新语义元素既然和div的元素具有类似的功能为什么还要引入这些语义元素呢?
以上面这案例为例进行比较:
HTML5新增文档结构元素_第1张图片
HTML5新增文档结构元素_第2张图片

三、新增语义标签简介:

HTML5新增文档结构元素_第3张图片
区块标签:article、section、nav、aside、header、footer、figure、figcaption、main
内联标签:time、i、b、em、stromg

语义标签名 说明
article 定义文章
section 定义页眉:一个主题性的内容分组,通常包含一个头部(header),可能还会有一个尾部(footer)
nav 定义导航:表示页面的导航,可以通过导航连接到网站的其他页面,或当前页面的其他部分
aside 定义文章的侧边栏:包含的内容不是页面的主要内容,具有独特性,是对页面的补充
header 定义页眉:一般放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或某个区块的标题、简介等信息
footer 定义页脚:一般被放置在页面的底部,或者页面中某个区块元素的底部
figure 标签规定独立的流内容(图像、图表、照片、代码等等)
figcaption figure的子元素 用于对figure的内容 进行说明
main 显示页面的主题内容,每个页面只能包含一个main标签,main标签中不包含网站标题、logo、主导航、版权声明等信息

三、新增语义标签的使用:

使用article的例子:
一篇博客
一个论坛帖子
一篇新闻报道
一个用户评论

HTML5新增文档结构元素_第4张图片
header标签的使用:
一篇文档中可以包含多于一个的header标签
header标签不一定非要显示在页面的上方,它的内容决定这里需要使用header标签,位置并不重要
可以为body、article、section、aside、添加header元素

HTML5新增文档结构元素_第5张图片
footer标签的使用:
HTML5新增文档结构元素_第6张图片
nav标签的使用:
HTML5新增文档结构元素_第7张图片
aside标签的使用:
页面测边栏
广告
友情链接
文章引语(内容摘要)

HTML5新增文档结构元素_第8张图片
section标签的使用:
HTML5新增文档结构元素_第9张图片
main标签的使用:
HTML5新增文档结构元素_第10张图片

四、案例实现:

HTML5新增文档结构元素_第11张图片
HTML5+CSS代码:




    测试
    
    



    
header
section
header
article
footer
footer

你可能感兴趣的:(HTML网页设计)