仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1028|回复: 8
打印 上一主题 下一主题

[HTML5] 来讲讲:HTML5标志div、section、article利用申明

[复制链接]
变相怪杰 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:13:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
有些差异相对轻微,有充分的理由将这两种HTML5规范草案合并为一,让浏览器制造商与网络开发者不必面对不兼容的窘境。破洛洛文章简介:HTML5中divsectionarticle的区分.
方才入手下手打仗HTML5时,对它的标签很不顺应,乃至一度有点恶感。特别是对div、section、article这几个标签,其实弄不分明应当利用在甚么场所下。

div

HTMLSpec:“Thedivelementhasnospecialmeaningatall.”
这个标签是我们见得最多、用得最多的一个标签。自己没有任何语义,用作结构和款式化或剧本的钩子(hook)。
section

HTMLSpec:“Thesectionelementrepresentsagenericsectionofadocumentorapplication.Asection,inthiscontext,isathematicgroupingofcontent,typicallywithaheading.”
与div的无语义绝对,复杂地说section就是带有语义的div了,可是万万不要以为真得这么复杂。section暗示一段专题性的内容,一样平常会带有题目。看到这里,我们大概会想到,那末一篇博客文章,大概一条独自的批评岂不是恰好能够用section吗?接着看:
“Authorsareencouragedtousethearticleelementinsteadofthesectionelementwhenitwouldmakesensetosyndicatethecontentsoftheelemen.”
当元素内容聚合起来加倍言之无物时,应当利用article来交换section。
那末,section应当甚么时分用呢?再接着看:
“Examplesofsectionswouldbechapters,thevarioustabbedpagesinatabbeddialogbox,orthenumberedsectionsofathesis.AWebsite’shomepagecouldbesplitintosectionsforanintroduction,newsitems,andcontactinformation.”
section使用的典范场景有文章的章节、标签对话框中的标签页、大概论文中有编号的部分。一个网站的主页能够分红简介、旧事和接洽信息等几部分。实在我对这里转达信息很感乐趣,由于感到section和上面要先容的artilce加倍合用于模块化使用,这个话题今后会出篇专门的文章来会商,这里临时略过。
要注重,W3C还告诫说:
“Thesectionelementisnotagenericcontainerelement.Whenanelementisneededforstylingpurposesorasaconvenienceforscripting,authorsareencouragedtousethedivelementinstead.Ageneralruleisthatthesectionelementisappropriateonlyiftheelement’scontentswouldbelistedexplicitlyinthedocument’soutline.”
section不单单是一个一般的容器标签。当一个标签只是为了款式化大概便利剧本利用时,应当利用div。一样平常来讲,当元素内容明白地呈现在文档纲目中时,section就是合用的。
  1. <article><hgroup><h1>Apples</h1><h2>Tasty,deliciousfruit!</h2></hgroup><p>Theappleisthepomaceousfruitoftheappletree.</p><section><h1>RedDelicious</h1><p>Thesebrightredapplesarethemostcommonfoundinmanysupermarkets.</p></section><section><h1>GrannySmith</h1><p>Thesejuicy,greenapplesmakeagreatfillingforapplepies.</p></section></article>
复制代码
article

HTMLSpec:“Thearticleelementrepresentsaself-containedcompositioninadocument,page,application,orsiteandthatis,inprinciple,independentlydistributableorreusable,e.g.insyndication.”
article是一个特别的section标签,它比section具有更明白的语义,它代表一个自力的、完全的相干内容块。一样平常来讲,article会有题目部分(一般包括在header内),偶然也会包括footer。固然section也是带有主题性的一块内容,可是不管从布局上仍是内容下去说,article自己就是自力的、完全的。
HTMLSpec中接着又枚举了一些article合用的场景。“Thiscouldbeaforumpost,amagazineornewspaperarticle,ablogentry,auser-submittedcomment,aninteractivewidgetorgadget,oranyotherindependentitemofcontent.”
当article内嵌article时,准绳下去说,外部的article的内容是和外层的article内容是相干的。比方,一篇博客文章中,包括用户提交的批评的article就应当叛逃在包括博客文章article当中。
成绩是怎样才算“完全的自力内容”?有个最复杂的判别办法是看这段内容在RSSfeed中是否是完全的。看这段内容离开了地点的语境,是不是仍是完全的、自力的。
例子:
  1. <article><header><h1>TheVeryFirstRuleofLife</h1><p><timepubdatedatetime="2009-10-09T14:28-08:00"></time></p></header><p>Iftheresamicrophoneanywherenearyou,assumeitshotandsendingwhateveryouresayingtotheworld.Seriously.</p><p>...</p><footer><ahref="?comments=1">Showcomments...</a></footer></article>
复制代码
  1. <article><header><h1>TheVeryFirstRuleofLife</h1><p><timepubdatedatetime="2009-10-09T14:28-08:00"></time></p></header><p>Iftheresamicrophoneanywherenearyou,assumeitshotandsendingwhateveryouresayingtotheworld.Seriously.</p><p>...</p><section><h1>Comments</h1><article><footer><p>Postedby:GeorgeWashington</p><p><timepubdatedatetime="2009-10-10T19:10-08:00"></time></p></footer><p>Yeah!Especiallywhentalkingaboutyourlobbyistfriends!</p></article><article><footer><p>Postedby:GeorgeHammond</p><p><timepubdatedatetime="2009-10-10T19:15-08:00"></time></p></footer><p>Hey,youhavethesamefirstnameasme.</p></article></section></article>
复制代码
总结

divsectionarticle,语义是从无到有,渐渐加强的。div无任何语义,仅仅用作款式化大概剧本化的钩子(hook),关于一段主题性的内容,则就合用section,而假设这段内容能够离开高低文,作为完全的自力存在的一段内容,则就合用article。准绳下去说,能利用article的时分,也是可使用section的,可是实践上,假设利用article更符合,那末就不要利用section。nav和aside的利用也是云云,这两个标签也是特别的section,在利用nav和aside更符合的情形下,也不要利用section了。
关于div和section、article和其他标签的辨别对照复杂。关于section和article的辨别乍看对照难,实在重点就是看看这段内容离开了全体是否是还能作为一个完全的、自力的内容而存在,这内里的重点又在完全身上。由于实在提及来section包括的内容也能算作自力的一块,可是它只能算是构成全体的一部分,article才是一个完全的全体。
由于实在有些时分每一个人都有本人的意见,以是不免有难于定夺的时分,怎样办?
在HTML5计划道理中,有一条是专门用来办理相似情形的:
终极用户优先(PriorityofConstituencies)
“Incaseofconflict,considerusersoverauthorsoverimplementorsoverspecifiersovertheoreticalpurity.”一旦碰到抵触,终极用户优先,其次是作者,其次是完成者,其次尺度制订者,最初才是实际上的完美。
保举列位多读几遍HTML5计划道理,这才是纷纷天下面前的终极奥义。
</p>
历经多年来的停滞不前,如今全球信息网联盟(WorldWideWebConsortium,W3C)重拾HTML标准化。
因胸联盟 该用户已被删除
沙发
发表于 2015-1-17 20:49:30 来自手机 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
再见西城 该用户已被删除
板凳
发表于 2015-1-24 14:15:18 来自手机 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
小女巫 该用户已被删除
地板
发表于 2015-2-1 17:10:52 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
冷月葬花魂 该用户已被删除
5#
发表于 2015-2-7 13:20:22 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
海妖 该用户已被删除
6#
发表于 2015-2-22 11:41:42 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
admin 该用户已被删除
7#
发表于 2015-3-7 02:05:01 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
小妖女 该用户已被删除
8#
发表于 2015-3-14 10:31:41 | 只看该作者
可以使用 CSS 检查工具进行设计。
9#
发表于 2015-3-21 05:13:05 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 03:56

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表