HTML5 Section元素



什么是Section元素


Section元素是对网站、网页进行内容分块的元素。一个section元素通常是由内容和它的标题组成,section元素并非是一个普通的容器元素,当一个容器需要被直接定义样式的时候,我们还是推荐大家是div,下面我们就通过一段简单的代码来认识我们section元素。



Section元素的用法


<!DOCTYPE  html>

<html>

<head lang=”en”>

<meta charset=”UTF-8”>

<title></title>

</head>

<body>

<section>

<h1>这是一个section元素</h1>

<p>这是一个内容区域</p>    //通常我们不推荐使用没有标题的内容,来使用我们的section元素。我们可以使用HTML5轮廓工具进行检验,轮廓工具地址在下方。

 

</section>

</body>

</html>



轮廓工具


轮廓工具地址:


HTML5-1.png

 


轮廓工具检验代码步骤:


HTML5-2.png

 


HTML5-3.png

 


HTML5-4.png

 


然后点击提交之后的页面,这样就显示出了我们当前网页的轮廓。


HTML5-5.png

 


我们在p元素后面新增一个section元素,代码如下:


HTML5-6.png

 


然后我们把代码复制进轮廓工具进行检查。


HTML5-7.png

 


如果我们把h2标题去掉,显示结果就会出现Untitled Section


HTML5-8.png

 


这种情况,就不推荐大家使用section,而是添加一个标题后,再使用section元素。Section元素的作用是对我们页面上的内容进行分块,不要和我们有完整独立内容的article元素进行混淆,那么我们再来添加一个article元素和section元素的实例。


HTML5-9.png

 


HTML5-10.png

 


很多人会问第一段为何不使用section元素,这里其实我们可以使用的,但是由于它的结构比较清晰,分析器可以识别出第一段内容在section元素里面,所以我们可以把第一个section元素忽略掉。但是如果第一个section元素里面还要包含子section元素或者article元素,那就必须写明section元素。下面我们再来写一个article元素和section元素的实例。


HTML5-11.png

 


这个例子比前面的例子要稍微复杂一些,因为它是一篇文章中的一段,因此我们最初没有设article元素,但是这一段中有几块独立的内容,因此我们嵌入了几个独立的article元素,具体来说,一块内容相对于比较独立的话,我们就使用article元素,如果想将一块内容划分成几段的话,那就用section元素,另外在HTML5中div变成了一种容器。当使用css样式的时候,可以对这个容器的总体进行套用,对这个容器进行总的css样式进行套用,另外在补充一点,在HTML5中,可以将所有的页面的从属部分,比如导航条、菜单、版权说明包含在一个统一的页面中,以便使用一个统一的css样式来进行装饰。



Section元素使用禁忌


1、不要使用section元素设置样式作为设置样式的页面容器,因为那是div的工作。

2、如果article元素、aside元素、nav元素更适合我们使用条件,那么我们就不要使用section元素。

3、不要为没有标题的内容去块使用section元素。


【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

您有一个双11钜惠红包未领取

客服热线 400-862-8862

回到顶部