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>

轮廓工具

轮廓工具地址:

轮廓工具检验代码步骤:

 

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

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

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

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

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

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

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

转载于:https://www.cnblogs.com/bdqnit/p/9132571.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值