作者:mobiledu2502881283 | 来源:互联网 | 2020-09-08 00:10
本篇文章主要的想大家介绍了关于HTML5section标签和div标签的区别,section和div的用法看似相近,实则差的也不是太多,有些地方可以相互转换都行,但有些地方只能用section或者只能用div,不能转换的,好了,接下来就让我们一起看文章吧
本篇文章主要的想大家介绍了关于HTML5 section标签和div标签的区别,section和div的用法看似相近,实则差的也不是太多,有些地方可以相互转换都行,但有些地方只能用section或者只能用div,不能转换的,好了,接下来就让我们一起看文章吧
先看看section标签的HTML标准中写的:
每个section对应不同的主题。注意是内容本身的主题,而不是其他人为设定的划分标准。
section的例子包括书的章节回目、多tab对话框的每个tab页、论文以数字编号的小节。网站的主页可能分成介绍、最新内容、联系信息等section。
注意:网页作者应使用article而不是section元素,如果其内容是用于聚合(syndicate)。比如blog首页上的每篇blog。又如论坛帖子的一楼、二楼、三楼……n楼。通常这样的每部分内容形式上是类似的,但是来源是独立的。
注意:section不是通用容器元素。如果仅仅是用于设置样式或脚本处理,应用div元素。一条简单的准则是,只有元素内容会被列在文档大纲中时,才适合用section元素。
接下来说说html5 section标签和div标签的区别:
1.section不是一个专用来做容器的标签,专用的是div
section里应该有标题(h1~6),但文章中推荐用article来代替
我们可以理解为一个非文章段落,有明确 id 的一个特殊模块容器(不是专用以包住块的容器)。
也就是说,一般情况下作为元素容器,使用div而不是section,那么section就没有用了吗?图样图森破。
这种情况下使用section就比div要好
section,顾名思义就是一个章节,比如:
PHP中文网
欢迎来到PHP中文网,这里的网址是www.php1.cn
至于为什么要用,是为了语义化,有section、article、dl看这多舒服,人也好理解,计算机也好理解,比满眼的div好多了。
2.人们在标签使用中最常见到的错误之一就是随意将HTML5的等价于——具体地说,就是直接用作替代品(用于样式)。
并不是样式容器。section元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。如果你想找一个用作页面容器的元素(就像HTML或者XHTML的风格),那么考虑如Kroc Camen所说,直接把样式写到body元素上吧。如果你仍然需要额外的样式容器,还是继续使用div吧。
div是通用的,所有浏览器都支持,section是H5语义化的标签,和
可以理解成一个意思,只不过前者是H5的写法
关于html5中的section标签与div标签的总结:
DIV:这个标签一直是我们见得最多、用得最多的标签。它本身无任何语义,用作布局以及样式化标签。
Section:与div相似,但它有更进一步的语义。section用作一段有专题性的内容,一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
【小编推荐】
如何给html中的pre标签中的文字换行?html pre标签的使用实例
HTML ul标签的什么意思?HTML ul标签的作用详解
以上就是关于html5中的section标签与div标签的区别(内有实例)的详细内容,更多请关注 第一PHP社区 其它相关文章!
推荐阅读
-
本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ...
[详细]
蜡笔小新 2024-12-28 12:07:46
-
2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ...
[详细]
蜡笔小新 2024-12-28 11:58:48
-
-
尽管商业智能(BI)工具在中国的普及程度尚不及国际市场,但近年来,随着本土企业的持续创新和市场推广,国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争,国内BI工具通过不断优化产品和技术,赢得了越来越多用户的认可。 ...
[详细]
蜡笔小新 2024-12-28 11:12:44
-
1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ...
[详细]
蜡笔小新 2024-12-27 19:32:17
-
本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ...
[详细]
蜡笔小新 2024-12-27 19:05:41
-
本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ...
[详细]
蜡笔小新 2024-12-27 18:20:43
-
本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ...
[详细]
蜡笔小新 2024-12-27 17:52:34
-
本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ...
[详细]
蜡笔小新 2024-12-27 17:31:41
-
本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ...
[详细]
蜡笔小新 2024-12-27 15:01:09
-
本文详细探讨了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
-
mobiledu2502881283
这个家伙很懒,什么也没留下!