HTML5新增的主体结构元素

最新推荐文章于 2024-09-13 11:02:21 发布

努力学习的前端小白(找工作ing)

最新推荐文章于 2024-09-13 11:02:21 发布

阅读量77

点赞数

文章标签： html5 html 前端

本文链接：https://blog.csdn.net/m0_65066464/article/details/129707407

版权

1.article元素

功能：用于定义外部的内容。一个article元素可以有其自己的标题、内容和注脚，还可以与其它article元素嵌套使用。例如下面这段代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>article元素展示</title>
	</head>
	<body>
		<article>
			<header>
				<h1>面包</h1>
				<p><b>面包</b>是一种用五谷磨粉制作并加热而制成的食品。</p>
			</header>
			<p><b>豆沙面包：</b>高筋面粉150克</p>
			<p><b>乳酪石榴面包：</b>红豆沙150克</p>
			<article>
				<header>吃面包的好处</header>
				<p>面包以小麦为主要原料</p>
			</article>
			<footer>
				<p>版权信息</p>
			</footer>
		</article>
		
	</body>
</html>

2.section元素

功能：定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。一个section元素通常由内容及其标题组成。不推荐给没有标题的内容使用section元素。

<section>
    <h1>面包</h1>
    <p><b>面包</b>是一种用五谷磨粉制作并加热而制成的食品。</p>
</section>

section元素用于表示文章的段，是一个独立的块，而article元素用于表示文章外部的内容。如果在一篇文章中需要引入另一篇文章的某些段落时，其代码结构如下：

<article>
	<section>
		<h1>第一段标题</h1>
		<p>第一段正文</p>
    </section>
	<section>
		<h1>第二段标题</h1>
		<p>第二段正文</p>
	</section>
</article>

如果在一个段落中需要引入另一篇文章时，其代码如下：

<section>
	<h1>段落标题</h1>
	<article>
		<h2>标题</h2>
		<p>内容</p>
	</article>
</section>

3.nav元素

功能：用于定义导航链接的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nav元素展示</title>
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="index.html">主页</a></li>
				<li><a href="">随笔</a></li>
				<li><a href="">联系</a></li>
			</ul>
		</nav>
	</body>
</html>

效果图:

nav元素在网页中起着非常重要的作用，比如网页顶部的导航条，其作用是在多个页面之间进行跳转；网页侧边栏导航，其作用是从当前页面跳转到其他页面；网页页内导航，其作用是一个网页中的多个主要部分进行跳转；翻页导航，其作用是在多个网页之间实现前后页滚动。

4.aside元素

功能：用来定义article元素以外的内容，其内容应该与article的内容相关。如文章中的名词解释。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>aside元素展示</title>
	</head>
	<body>
		<p>中子的概念是由卢瑟福提出的，中子的存在是1932年B.查德威克用a粒子宏基的实验中证实的 。</p>
		<aside>
			<h4>中子</h4>
			中子（Neutron）是组成原子核的核子之一。
		</aside>
	</body>
</html>

效果图：

另外，aside元素内容还可以用作文章的侧栏，其内容作为文章的附属信息。例如nav元素导航作为aside元素的内容，这样就实现了一个侧边栏导航条。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>aside元素展示</title>
	</head>
	<body>
		<aside>
			<nav>
				<h4>热门文章</h4>
				<ul>
					<li><a href="">文章1</a></li>
					<li><a href="">文章2</a></li>
					<li><a href="">文章3</a></li>
				</ul>
				<h4>随机文章</h4>
				<ul>
					<li><a href="">文章4</a></li>
					<li><a href="">文章5</a></li>
					<li><a href="">文章6</a></li>
				</ul>
			</nav>
		</aside>
	</body>
</html>

效果图：

5.time元素

功能：用于定义日期和时间。time元素可以表示带时区的时间，也可以定义多种格式的日期和时间。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>time元素展示</title>
	</head>
	<body>
		<p>我们早上<time>9:00</time>上班。</p>
		<p>今天是<time datetime="2023-03-22">2023年3月22日</time></p>
		<p><time datetime="2023-03-22T9:00">现在是早上9:00</time>上班</p>
		<p><time datetime="2023-03-22T9:00Z">现在是早上9:00</time>上班</p>
		<p><time datetime="2023-03-22T9:00+08:00">现在是早上9:00是美国时间下午5:00</time></p>
	</body>
</html>

time元素的datetime属性指定机器读取的日期和时间，time元素的内容显示在网页上。datetime属性中的大写字母T表示时间，Z表示UTC标准时间，“+8:00”表示时区。

另外，time元素还有一个pubdate属性，表示article元素的发布日期。该属性是一个可选的布尔值。