网站建设前端开发中使用Div和Section有什么不同


来源:网站优化外包 作者:坪山网络公司 日期:2019-01-23 浏览:

几年前,当HTML5出现在现场时,它向语言中添加了一系列新的标签元素,SECTION元素。HTML5引入的大多数新元素都有明确的用途。例如,元素用于定义Web页面的文章和主要部分,元素用于定义对页面其余部分不重要的相关内容,而页眉、导航和页脚则非常易于解释。但是,新添加的Section元素很多人并不太清楚。许多人认为HTML元素部分和实际上是一样的-一般的容器元素用来包含网页上的内容。然而,现实情况是,这两个元素虽然都是容器元素,但绝不是通用的。使用Section元素和DIV元素都有特定的原因,本文将解释这些不同之处,接下来让我们一起学习下网站建设前端开发中使用Div和Section有什么不同。
Section和Div
Section元素被定义为Web页面或站点的语义部分,而不是另一种更具体的类型(如文章或旁白)。当我标记页面的一个不同的部分时,我倾向于使用这个元素-这个部分可以被大量地移动并在站点的其他页面或部分上使用。如果您愿意的话,它是一段不同的内容,或者是内容的“部分”。相反,将DIV元素用于要分割的页面部分,但用于语义以外的目的。如果我这样做纯粹是为了给自己一个与CSS一起使用的“钩子”,那么我会将一个内容区域包装在一个分区中。它可能不是基于语义的内容的不同部分,但是我为了实现我想要的页面布局而口述的内容。
一切都是语义的问题
这是一个很难理解的概念,但DIV元素和Section元素之间的***区别是语义。换句话说,这就是您要划分的代码部分的含义。
DIV元素中包含的任何内容都没有任何内在意义。它最适合用于以下情况:
  • CSS样式和CSS样式的挂钩
  • 布局容器
  • JavaScript挂钩
  • 对HTML进行划分,使其更易于阅读
DIV元素曾经是我们用来添加钩子来设置文档样式、创建列和花哨布局的***元素。正因为如此,我们最终得到的HTML中充满了DIV元素-这可以被Web设计人员称为“Divitis”。甚至还有所见即所得(WYSIWYG)编辑器专门使用DIV元素。我实际上遇到过使用DIV元素而不是段落的HTML!使用HTML5,我们可以开始使用剖分元素来创建语义更具描述性的文档(用于导航和描述性图形等),还可以定义这些元素的样式。
那跨度元素呢?
大多数人想到DIV元素时想到的另一个元素是元素。这个元素,像DIV一样,不是一个语义元素。它是一个内联元素,您可以使用它在内联内容块(通常是文本)周围添加样式和脚本的挂钩。从这个意义上讲,它就像DIV元素一样,只是内联而不是块元素。在某些方面,更容易将DIV视为块级SPAN元素,并以仅跨整个HTML内容块的方式使用它。
对于旧版本的Internet Explorer
即使您支持不能可靠识别HTML5的IE(如IE8及更低版本)的旧版本,您也不应害怕使用语义上正确的HTML标记。语义将帮助您和您的团队在将来管理页面(因为如果文章被文章元素包围,那么您将知道该部分就是文章)。此外,能够识别这些标签的浏览器将会更好地支持这些标签。您仍然可以在InternetExplorer中使用HTML5语义剖分元素,您只需添加脚本,可能还需要添加一些周围的DIV元素,以使它们能够将标记识别为HTML。
使用DIV和Section元素
如果使用正确,则可以在有效的HTML5文档中同时使用DIV和Section元素。正如您在本文中看到的,您可以使用Section元素定义内容的语义离散部分,并使用DIV元素作为CSS和JavaScript的挂钩,以及定义没有语义意义的布局。
深圳市圣玺网络技术有限公司提供坪山区域的营销网站建设、品牌网站设计、企业网站改版制作、网站优化外包、网络营销推广、百度霸屏、SEO按天按效果付费等互联网广告服务!
本文由网上采集发布,不代表本站立场,转载联系作者并注明出处:https://www.webgaiban.cn/wzyh/1742.html

X

截屏,微信识别二维码

微信号:15019448256

(点击微信号复制,添加好友)

  打开微信