HTML5新增的结构元素

时间:2022-11-02 12:27:00

在HTML5以前,我们只能通过div元素作为结构元素,而HTML5则提供了article、section、nav、aside、header、footer、main等文档结构元素。

1.article与section元素

article:用于页面上独立、完善的一篇文章,该元素表示的内容是一个帖子、一篇Blog文字、一篇短文、一条完整的回复。总而言之,只要是一篇独立的文档内容,就应该使用article元素来表示,规则如下。

  • article元素内部可使用header定义文章标题部分。
  • article元素内部可使用footer定义脚注部分。
  • article元素内部可使用section把文章内容分成几个段落。
  • article元素内部可嵌套多个article作为它的附属文章,比如一篇Blog文章后面可以有多篇回复文章。

section:用于对页面的内容进行分块。通常可以由标题内容组成,关于规则如下。

  • 通常我们建议section包含一个标题,也就是h1到h5元素来定义标题。
  • section元素可以包含多个article元素,表示该分块内部包含多篇文章。
  • section元素可以嵌套section元素,用于表示该分块包含多个多个子分块。

除了section元素可以指定cite属性之外,article元素只支持id、class、style、contentEditable、hidden等通用属性。

提示:article和section这两个元素很容易混淆,因为它们都可以包含多个元素,而且可以相互嵌套,但article和section侧重点不一样,article元素侧重于表达一篇独立的、完整的文章,而section侧重对文章的内容进行分块,下面模拟一个论坛帖子。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 论坛帖子 </title>
</head>
<body>
<h1>浏览帖子内容</h1>
<article>
	<h2>学习Android,必须先学习Java吗</h2>
	<p>Android上的应用程序只能用Java编写吗?可以用C++吗?</p>
	<!-- 帖子的“回复”部分,用section元素表示  -->
	<section>
		<h2>回复内容</h2>
		<!-- 每个article代表一个回复 -->
		<article>
			<!-- 回复的标题 -->
			<h3>还是得学习Java</h3>
			<div>作者:kongyeeku</div>
			<p>虽然Android不一定要使用Java开发,还可以选择JavaScript、<br>
				或NDK开发,但Java毕竟是Android主要的开发语言,<br>
				因此建议学习Android之前还是先学习Java</p>
		</article>
		<!-- 每个article代表一个回复 -->
		<article>
			<!-- 回复的标题 -->
			<h3>Java是基础</h3>
			<div>作者:kuan008</div>
			<p>Java是基础,学好Java再去学习Android事半功倍。</p>
		</article>
	</section>
	<!-- 帖子的“评价”部分,用section元素表示  -->
	<section>
		<h2>评价内容</h2>
		<!-- 每个article代表一个评价 -->
		<article>
			<!-- 评价的标题 -->
			<h3>讨论很好</h3>
			<p>大家讨论的很深入,对我帮助很大</p>
		</article>
		<!-- 每个article代表一个评价 -->
		<article>
			<!-- 评价的标题 -->
			<h3>赞</h3>
			<p>不错,赞</p>
		</article>
	</section>
</article>
</body>
</html>

2.header和footer元素

header元素 通常代表标题。从功能上类似于h1到h6元素,不过header还可以包含普通元素,比如p、span、nav元素等。
footer元素 用于父级元素定义脚注的部分,包括作者的版权信息、授权信息等

当网页内容、acticle、section包含了更多复杂内容的标题时,此时建议使用header元素来组织,根据前面的例子修改了一下。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 论坛帖子 </title>
</head>
<body>
<!-- 网页标题 -->
<header>
	<img src="images/fklogo.gif" alt="疯狂软件"/> 
	<a href="#">返回首页</a>
	<h1>浏览帖子内容</h1>
</header>
<article>
	<h2>学习Android,必须先学习Java吗</h2>
	<p>Android上的应用程序只能用Java编写吗?可以用C++吗?</p>
	<!-- 帖子的“回复”部分,用section元素表示  -->
	<section>
		<h2>回复内容</h2>
		<!-- 每个article代表一个回复 -->
		<article>
			<!-- 回复的标题 -->
			<header>
				<h2>还是得学习Java</h2>
				<div>作者:kongyeeku</div>
			</header>
			<p>虽然Android不一定要使用Java开发,还可以选择JavaScript、<br>
				或NDK开发,但Java毕竟是Android主要的开发语言,<br>
				因此建议学习Android之前还是先学习Java</p>
		</article>
		<!-- 每个article代表一个回复 -->
		<article>
			<!-- 回复的头部 -->
			<header>
				<h2>Java是基础</h2>
				<div>作者:kuan008</div>
			</header>
			<p>Java是基础,学好Java再去学习Android事半功倍。</p>
		</article>
	</section>
	<!-- 帖子的“评价”部分,用section元素表示  -->
	<section>
		<h2>评价内容</h2>
		<!-- 每个article代表一个评价 -->
		<article>
			<!-- 评价的标题 -->
			<h3>讨论很好</h3>
			<p>大家讨论的很深入,对我帮助很大</p>
		</article>
		<!-- 每个article代表一个评价 -->
		<article>
			<!-- 评价的标题 -->
			<h3>赞</h3>
			<p>不错,赞</p>
		</article>
	</section>
	<!-- 帖子的“脚注” -->
	<footer>
		以上帖子和回复只代表其个人观点,不代表我们的观点或立场
	</footer>
</article>
<footer>
	<a href="#">站点信息</a>
	<a href="#">联系我们</a>
</footer>
</body>
</html>

3.nav与aside元素

nav元素 定义页面上的导航条,包括页面上的主导航条、侧边、内部、页面下方的导航
aside元素 定义当前页面的附属信息,通常使用css渲染成侧边框
Html5提供nav和aside元素只是文档元素,并不负责对内容进行处理,建议我们用CSS来控制,例子如下。
article {
	font-size:11pt;
}
header {
	background-color:#ddd;
}
footer {
	border-top: 1px solid black;
	font-size: 12px;
	text-align: center;
}
aside {
	position:absolute;
	background-color:#dda;
	border:1px solid black;
	width: 200px;
	left:75%;
}
article>aside{
	top:40%;
}
body>aside{
	top:5%;
}
  • aside元素放在body内部,表明为整个页面添加边栏。
  • aside元素放在其他父元素内部,表明为父元素添加边栏。
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 论坛帖子 </title>
	<link rel="stylesheet" type="text/css" href="css.css"/><!-- 上面的css -->
</head>
<body>
<!-- 网页标题 -->
<header>
	<img src="fklogo.gif" alt="Java学习"/>返回首页
	<h1>浏览帖子内容</h1>
</header>
<article>
	<h2>学习Android,必须先学习Java吗</h2>
	<p>Android上的应用程序只能用Java编写吗?可以用C++吗?</p>
	<!-- 帖子的“回复”部分,用section元素表示  -->
	<section>
		<h2>回复内容</h2>
		<!-- 每个article代表一个回复 -->
		<article>
			<!-- 回复的标题 -->
			<header>
				<h2>还是得学习Java</h2>
				<div>作者:kongyeeku</div>
			</header>
			<p>虽然Android不一定要使用Java开发,还可以选择JavaScript、<br>
				或NDK开发,但Java毕竟是Android主要的开发语言,<br>
				因此建议学习Android之前还是先学习Java</p>
		</article>
		<!-- 每个article代表一个回复 -->
		<article>
			<!-- 回复的头部 -->
			<header>
				<h2>Java是基础</h2>
				<div>作者:kuan008</div>
			</header>
			<p>Java是基础,学好Java再去学习Android事半功倍。</p>
		</article>
	</section>
	<!-- 帖子的“评价”部分,用section元素表示  -->
	<section>
		<h2>评价内容</h2>
		<!-- 每个article代表一个评价 -->
		<article>
			<!-- 评价的标题 -->
			<h3>讨论很好</h3>
			<p>大家讨论的很深入,对我帮助很大</p>
		</article>
		<!-- 每个article代表一个评价 -->
		<article>
			<!-- 评价的标题 -->
			<h3>赞</h3>
			<p>不错,赞</p>
		</article>
	</section>
	<!-- 帖子的“脚注” -->
	<footer>
		以上帖子和回复只代表其个人观点,不代表疯狂Java联盟的观点或立场
	</footer>
	<!-- 该aside放在article内部,将作为该文章的“边栏”信息 -->
	<aside>
		<section>
		<h4>关于楼主</h4>
		<div>用户组: 编程摸索者</div> 
		<div>注册日期: 2009-7-27</div> 
		<div>上次访问: 2012-1-3 20:02</div> 
		<div>最后发表: 2012-1-1 17:38</div> 
		<div>发帖数级别: 小试牛刀</div> 
		<div>阅读权限: 30</div> 
		</section>
	</aside>
</article>
<footer>
	<a href="#">站点信息</a>
	<a href="#">联系我们</a>
</footer>
<!-- 该aside放在body内部,将作为整个HTML文档的“边栏”信息 -->
<aside>
	<h3>页面导航</h3>
	<nav>
		<ul>
			<li><a href="#">查看相关内容</a></li>
			<li><a href="#">返回首页</a></li>
			<li><a href="#">返回本版</a></li>
		</ul>
	</nav>
</aside>
</body>
</html>

4.main元素

一个html页面只能包含一个main元素,用于包含除导航条、Logo、版权信息等之外的主要内容,换句话来说,我们使用main元素,页面中的article、section和div元素都应该放在main元素内,main元素不应该放在允许重复出现的内容中,demo如下。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 回复 </title>
</head>
<body>
<!-- 网页标题 -->
<header>
	<h1>浏览回复内容</h1>
</header>
<main>
<h2>还是得学习Java</h2>
<div>作者:kongyeeku</div>
<p>虽然Android不一定要使用Java开发,还可以选择JavaScript、<br>
	或NDK开发,但Java毕竟是Android主要的开发语言,<br>
	因此建议学习Android之前还是先学习Java</p>
</main>
</body>
</html>

5.figure和figcaption元素

html为图像语义额外添加了figure和figcaption这两个元素,下面我们来看看这两个元素的功能。

figure元素 表示一块独立的图片区域,可以包含一个以上img元素,还可以包含一个figcaption元素,定义图片区域的标题
figcaption元素 通常放在figure内部,定义图片区域的标题
下面使用figure元素定义了一块图片区域,包含了三张图片,并且通过figcaption添加了标题。此外,还使用了css添加了边框。
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 图片区域 </title>
</head>
<body>
<figure style="border:2px solid black;padding:5px;width:510px">
	<figcaption><b>Java体系</b></figcaption>
	<img src="images/java.png" alt="Java" style="width:165px;height:230px"/>
	<img src="images/android.png" alt="Android" style="width:165px;height:230px"/>
	<img src="images/javaee.png" alt="Java EE" style="width:165px;height:230px"/>
</figure>
</body>
</html>
figure定义的图片区域代表了网页上的独立区域,每个figure元素内部只能包含一个figcaption元素。


--------------如果大家喜欢我的博客,可以点击右上角的关注哦。