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

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

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

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

  1. 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>
  1. 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>
  1. section元素
    section 元素定义文档中的节、区段。比如章节、页眉、页脚或其他部分。
  2. 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>
  1. 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>
  1. 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”表示时差<-->
  1. pubdate元素
    pubdate元素可以用在article元素里的time上,来表示当前网页的发布时间。
<p>发布时间<time datetime="2020-5-30"pubdate="pubdate">2020年5月30</time></p>
  1. header元素
    header元素是通常用于存放页面或者一个内容区块的标题,但除了标题以外也可以存放logo图片和搜索表单等。

  2. hgroup元素
    hgroup元素是用来将标题进行组合。
    例如:

<hgroup>
 <h1>标题1</h1>
 <h2>标题2</h2>
</hgroup>
  1. footer元素
    footer元素可以作为页面页脚或者页面的一个区块的注脚,一般用于这个页面或区块相关的信息,如作者,版权信息等。
  2. address元素
    address元素是用来定义网页或者文章的作者的联系信息,一般被包含在footer元素内。
    <address>被包含在<body><footer>中则表示网页的联系信息。
    <address>被包含在<article><footer>中则表示文章作者的联系信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值