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…

Falsk session 源码解析

Falsk框架session请求流程 from flask import Flask # 1. 实例化Flask对象 app Flask(__name__) # 2. 设置路由 app.route(/index) def index(): return "index" if __name__ __main__: # 3. 启动socket服务端 app.run() # 4. 用户请求到来 ap…

vlc内部运行机制以及架构分析

VLC架构剖析1. VideoLan简介1.1 videolan组成Videolan有以下两部分组成:VLC:一个最主要的部分,它可以播放各种类型的媒体文件和流vlc架构剖析 1. VideoLan简介 1.1 videolan组成 Videolan有以下两部分组成: VLC:一个最主要的部分,它可以播放各种类型的媒…

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

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

Django syncdb mysql error on localhost - (1045, Access denied for user 'ODBC'@'

环境:WINDOWS系统 将数据库配置 DATABASES { default: { ENGINE: django.db.backends.mysql, HOST: localhost, PORT: 3306, NAME: yunwei, USERNAME: root, PASSWORD: mysql, } } 改为 DATABASES { default: { ENGINE: django.db.backends.mysql, HOST: localhos…

银行招计算机专业算什么岗,银行计算机专业岗位全方位分析

黑龙江银行招聘信息陆续发布,中公教育专家为各位考生提供:银行计算机专业岗位全方位分析!供大家参考,预祝大家取得好成绩,更多黑龙江人民银行招聘相关资料请关注黑龙江银行招聘网。金融银行部门一直是一个朝阳产业&…

【47.92%】【hdu 5763】Another Meaning

Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submission(s): 1440 Accepted Submission(s): 690 Problem DescriptionAs is known to all, in many cases, a word has two meanings. Such as “hehe”, which not only mea…

root用户登录mysql后新建用户提示1045错误

执行以下命令查看root权限 show grants for rootlocalhost; 如果没有显示with grant option,说明是root没有拥有新建授权用户的权限(为什么会这样呢,因为我把userroot and hostlocalhost给删掉了,然后重新授权all privileges给新建root用户&a…

Flask werkzeug 源码解析

Flask werkzeug流程大概:执行run_simple ,实际执行为先用make_server 创建一个 BaseServer 实例,然后执行 实例的serve_forever 方法, serve_forever 调用 run_simple 传入的第三个参数,执行(self, environ, start_response) &am…

AVS 帧内预测模式的汇编优化

王瑞*基金项目:本课题得到国家自然科学基金资助项目基金(项目编号:60772101)的资助。作者简介:王瑞(1986—), 男, 山东莱芜人, 硕士, 主要从事视频压缩方面的研究. E-mai…

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

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

大学计算机应用基础考试题库,大学计算机应用基础考试题库

综合模拟(四)一、选择题。1、完整的计算机硬件系统一般包括外部设备和 C 。A、运算器的控制器 B、存储器 C、主机 D、中央处理器2、计算机能够自动工作,主要是因为采用了 D 。A、二进制数制 B、高速电子元件 C、存储程序控制 D、程序设计语言3、下面哪能一组是系统软…

Lombok 使用小结

Lombok 使用小结 Lombok 简介Lombok 安装Lombok 使用 API示例示例源码引用和引申Lombok 简介 Lombok 是一种 Java 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO)。它通过注释实现这一目的。通过…

html表单input file,input标签type=file的文件上传

一,通过表单提交的方式该提交方式只是提交普通表单;对于file组所选中的文件内容是不上传的,因此需要设置:enctype属性enctype"multipart/form-data"如果想上传多文件,可添加multiple二,通过Ajax异…

AVS游程解码、反扫描、反量化和反变换优化设计

中图分类号:TN919.81   文献标识码:A   文章编号:1009-2552 (2007) 02-0054-04AVS游程解码、反扫描、反量化和反变换优化设计赵 策, 刘佩林(上海交通大学电子工程系, 上海200240)摘 要: 提出了一种适用于AVS的游程解码、反扫描、反量化和反变换硬件结构优化设计方案。根据…

Django REST framework介绍

现在前后端分离的架构设计越来越流行,业界甚至出现了API优先的趋势。 显然API开发已经成为后端程序员的必备技能了,那作为Python程序员特别是把Django作为自己主要的开发框架的程序员,Django REST framework(DRF)这个…

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。 试验目的:掌握基…

正道的光用计算机,正道的光作文500字

当那熟悉的轰天巨雷般的呼噜声响起,我就知道,这又是睡不着的一天。同样在宿舍;同样是小翟;同样的时间;同样在我昏昏欲睡的时候,那个熟悉的呼噜声,它又来了。它将我从即将到来的美梦中惊醒了&…