html5的主体结构元素和非主体结构元素_哪一个元素不能和主体元素〈body〉共存-优快云博客

本文详细介绍了HTML5中的主要结构元素，包括article、section、aside、nav、time、header、hgroup、footer和address等，阐述了它们在网页布局和内容组织中的作用，帮助理解如何构建更规范的网页结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5的主体结构元素和非主体结构元素

html5 的网页结构

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

article元素
article元素是一个独立的区域，它有自己的标题和页脚。

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<article>
			<header>
				<h1>Article的标题</h1>
				<p></p>
			</header>
		<p>
			<b>正文</b>
		</p>
		<footer>
			<p>Article的页脚</p>
		</footer>
		</article>
	</body>
</html>

article的嵌套
内层的内容在原则上是需要与外层的内容相关联,例如文章和评论。

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<article>
			<header>
				<h1>Article的标题</h1>
				<p></p>
			</header>
		<p>
			<b>正文</b>
		</p>
		<footer>
			<p>Article的页脚</p>
		</footer>
		</article>
		<section>
			<h2>读者评论</h2>
			<article>
				<header>
					<h3>读者：张三</h3>
					<p>
						<time pudate datetime=”2020/05/30T19:00”>2小时前</time>
					</p>
				</header>
			<p>文章很好！</p>
			</article>
			<h2>读者评论</h2>
			<article>
				<header>
					<h3>读者：李四</h3>
					<p>
						<time pudate datetime=”2020/05/30T19:00”>2小时前</time>
					</p>
				</header>
				<p>文章非常好！</p>
			</article>
		</section>
	</body>
</html>

section元素
section 元素定义文档中的节、区段。比如章节、页眉、页脚或其他部分。
aside元素
aside标签定义其所处内容之外的内容,其内容应该与附近的内容相关。用于侧边栏，广告栏或引用等方面。
用于内容解释时：

<p>这篇文章是爱因斯坦写的</p>
<aside>
<h4>爱因斯坦</h4>
出生于德国巴登－符腾堡州乌尔姆市，毕业于苏黎世联邦理工学院，犹太裔物理学家。
</aside>

用于全局时：

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<article>
			<header>
				<h1></h1>
				<p></p>
			</header>
		</article>
		<p></p>
		<aside>
			<h1>公告</h1>
			<p>今日网站维护</p>
		</aside>
	</body>
</html>

nav元素
用于页面导航的链接组。例如导航栏，翻页和页面内移动。但在页脚时，不建议使用 nav元素，建议使用footer。

<nav>
<a href="https://www.baidu.com">Home</a>
<a href="https://www.goole.com">Previous</a>
<a href="https://www.taobao.com">Next</a>
</nav>

time元素

<p>我每天早上 <time>7:00</time> 起床</p>
<time datetime="2020-05-20">2020年5月20</time> 
<time datetime="2020-05-20">2020年5月20日</time> 
<time datetime="2020-05-20T19：30">2020年5月20日晚上7点</time> 
<time datetime="2020-05-20T19：30Z">UTC标准时间2020年5月20日晚上7点</time> 
<time datetime="2020-05-20T19：30+8：00">中国时间2020年5月20日晚上7点</time> 
<!-->“+8：00”表示时差<-->

pubdate元素
pubdate元素可以用在article元素里的time上，来表示当前网页的发布时间。

<p>发布时间<time datetime="2020-5-30"pubdate="pubdate">2020年5月30</time></p>

header元素
header元素是通常用于存放页面或者一个内容区块的标题，但除了标题以外也可以存放logo图片和搜索表单等。
hgroup元素
hgroup元素是用来将标题进行组合。
例如：

<hgroup>
 <h1>标题1</h1>
 <h2>标题2</h2>
</hgroup>

footer元素
footer元素可以作为页面页脚或者页面的一个区块的注脚，一般用于这个页面或区块相关的信息，如作者，版权信息等。
address元素
address元素是用来定义网页或者文章的作者的联系信息，一般被包含在footer元素内。
若<address>被包含在<body>的<footer>中则表示网页的联系信息。
若<address>被包含在<article>的<footer>中则表示文章作者的联系信息。