html section 布局,section标签的用法

标签的用法

由于昨晚发了一篇文章

http://www.zcool.com.cn/article/ZMzA3MzI=.html

,有一个网友评论问 的用法。所以现在举例来说明一下:

html5引入了标签,用于描述文档的结构,它同

标签的意思一样。但是在特定环境中,两者又有明显的区别。

w3对的定义是:定义一个文档的章节(可以拥有自己的和)。

w3对

的定义是: 定义一个文档的章节。(但似乎更适合用于外层的布局,缺少语义性。)

比如看一个案例:

在这里,我用来定义id为content的div里面的两个章节/区域。当然此处你也可以直接把div用section代替,或者把里面的改成

,因为此处还不能明显的区分两者的区别:

或者:

我们继续举例分析另外一个更明显的区分和

的案例:
  • member1
  • member2
  • member3

member1

一个描述的段落

另一个描述的段落

这里的描述段落在语义上于外层的段落不是兄弟级别。

这里的描述段落在语义上于外层的段落不是兄弟级别。

又是另外一个段落描述,于最上面的两个段落属于兄弟级。

member2

一个描述的段落

另一个描述的段落

这个有分节的小标题,这里是这个分节的小标题

这里的描述段落在语义上于外层的段落不是兄弟级别。

这里的描述段落在语义上于外层的段落不是兄弟级别。

又是另外一个段落描述,于最上面的两个段落属于兄弟级。

member3

一个描述的段落

另一个描述的段落

这里是这个分节的小标题

这里的描述段落在语义上于外层的段落不是兄弟级别。

这里的描述段落在语义上于外层的段落不是兄弟级别。

这里的内容对于这个是一个脚部,它区别于上面的描述段落。

又是另外一个段落描述,于最上面的两个段落属于兄弟级。

在这个案例当中,我们用

标签来布局整个最外层的章,而用用来定义内部的章节。当然如果把整个文档都看作是一个章节,那么也可以用来代替
,但是建议不要使用来代替该用
布局的地方,那些地方不能体现出 的语义性。

在上面的

中,有一个导航,用元素,

除了之外,就是属于这个

的区域内的具体的章节,我们就用来定义,你可以看到,用来定义一个章节,而这个章节的内部又都是一个 ,它是关于一个member的具体的文章。而在这个的内部,可能我们会发现,有时候这个文章的结构又会有嵌套的关系,那么这个被嵌套的区域我们就可以用来表示这整个文章内的又一个分节。显然,在这里用
标签的话,语义上来说就很不适合了。

d1632d591c968d9c0e1a443b458a19d6.png

(责任编辑:大宝库)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

清北学堂Day4

(1)第一题 财富(treasure) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK有n个小伙伴。每个小伙伴有一个身高hi。 这个游戏是这样的,LYK生活的环境是以身高为美的环境,因此在这里的每个人都羡慕比自己身高高的人&#xff…

visio中公式太小_visio绘图中的数据计算

在绘流程图时,我们有时候会想直接在流程图上做计算,比如化工设计时精馏塔计算理论塔板数。在VISIO中,实现这个功能还是比较容易,举一个最简单的例子。如下图所示,等号后面的数字可以根据前面的数字变化。实现过程如下&…

ltsc系统激活_WIN10_X64企业版LTSC 电脑公司装机版 202008

文件: WIN10_X64_LTSC_ZJ202008.esd大小: 7431429353 字节(6.92G)MD5: A3A3B15ED47216E177C924D2E07E0799SHA1: 3A647265E0C8234225C633407093BAA07253FB34CRC32: 32E791E9(注意,下载文件有一定几率损坏,如文件值不对请重新下载!)360安全云盘…

zabbix 安装_安装zabbix

准备一个纯净环境10.0.0.99首先修改yum源,修改为zabbix清华源,清华源玉zabbix官方源都是同步的,下载速度更快!zabbix官方Download Zabbix​www.zabbix.com点击下载,下面有zabbix的历史版本以及官方安装文档可以查看到不…

拓展欧几里得 [Noi2002]Savage

对于一个野人,他(她?)所在的位置,(C[i]x*p[i])%ans,是的,暴力枚举每一个ans,用拓展欧几里得求出每两个wildpeople(wildrage?)相遇的年份,如果小于最小的寿限…

CCNP-19 IS-IS试验2(BSCI)

CCNP-19 IS-IS试验2 实验拓扑:试验要求:R1 R2 R3全部采用集成的ISIS路由协议,R1 R2在区域49.0001内,R3在区域49.0002内,R1与R2之间的链路类型为L1,R2与R3之间的链路类型为L2。 试验目的:掌握基…

dijkstra算法代码_数据科学家需要知道的5种图算法(附代码)

在本文中,我将讨论一些你应该知道的最重要的图算法,以及如何使用Python实现它们。作者:AI公园导读因为图分析是数据科学家的未来。作为数据科学家,我们对pandas、SQL或任何其他关系数据库非常熟悉。我们习惯于将用户的属性以列的形…

大暴搜 chess

仔细读题,会发现吃掉敌人点对方案数的贡献很神奇。如果走的空格相同,而走的敌人点不同,对答案无贡献,而对于走的空格相同,但一种走了敌人点,另一种没走,算两个方案。。。。sb出题人语文简直是和…

html 缩略图点击预览,[每天进步一点点~] uni-app 点击图片实现预览图片列表

点击图片,实现预览图片功能,并且可循环预览图片列表!image.png一、多张图片预览html代码js代码data(){return {photos:[{ src: 图片路径1},{ src: 图片路径2},{ src: 图片路径3},……]}},methods: {// 预览图片previewImage(index) {let phot…

git ssh拉取代码_阿里云搭建git服务器

一.搭建步骤,分为两步搭建中心仓库自动同步代码到站点目录二.详细步骤如下1.先检查一下服务器上有没有安装gitgit --version如果出现版本号,说明服务器已经安装git,如图所示:2.如果没有版本信息,则先安装git&#xff1…

Word -- 列表重新编号

Word -- 列表重新编号office一言:我小心翼翼地灌溉,一日复一日地期待,那么费力,植成参天的乔木,岂愿见你终有一日从容赴死?问题 word 文档早就想解决的一个问题,这次遇到了就上网找解决掉了&…

非持久连接和持久连接

非持久连接和持久连接 HTTP既可以使用非持久连接(nonpersistent connection),也可以使用持久连接(persistent connection)。HTTP/1.0使用非持久连接,HTTP/1.1默认使用持久连接。 非持久连接 让我们查看一下非持久连接情况下从服务器到客户传送一个Web页面…

计算机开机键鼠无法识别,我得电脑一开机就检测不到键盘和鼠标

2005-10-18 16:06:131、开机后当出现dos界面时,按一下pause键(这个键在四个方向键的上边,仔细找就能找到),如果计算机启动停止,说明你的键盘起作用,主板在开机时就已经检测到了鼠标键盘。启动后不能使用鼠标键盘&#…

vs2003 局部友元访问私有不可访问_C++ 类:重载运算符与友元

18.类中重载运算符与友元上次节中学习了如何在类中重新定义赋值()运算符,实际上在一个自定义类中除了赋值()运算符外,类的对象是不可以直接使用运算符的,比如你在main函数中写这样的代码会报错:如果想解决这些报错问题&#xff0c…

Django REST framework 视图

上一部分代码在序列化部分 类继承顺序 ############### mixins.py ################ # 类中调用的方法均在 GenericAPIView 类中实现,所以下列类需要结合 GenericAPIView 使用 class ListModelMixin(object) # 查看继承类def list(self, reque…

IOS7.1.1真的像网上流传的那么好?没有任何问题么??

IOS7.1.1推送更新之后到处看到网上说711好的~~ 那么IOS7.1.1真的像网上现在流传的那么好么? 其实不然,IOS7.1.1目前众多网友反映说升级ios7.1.1之后APPstore连接不上了,提示无法连接到APPstore。 这个问题也不难解决~还是之前的老办法~ 那么今…

三校生计算机对口本科有哪些学校,宝山三校生五月对口高考报名

多次复习生活不可能像你想象得那么好,但也不会像你想象得那么糟。我觉得人的脆弱和坚强都超乎自己的想象。多种方式结合起来复习单一的复习方法,易产生消极情绪和疲劳,如果采用交谈复习法、讨论复习法、自我检查复习法多样化的复习方法&#…

localhost 已拒绝连接_【Python】MongoDB数据库的连接和操作

安装Python 要连接 MongoDB 需要 MongoDB 驱动。pip安装:python3 -m pip3 install pymongo创建数据库import pymongo myclient pymongo.MongoClient("mongodb://localhost:27017/")mydb myclient["loaderman"]注意: 在 MongoDB 中&#xff0c…

checkbox已设置为checked--true-但不勾选问题解决方法(只第一次勾选有效)

一、出现的问题及解决方法: 今天在写一个table相关插件的时候无意中发现了这样一个问题,记得以前在写这种控制checkbox选中与非选中的代码时并没有这种bug,当时也是用的checked属性,而现在却行不通了。 于是乎做了以下测试&#x…

Django REST framework 认证、权限和频率组件

认证与权限频率组件 身份验证是将传入请求与一组标识凭据(例如请求来自的用户或其签名的令牌)相关联的机制。然后 权限 和 限制 组件决定是否拒绝这个请求。 简单来说就是: 认证确定了你是谁权限确定你能不能访问某个接口限制确定你访问某…