HTML5 语义元素-CSDN博客

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80237803

HTML5中新的语义元素

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

HTML5 <section> 元素

<section>标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<section>
			<h1>WWF</h1>
			<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
		</section>
		
		<section>
			<h1>WWF's Panda symbol</h1>
			<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
		</section>
	</body>
</html>

HTML5 <article> 元素

<article>标签定义独立的内容

<article>元素使用实例：

·Forum post

·Blog post

·News story

·Comment

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<article>
			<h1>Internet Explorer 9</h1>
			<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
		</article>
		
		
	</body>
</html>

HTML5 <nav>元素

<nav>标签定义导航链接的部分。

<nav>元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在<nav>元素中！

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<nav>
			<a href="https://www.baidu.com/">百度</a> |
			<a href="https://www.jd.com/">京东</a> |
			<a href="https://www.taobao.com/">淘宝</a> |
		</nav>
		
		
	</body>
</html>

HTML5 <aside>元素

<aside>标签定义页面主区域内容之外的内容(比如侧边栏)。

aside标签的内容应与主区域的内容相关。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
		
	</head>
	<body > 
		<p>my family and i visited the epcot conter this summer.</p>
		<aside>
			<h4>Epcot Center</h4>
			<p>The Epcot Center is a theme park in Disney World, Florida.</p>
		</aside>
		
		
	</body>
</html>

HTML5 <header>元素

<header>元素描述了文档的头部区域

<header>元素主要用于定义内容的介绍展示区域

在页面中你可以使用多个<header>元素。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<article>
			<header>
				<h1>Internet Explorer 9</h1>
				<p><time pubdate datetime="2011-03-15"></time></p>
			</header>
			<p>Windows Internet Explorer 9(缩写为 IE9)是在2011年3月14日21：00发布的</p>
			
		</article>
		
	</body>
</html>

HTML5 <footer> 元素

<footer>元素描述了文档的底部区域

<footer>元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个<footer>元素

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<footer>
			<p>Posted by: Hage Refsnes</p>
			<p><time pubdate datetime="2012-03-01"></time></p>
		</footer>
		
	</body>
</html>

HTML5 <figure>和<figcaption>元素

<figure>标签规定独立的流内容(图像、图表、照片、代码等)

<figure>元素的内容应该与主内容相关，但如果被删除，则不应该对文档流产生影响。

<figcaption>标签定义<figure>元素的标题

<figcaption>元素应该被置于"figure"元素的第一个或最后一个子元素的位置。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
	
		<figure>
			<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
			<figcaption>Fig.1 -A view of the pulpit rock is Norway.</figcaption>
		</figure>
		
	</body>
</html>

参考：

https://www.yuque.com/docs/share/3b37db28-d0ca-4cc3-bef1-f7952973bd71