当前位置: 首页 > 工具软件 > Html2Article > 使用案例 >

html5中的div和section,article,aside的用法

吕德惠
2023-12-01

html5中的div和section,article,aside的用法

最近在学习html5,关于section和div还有article的理解非常模糊,于是查了些资料终于对section和div还有article的区别有了些自己的理解。怕以后忘记,记录下来。

第一点:section 的含义是区,块。里面必须包含一个标题,如果一个网页分区比较明确可以使用section

举例,一张报纸,里面有国内新闻,国际新闻,娱乐新闻等等,那么我们就可以用section将这些区,块包裹起来,有利于搜索引擎抓取。

第二点:section不能代替div。1.没有标题的情况下最好用div,不能用section。 2.如果用section,但是需要设置样式,最好在section中设置一个div,然后给div设置样式或者脚本。最好不要直接在section上设置样式或者脚本。

第三点:section和article可以相互嵌套。但是我们从article中的含义中可以理解,article是一篇文章,他是完整的。比如一篇文章有标题,有内容,有结尾那么我们最好用article不用section。article中呢可能有很多的段落,每个段落都有自己的标题的情况下我们又可以用section。所以section和article是可以相互嵌套的。

举例:一个小说网站有很多的分类板块,例如:情感板块,科幻板块,少女板块等等,这些板块我们用section。但是我们要给每个板块设置样式,就要在section下面加div,然后给div设置样式或者脚本。每个板块下面有很多的小说文章,每篇小说文章就用article,每篇小说里面有很多的章节,每个章节都有独立的标题,我们就接着用section。

第四点:aside是描述与主题内容相关的,但又可以独立的内容。

举例:我们还是以小说网站举例,我们经常会看到,每篇小说文章的侧边栏,都会有一些读者的信息或者广告之类的一些东西,那么所有的这些我们就用一个aside包裹起来,在一个网页中aside用的很少,基本每个网页也就是用一次。

总结:section不能代替div,能用article或者aside的时候,不要用section。那么很多人都会说直接就像以前一样直接用div不就得了,干嘛这么麻烦用section,article,和aside,本人认为用好section,article,和aside更有利于搜索引擎抓取,而且写出来的代码,更加整洁,分区更加明确。

最后用一段简单的代码来解释一下div section article aside,这段代码是错误的,不可能会出现在一个网页内,文章内容和标题还有板块同时出现的情况,我这样写只是有利于对div,section,article,aside的区分和理解。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			
			<!-- section代表区,块-->
			<section>
				
				<!--不要直接在section上设置样式,里面嵌套div来设置样式-->
				<div style="">
					
					<!--section中必须包含一个标题-->
					<h1>国内新闻</h1>
					
					<!--article代表每篇文章,它里面包含标题,内容,他是完整的独立的,所以就用article
-->	
					<article>
						
						<!--文章的标题-->
						<h2>白宫抗议白搭!这些不守中国规矩的外航全得整改</h2>
						
						<!--文章的内容-->
						<div>辅导辅导辅导辅导辅导发的发的发的发股份合格合格后</div>
						
						<!--文章的评论,文章的评论区域又相当于一个区,块所以用section-->
						<section>
							
							<!--不要直接在section上设置样式,里面嵌套div来设置样式-->
							<div style="">
								
								<!--每条评论都有标题,内容,他是完整的独立的,所以就又用article-->
								<article>
									<h3>留言人:张三</h3>
									<div>留言的内容</div>
								</article>
							</div>
						</section>
						<footer></footer>
					</article>
				</div>
			</section>
		</div>
	</body>
</html>

 类似资料: