欢迎光临杨雨的葡京赌场站!

杨雨个人网站-杨雨葡京赌场-杨照佳

杨雨葡京赌场网站

关注互联网和搜索引擎的葡京赌场网站

首页 > WEB开发 > html5案例分享 >

HTML5 中 div section article 的区别

发布时间:2015-07-28  编辑:杨雨葡京赌场网站   点击:   

方才开始打仗 HTML5 时,对它的标签很不顺应,乃至一度有点反感。尤其是对 div、section、article 这几个标签,其实弄不清晰应该行使在什么场所下。

div

HTML Spec:

The div element has no special meaning at all.

这个标签是我们见得最多、用得最多的一个标签。自己没有任何语义,用作机关以及样式化或剧本的钩子(hook)。

section

HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”

与 div 的无语义相对,简朴地说 section 就是带有语义的 div 了,可是万万不要认为真得这么简朴。section 暗示一段专题性的内容,一样平常会带有问题。看到这里,我们大概会想到,那么一篇博客文章,可能一条单独的评述岂不是正好可以用 section 吗?接着看:

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.

当元素内容聚合起来越讲话之有物时,应该行使 article 来替代 section 。

那么,section 应该什么时辰用呢?再接着看:

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

section 应用的典范场景有文章的章节、标签对话框中的标签页、可能论文中有编号的部门。一个网站的主页可以分成简介、消息和接洽信息等几部门。着实我对这里通报信息很感乐趣,由于感受 section 和下面要先容的 artilce 越发合用于模块化应用,这个话题往后会出篇专门的文章来接头,这里暂且略过。

要留意,W3C 还告诫说:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”

section 不只仅是一个平凡的容器标签。当一个标签只是为了样式化可能利便剧本行使时,应该行使 div 。一样平常来说,当元素内容明晰地呈此刻文档纲要中时,section 就是合用的。

<article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article> article

HTML Spec:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

article 是一个非凡的 section 标签,它比 section 具有更明晰的语义, 它代表一个独立的、完备的相干内容块。一样平常来说, article 会有问题部门(凡是包括在 header 内),偶然也会 包括 footer 。固然 section 也是带有主题性的一块内容,可是无论从布局上照旧内容上来说,article 自己就是独立的、完备的。

HTML Spec 中接着又罗列了一些 article 合用的场景。

This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相干的。譬喻,一篇博客文章中,包括用户提交的评述的 article 就应该叛逃在包括博客文章 article 之中。

题目是怎么才算“完备的独立内容”?有个最简朴的判定要领是看这段内容在 RSS feed 中是不是完备的。看这段内容离开了地址的语境,是否照旧完备的、独立的。

例子:

<article> <header> <h1>The Very First Rule of Life</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <footer> <a href="?comments=1">Show comments...</a> </footer> </article> <article> <header> <h1>The Very First Rule of Life</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: George Washington</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> <article> <footer> <p>Posted by: George Hammond</p> <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> </section> </article> 总结 本文地址:http://itbyc.com/web/html5/2649.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1