HTML5语义化标签

最新推荐文章于 2023-01-13 17:23:52 发布

我就呵呵了。。。

最新推荐文章于 2023-01-13 17:23:52 发布

阅读量156

点赞数

文章标签： article section

本文链接：https://blog.csdn.net/qq_37244548/article/details/106249076

版权

Article元素的常见使用

Article主要用来表示文章内容的，可以配合header，p，footer等元素的共同使用，header一般表示头部，p标签一般用来包裹内容，而footer一本用来表示文章的底部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 只要是内容部分都可以使用article包裹 -->
	<article>
		<header>
			<h1>百家讲坛</h1>
			<p>hi,欢迎来到百家讲坛</p>
		</header>
		<p>这是内容部分</p>
		<footer>
			<p>这是底部</p>
		</footer>
	</article>
	</body>
</html>

效果展示:

Article元素可以嵌套使用

Article元素在使用时，还可以嵌套使用，什么叫做嵌套使用，就是article元素中我们可以再次使用article元素，比如我们写一篇文章，文章的评论也是文章，所以我们可以使用Article把评论包起来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 只要是内容部分都可以使用article包裹 -->
	<article>
		<header>
			<h1>百家讲坛</h1>
			<p>hi,欢迎来到百家讲坛</p>
		</header>
		<article>
			<header>作者：王兴</header>
			<p>这是我的评论</p>
			<footer>时间:2026.1.2</footer>
		</article>
		<footer>
			<p>
				这是底部
			</p>
		</footer>
	</article>
	</body>
</html>

效果展示:

Article元素可以表示插件

Article元素可以当做插件，用于插入一个页面或视频等一些资源

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 只要是内容部分都可以使用article包裹 -->
	<article>
		<header>
			<h1>百家讲坛</h1>
			<p>hi,欢迎来到百家讲坛</p>
		</header>
		<article>
			<header>作者：王兴</header>
			<p>这是我的评论</p>
			<footer>时间:2026.1.2</footer>
		</article>
		<footer>
			<p>
				这是底部
			</p>
		</footer>
	</article>
	<article>
		<h1>这是一个内嵌页面</h1>
		<!-- object标签表示引入对象 -->
		<object data="商品.html" type="MIME_type" width="500px" height="330px">
		</object>
	</article>
	</body>
</html>

效果展示：

section元素

section元素用于对网站或者应用程序页面上的内容进行分块。一个section元素通常由内容及其标题组成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<section>
			<h1>天气</h1>
			<p>今天的天气不是很热，温度适中</p>
		</section>
	</body>
</html>

效果展示

section和Article的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<section>
			<h1>天气</h1>
			<p>今天的天气不是很热，温度适中</p>
		</section>
		<article>
			<h1>天气</h1>
			<p>
				今天的天气不是很热，温度适中
			</p>
			<section>
				<h2>天空</h2>
				<p>
					今天的天空很蓝
				</p>
				<h2>树木</h2>
				<p>
					树叶很绿
				</p>
			</section>
		</article>
	</body>
</html>

效果展示：

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。 div、section、article，语义是从无到有，逐渐增强的。div无任何语义，仅仅用作样式化或者脚本化的标签，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用article的时候，也是可以使用section的，但是实际上，假如使用article更合适，那么就不要使用section。
section用作一段有专题性的内容，一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段；一个section元素通常由内容及其标题组成，通常不推荐为那些没有标题的内容使用section元素。

我就呵呵了。。。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5语义化标签

目录Article元素 Article元素的常见使用Article元素可以嵌套使用Article元素可以表示插件section元素section和Article的区别 Article元素的常见使用Article主要用来表示文章内容的，可以配合header，p，footer等元素的共同使用，header一般表示头部，p标签一般用来包裹内容，而footer一本用来表示文章的底部<!DOCTYPE html><html> <h...
复制链接

扫一扫