作者:暗罗华怡 | 来源:互联网 | 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社区 其它相关文章!
推荐阅读
-
QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ...
[详细]
蜡笔小新 2024-12-28 12:33:18
-
本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ...
[详细]
蜡笔小新 2024-12-28 12:07:46
-
-
本文介绍了 Python 3.4 版本引入的标准库 asyncio,该库为异步 IO 提供了强大的支持。我们将探讨为什么需要 asyncio,以及它如何简化并发编程的复杂性,并详细介绍其核心概念和使用方法。 ...
[详细]
蜡笔小新 2024-12-28 11:52:00
-
本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ...
[详细]
蜡笔小新 2024-12-28 09:10:26
-
在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ...
[详细]
蜡笔小新 2024-12-28 08:20:07
-
本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ...
[详细]
蜡笔小新 2024-12-28 02:40:28
-
本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案,涵盖从备份、模拟故障到恢复的具体步骤。 ...
[详细]
蜡笔小新 2024-12-27 20:40:29
-
本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ...
[详细]
蜡笔小新 2024-12-27 19:44:14
-
1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ...
[详细]
蜡笔小新 2024-12-27 19:32:17
-
本文详细探讨了Netty中Future及其子类的设计与实现,包括其在并发编程中的作用和具体应用场景。我们将介绍Future的继承体系、关键方法的实现细节,并讨论如何通过监听器和回调机制来处理异步任务的结果。 ...
[详细]
蜡笔小新 2024-12-26 20:12:47
-
本文介绍如何在 Unity 的 XML 配置文件中,将参数传递给自定义生命周期管理器的构造函数。我们将详细探讨 CustomLifetimeManager 类的实现及其配置方法。 ...
[详细]
蜡笔小新 2024-12-26 17:21:54
-
本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ...
[详细]
蜡笔小新 2024-12-26 13:12:48
-
实体映射最强工具类:MapStruct真香 ...
[详细]
蜡笔小新 2024-12-25 16:22:17
-
本文探讨了在Linux系统上使用Docker时,通过volume将主机上的HTML5文件挂载到容器内部指定目录时遇到的403错误,并提供了解决方案和详细的操作步骤。 ...
[详细]
蜡笔小新 2024-12-25 14:54:50
-
探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ...
[详细]
蜡笔小新 2024-12-25 13:38:29
-