【无标题】HTML5-新增结构元素

gh-coding

已于 2022-07-03 16:03:14 修改

阅读量2k

点赞数 2

分类专栏： 01-HTML 文章标签： html5

于 2022-07-03 15:35:16 首次发布

本文链接：https://blog.youkuaiyun.com/Unrequited66/article/details/125584302

版权

01-HTML 专栏收录该内容

3 篇文章

订阅专栏

HTML5新增的主要结构元素有6个：header、nav、article、aside、section、footer。

1.header元素

在HTML5中，header元素一般用于3个地方：页面头部、文章头部(article元素)和区块头部(section元素)。

当用于页面头部时，header元素一般用于包含网站名称、页面LOGO、顶部导航、介绍信息等。

当用于文章头部时(即article元素头部)，header元素一般用于包含文章标题和meta信息两部分。所谓的meta信息，一般指的是作者、点赞数、评论数等。

当用于区块头部时(即section元素头部)，header元素一般只包含区块的标题。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<header></header>
	<nav></nav>
	<article>
		<header></header>
		...
		<footer></footer>
	</article>
	<aside></aside>
	<section>
		<header></header>
		...
	</section>
	<footer></footer>
</body>
</html>

在这里插入图片描述

2.nav元素

在HTML5中，nav元素一般用于3个地方：顶部导航、侧栏导航和分页导航。

当用于顶部导航时，nav元素可以放到header元素内部，也可以放到header元素外部。

使用nav元素的通常导航结构

<nav id="nav">
	<li>
		<a></a>
	</li>
	<li>
		<a></a>
	</li>
	...
</nav>

3.article元素

在HTML5中，article元素一般只会用于：文章内容。可以将article看成一个独立部分，内部可以包含标题以及其他部分。即article元素内部可以包含header元素、section元素和footer元素。

注意：严格意义上，每隔article元素内部都应该有一个header元素。

<article>
	<header>
		<h1>HTML中的article元素</h1>
		<p>作者、点赞、评论、浏览...</p>
	</header>
	<div>文章内容...</div>
	<footer>
		<nav>上一篇、下一篇导航</nav>
	</footer>
</article>

4.aside元素

在HTML5中，aside元素一般用于表示跟周围区块相关的内容。

想要正确使用aside元素，主要取决于它的使用位置。大体可以分为以下两种情况：

若aside元素放在article元素或section元素之中，则aside内容必须与article内容或section内容紧密相关。
若aside元素放在article元素或section元素之外，则aside内容应该是与整个页面相关的，例如相关文章、相关链接、相关广告等。

5.section元素

在HTML中，section元素一般用于某个需要标题内容的区块。若页面某个区块不需要标题，直接使用div元素即可。若需要标题，建议使用section元素。

HTML5标准建议，section元素内部必须带有标题，即section元素内部必须带有一个header元素。

HTML5中，article、aside这两个元素可以堪称是“特殊”的section元素，因为它们比section元素更具有语义化。在实际开发中，对于页面某个区块，优先考虑语义化更好的article元素和aside元素，若这两个都不符合，再考虑使用section元素。

<section>
	<header>section元素</header>
	<ul>
		<li>...</li>
	</ul>
</section>

6.footer元素

在HTML5中，footer元素一般用于两个地方：页面底部、文章底部。

当用于文章底部时，即放在article元素内部时，footer元素一般包含上一篇/下一篇导航、文章分类、发布信息。

<article>
	<header>
		<h1>footer元素</h1>
		<p>作者、点赞、评论、浏览...</p>
	</header>
	<div id="content">文章内容...</div>
	<footer>
		<nav>上一篇</nav>
		<nav>下一篇</nav>
	</footer>
</article>