结构相关标签
用来进行页面结构布局,本身无任何特殊样式 ,需要使用CSS进行样式设置
- article 定义一个独立的内容,完整的文章
- section 定义文档的章节,段落
- header 一般用于这三个地方:页面头部。文章的头部,页眉,标题。区块头部
- footer 文章的底部,页脚,标注
- aside 定义侧边栏
- figure 图片区域
- figcaption 为图片区域定义标题
- nav 定义导航菜单
结构标签只是表明各部分的角色,并无实际外面样式,与普通的div相同
article元素
一般用于地方:
- 文章内容部分
article可以看成一个独立的部分,也可以看成别名的div,它内部可以包含标题及其他部分。
注意:在严格意义上,每一个article元素内部都应该有一个header元素
实例
代码语言:html复制<article>
<header>
<h1>全球气温为什么不断上升?</h1>
</header>
<div>文章内容.....</div>
<footer>
<nav>下一篇</nav>
</footer>
</article>
section元素
section元素一般用于某一个需要标题内容的区块。
代码语言:html5复制说明:如果页面某个区块不需要标题,直接使用div元素。如果需要标题,则建议使用section元素。
<section>
<header>理科</header>
<ul>
<li>数学</li>
<li>语文</li>
</ul>
</section>
header元素
一般用于地方:
- 页面头部
header元素一般用于包括网站名称、页面LOGO,顶部导航,介绍信息等
- 文章头部
header元素一般用于包含“文章标题”和“meta信息”两部分
- 区块头部(即section元素头部)
header元素一般只包含区块的标题内容
footer元素
一般用于地方:
- 页面底部
- 文章底部
aside元素
aside元素一般用于表示跟周围区块相关的内容
一般用于地方:
- 如果aside元素放在article元素或section元素之中,则aside内容必须与article内容或section内容紧密相关
- 如果aside元素放在article元素或section元素之外,则aside内容应该是与整个页面相关的,比如文章内容,文章点赞等
nav元素
一般用于地方:
- 顶部导航
nav元素可以放到header元素内部,也可以放到header元素外部。放在哪里取决于开发需求
- 侧栏导航
- 分页导航