作者:暗罗华怡 | 来源:互联网 | 2020-09-07 23:40
本篇文章主要的介绍了关于HTML5 section标签的定义以及它的用法,最后还有一个案例总结,现在让我们开始阅读这篇文章吧
先来解释下html5 section标签的意思:
html5 section标签定义了文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
看一个实例让你更加了解section标签:
文档中的区段,解释了 PRC:
PHP中文网
这里是PHP中文网,网址是www.php1.cn
实例效果如下图:
现在说说section标签的注意点:
section 不是一个专用来做容器的标签,如果仅仅是用于设置样式或脚本处理,专用的是 div
section 里应该有 标题(h1~6),但文章中推荐用 article 来代替
一条简单的准则是,只有元素内容会被列在文档大纲中时,才适合用section元素。
section的作用是对页面上的内容进行分块,如各个有标题的版块、功能区或对文章进行分段,不要与有自己完整、独立内容的article混淆。
html5 section标签的用法:
html5引入了标签,用于描述文档的结构,它同标签的意思一样。但是在特定环境中,两者又有明显的区别。
w3对
w3对
的定义是: 定义一个文档的章节。(但似乎更适合用于外层的布局,缺少语义性。)
现在来看一个案例:
在这里,我们用来定义id为content的div里面的两个章节/区域。当然此处你也可以直接把div用section代替,或者把里面的改成,因为此处还不能明显的区分两者的区别:
或者:
HTML5 section标签的总结:
我们用
标签来布局整个最外层的章,而用
用来定义内部的章节。当然如果把整个文档都看作是一个章节,那么也可以用来代替,但是建议不要使用
来代替该用布局的地方,那些地方不能体现出
的语义性。【小编推荐】
如何给html中的pre标签中的文字换行?html pre标签的使用实例
HTML iframe标签怎么使用?HTML iframe标签的使用实例介绍
以上就是html5 section标签是什么意思?html5 section标签的用法总结的详细内容,更多请关注 第一PHP社区 其它相关文章!
推荐阅读
-
本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ...
[详细]
蜡笔小新 2024-11-18 19:37:06
-
本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ...
[详细]
蜡笔小新 2024-11-22 05:45:48
-
-
本文介绍了如何通过安装 sqlacodegen 和 pymysql 来根据现有的 MySQL 数据库自动生成 ORM 的模型文件(model.py)。此方法适用于需要快速搭建项目模型层的情况。 ...
[详细]
蜡笔小新 2024-11-22 01:13:04
-
本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ...
[详细]
蜡笔小新 2024-11-21 20:16:59
-
本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ...
[详细]
蜡笔小新 2024-11-21 18:56:08
-
在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ...
[详细]
蜡笔小新 2024-11-21 18:32:57
-
本文详细介绍了如何在CSS中使用solid边框属性,包括其基本语法、应用场景及高级技巧,适合初学者和进阶用户参考。 ...
[详细]
蜡笔小新 2024-11-21 18:11:20
-
本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ...
[详细]
蜡笔小新 2024-11-21 17:42:08
-
本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ...
[详细]
蜡笔小新 2024-11-21 17:10:15
-
在日常生活中,支付宝已成为不可或缺的支付工具之一。本文将详细介绍如何通过支付宝实现免费提现,帮助用户更好地管理个人财务,避免不必要的手续费支出。 ...
[详细]
蜡笔小新 2024-11-21 16:47:52
-
本文详细介绍了在Windows系统中如何配置Nginx以实现高效的缓存加速功能,包括关键的配置文件设置和示例代码。 ...
[详细]
蜡笔小新 2024-11-21 16:19:57
-
本文将探讨如何在 Struts2 中使用 ActionContext 和 ServletActionContext 来获取请求参数和会话信息,同时解释它们的内部机制和最佳实践。 ...
[详细]
蜡笔小新 2024-11-18 15:28:59
-
线程中通信在裸机编程中,经常会使用全局变量进行功能间的通信,如某些功能可能由于一些操作而改变全局变量的值,另一个功能对此全局变量进行读取& ...
[详细]
蜡笔小新 2024-11-18 14:56:11
-
在完成DedeCMS专题页节点文章列表样式的修改后,如果需要在列表中显示自定义模型的字段,由于DedeCMS默认不支持这一功能,因此需要进行一些二次开发。本文将详细介绍如何通过修改模板文件和核心文件来实现这一需求。 ...
[详细]
蜡笔小新 2024-11-16 21:23:49
-
ABP框架是ASP.NET Boilerplate的简称,它不仅是一个开源且文档丰富的应用程序框架,还提供了一套基于领域驱动设计(DDD)的最佳实践架构模型。本文将详细介绍ABP框架的特点、项目结构及其在Web API优先架构中的应用。 ...
[详细]
蜡笔小新 2024-11-16 18:09:51
-