HTML5结构标签的学习

本文介绍了HTML5中新增的结构标签,包括<section>、<article>、<nav>、<aside>、<header>、<footer>、<hgroup>和<figure>,这些标签赋予了网页内容更明确的语义,有助于提升网页的结构化和SEO效果。

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

HTML5的学习
HTML5中添加了拥有具体含义的HTML标签。
一、结构标签
1、<section>
定义文档中的节,用来表现普通的文档内容或应用区块,一般会带有标题。
例:

<section>
		<h1>This is a test</h1>
		<article>
				<h2>a story</h2>
				<p>friendship</p>
		</article>
</section>

2、<article>
表示一个独立的、完整的相关内容块,通常用来描述一个具体的事物。
含有标题部分,一般在header内,也可以包含footer.
此外,article也可以嵌套,内层的article对外层的article标签有隶属关系。
例:

<article>
	<header>
			<hgroup>
				<h1>This is a test</h1>
			</hgroup>
	</header>
	<p>a  story</p>
</article>

3、nav
页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分。
例:

<nav>
	<ul>
		<li>a love story</li>
	</ul>
</nav>

4、<aside>
用来装载非正文的内容,被视为页面里的一个单独的部分,可以被删除而不会影响到网页的内容。例如广告、侧边栏等。
例:

<aside>
		<h1>a sad love story</h1>
		<p>it is a test</p>
</aside>

5、header
定义文档的页眉,既可以写在网页头部也可以写在网页内容里。
可以包含hgroup标签、表格内容、标识、搜索表单、nav导航等。
6、<footer>
定义了section或document的页脚,包含了与页面、文章或是部分内容相关的信息,比如作者或日期。可以在一个页面中多次使用,若在一个区段的末尾加入footer,即相当于该区段的页脚。
7、hgroup
是对网页或区段section的标题元素(h1-h6)进行组合。
例:

<hgroup>
	<h1>This is a test</h1>
	<h2>it is sunday</h2>
</hgroup>

8、<figure>
用于对元素进行组合。多用于图片与图片描述组合。
例:

<figure>
		<img src="img.gif" alt="figure标签" title="标签"/>
		<figcaption>some message about the picture</figcaption>
</figure>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值