HTML中div、article、section标签区别与用法.pdfVIP

HTML中div、article、section标签区别与用法.pdf

  1. 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
  2. 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  3. 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  4. 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  5. 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  6. 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  7. 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多

div

◼HTMLSpec:“Thedivelementhasnospecialmeaningat

all.”

◼这个是我们见得最多、用得最多的一个。本身没有任何

语义,用作布局以及样式化或的钩子(hook)。

◼W3C——流式元素

section

◼HTMLSpec:“Thesectionelementrepresentsageneric

sectionofadocumentorapplication.Asection,inthis

context,isathematicgroupingofcontent,typicallywitha

heading.”

◼与div的无语义相对,简单地说section就是带有语义的div了,

但是千万不要觉得真得这么简单。section表示一段专题性的内

容,一般会带有标题。看到这里,我们也许会想到,那么一篇博

客文章,或者一条单独的评论岂不是正好可以用section吗?接

着看

section

◼section应用的典型场景有文章的章节、框中的页、

或者中有编号的部分。一个的主页可以分成简介、和

联系信息等几部分。

◼section不仅仅是一个普通的容器。当一个只是为了样

式化或者方便使用时,应该使用div。一般来说,当元素内

容明确地出现在文档大纲中时,section就是适用的。

◼注意:section内一定有heading

article

◼HTMLSpec:“Thearticleelementrepresentsaself-

containedcompositioninadocument,page,application,

orsiteandthatis,inprinciple,tlydistributable

orreusable,e.g.insyndication.

◼article是一个特殊的section,它比section具有更明确

的语义,它代表一个独立的、完整的相关内容块。一般来说,

article会有标题部分(通常包含在header内),有时也会包含

footer。虽然section也是带有性的一块内容,但是无论

从结构上还是内容上来说,article本身就是独立的、完整的。

article

◼当article内嵌article时,原则上来说,的article的内容

是和外层的article内容是相关的。例如,一篇博客文章中,包

含用户提交的评论的article就应该嵌套在包含博客文章article

之中。

总结

◼divsectionarticle,语义是从无到有,逐渐增强的。div无任何语义,仅仅

用作样式化,对于一段性的内容,则就适用section,而假如这段内容

可以脱离上下文,作为完整的独立存在的一段内容,则就适用article。原则

上来说,能使用article的时候,也是可以使用section的,但是实际上,

假如使用article更合适,那么就不要使用section。nav和aside的使用

也是如此,这两个也是特殊的section,在使用nav和aside更合适的

情况下,也不要使用section了。

◼对于div和section、article以及其他的区分比较简单。对于section

和article的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不

是还能完整的、独立的内容而存在,这里面的重点又在完整身上。

因为其实说起来section包含的内容也能算作独立的一块,但是它只能算是

组成整体的一部分,article才是一个完整的整体。

文档评论(0)

182****0328 + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档