作者: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社区 其它相关文章!
推荐阅读
-
本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图,并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ...
[详细]
蜡笔小新 2024-11-18 19:37:06
-
探讨在已有Compose和Swarm的情况下,Kubernetes是如何以其独特的设计理念和技术优势脱颖而出,成为容器编排领域的领航者。 ...
[详细]
蜡笔小新 2024-11-22 09:26:11
-
-
题目描述:假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ...
[详细]
蜡笔小新 2024-11-22 11:33:55
-
计划建立个人博客来分享生活与工作的见解和经验,选择WordPress是因为它专为博客设计,功能强大且易于使用。 ...
[详细]
蜡笔小新 2024-11-22 11:13:36
-
随着市场环境的变化加速,全球企业都在探索更为敏捷的应用开发模式,以便快速响应新兴的商业机遇。然而,传统的软件开发方式不仅成本高昂,而且耗时较长,这往往导致IT与业务部门之间的合作障碍,进而影响项目的成功。本文将探讨如何通过无代码开发平台解决这些问题。 ...
[详细]
蜡笔小新 2024-11-22 11:09:21
-
本文介绍了如何通过安装 sqlacodegen 和 pymysql 来根据现有的 MySQL 数据库自动生成 ORM 的模型文件(model.py)。此方法适用于需要快速搭建项目模型层的情况。 ...
[详细]
蜡笔小新 2024-11-22 01:13:04
-
本文介绍了如何利用jQuery实现对网页上多个div元素的显示与隐藏控制,包括基本的toggle方法及更复杂的显示隐藏逻辑。 ...
[详细]
蜡笔小新 2024-11-21 19:38:53
-
本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ...
[详细]
蜡笔小新 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
-
阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ...
[详细]
蜡笔小新 2024-11-20 20:05:37
-
随着技术的不断进步,2017年对软件开发人员而言将充满挑战与机遇。本文探讨了开发人员需要适应的七个关键变化,包括人工智能、聊天机器人、容器技术、应用程序版本控制、云测试环境、大众开发者崛起以及系统管理的云迁移。 ...
[详细]
蜡笔小新 2024-11-19 20:17:20
-
本文将探讨如何在 Struts2 中使用 ActionContext 和 ServletActionContext 来获取请求参数和会话信息,同时解释它们的内部机制和最佳实践。 ...
[详细]
蜡笔小新 2024-11-18 15:28:59
-
线程中通信在裸机编程中,经常会使用全局变量进行功能间的通信,如某些功能可能由于一些操作而改变全局变量的值,另一个功能对此全局变量进行读取& ...
[详细]
蜡笔小新 2024-11-18 14:56:11
-
mobiledu2502881283
这个家伙很懒,什么也没留下!