天津网站建设_天津建站_天津网页设计_天津做网站
新闻观点

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

发布日期:2020-04-06 17:52:48
标签: 网站建设公司   | 作者:小匠 | VISITORS: | 来源:匠人匠心科技
几年前,当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的挂钩,以及定义没有语义意义的布局。
 
以上内容由匠人匠心科技(http://www.ptfe-tapemachine.com)为您提供,转载请注明出处,更多有关天津网站建设软件开发网站代运营优化微信网站制作(微官网)、手机app开发企业UI设计等互联网应用服务都可以联系我们。热线:138-2142-0129或致电136-2215-0903张经理。
匠人匠心科技每天都会不定时更新有关天津网站制作以及网络营销推广的文章,希望对您有用。

相关新闻
1825629851
13821420129
匠人匠心科技是从事天津网站建设、天津网站制作、软件开发、移动建站、微信端、app项目等的开发公司
软件事业部:天津市大学软件学院D-510(天津工业大学院内)
网站事业部: 天津市河北区新大路通广科技园3-225
咨询热线:138-2142-0129 136-2215-0903
天津网站建设_天津建站

扫码添加

分享按钮