详解HTML5中div和section和article的差别

日期:2021-02-24 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

不久刚开始触碰 HTML5 时,对它的标识很不融入,乃至1度有点抵触。特别是对 div、section、article 这几个标识,确实弄不清晰应当应用在甚么场所下。
div

HTML Spec:

    The div element has no special meaning at all.

这个标识是大家见得数最多、用得数最多的1个标识。自身沒有任何词义,用作合理布局和款式化或脚本制作的钩子(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 表明1段专题性的內容,1般会带有题目。看到这里,大家或许会想起,那末1篇blog文章内容,或1条独立的评价岂并不是恰好能够用 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 运用的典型情景有文章内容的章节、标识会话框中的标识页、或毕业论文中有序号的一部分。1个网站的首页能够分为简介、新闻和联络信息内容等几一部分。实际上我对这里传递信息内容很感兴趣爱好,由于觉得 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 不仅是1个一般的器皿标识。当1个标识只是以便款式化或便捷脚本制作应用时,应当应用 div 。1般来讲,当元素內容确立地出現在文本文档考试大纲中时,section 便是可用的。

XML/HTML Code拷贝內容到剪贴板
  1. <article>     
  2.     <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup>  
  3.     <p>The apple is the pomaceous fruit of the apple tree.</p>    
  4.     <section>    
  5.         <h1>Red Delicious</h1>    
  6.         <p>These bright red apples are the most common found in many supermarkets.</p>    
  7.     </section>    
  8.     <section>    
  9.         <h1>Granny Smith</h1>  
  10.         <p>These juicy, green apples make a great filling for apple pies.</p>    
  11.     </section>    
  12. </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 是1个独特的 section 标识,它比 section 具备更确立的词义, 它意味着1个单独的、详细的有关內容块。1般来讲, article 会有题目一部分(一般包括在 header 内),有时也会 包括 footer 。尽管 section 也是带有主题性的1块內容,可是不管从构造上還是內容上来讲,article 自身便是单独的、详细的。

HTML Spec 中接着又例举了1些 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 內容是有关的。比如,1篇blog文章内容中,包括客户递交的评价的 article 就应当外逃在包括blog文章内容 article 当中。

难题是如何才算“详细的单独內容”?有个最简易的分辨方式是看这段內容在 RSS feed 中是否详细的。看这段內容摆脱了所属的语境,是不是還是详细的、单独的。

事例:

XML/HTML Code拷贝內容到剪贴板
  1. <article>     
  2.     <header>    
  3.         <h1>The Very First Rule of Life</h1>    
  4.         <p><time pubdate datetime="2009⑴0-09T14:28-08:00"></time></p>  
  5.     </header>    
  6.     <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>    
  7.     <p>...</p>    
  8.     <footer>  
  9.         <a href="?comments=1">Show comments...</a>  
  10.     </footer>    
  11. </article>  
  12.   
  13. <article>     
  14.     <header>    
  15.         <h1>The Very First Rule of Life</h1>  
  16.         <p><time pubdate datetime="2009⑴0-09T14:28-08:00"></time></p>    
  17.     </header>  
  18.     <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>    
  19.     <p>...</p>    
  20.     <section>  
  21.         <h1>Comments</h1>    
  22.         <article>  
  23.             <footer>  
  24.                 <p>Posted by: George Washington</p>  
  25.                 <p><time pubdate datetime="2009⑴0⑴0T19:10-08:00"></time></p>    
  26.             </footer>  
  27.             <p>Yeah! Especially when talking about your lobbyist friends!</p>    
  28.         </article>    
  29.           <article>  
  30.             <footer>    
  31.                 <p>Posted by: George Hammond</p>  
  32.                 <p><time pubdate datetime="2009⑴0⑴0T19:15-08:00"></time></p>  
  33.             </footer>  
  34.             <p>Hey, you have the same first name as me.</p>  
  35.         </article>    
  36.     </section>    
  37. </article>    

总结

div section article ,词义是从无到有,慢慢提高的。div 无任何词义,仅仅用作款式化或脚本制作化的钩子(hook),针对1段主题性的內容,则就可用 section,而倘若这段內容能够摆脱左右文,做为详细的单独存在的1段內容,则就可用 article。标准上来讲,能应用 article 的情况下,也是可使用 section 的,可是具体上,倘若应用 article 更适合,那末就不必应用 section 。nav 和 aside 的应用也是这般,这两个标识也是独特的 section,在应用 nav 和 aside 更适合的状况下,也不必应用 section 了。

针对 div 和 section、 article 和别的标识的区别较为简易。针对 section 和 article 的区别乍看较为难,实际上关键便是看看这段內容摆脱了总体是否还能做为1个详细的、单独的內容而存在,这里边的关键又在详细身上。由于实际上说起来 section 包括的內容也能算作单独的1块,可是它只能算是构成总体的1一部分,article 才是1个详细的总体。

由于实际上一些情况下每一个人都有自身的观点,因此免不了有难于选择的情况下,如何办?

在 HTML5 设计方案基本原理 中,有1条是专业用来处理相近状况的:

最后客户优先选择(Priority of Constituencies)

“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.” 1旦遇到矛盾,最后客户优先选择,其次是作者,其次是完成者,其次规范制订者,最终才是基础理论上的圆满。

强烈推荐各位多读几遍 HTML5 设计方案基本原理,这才是繁杂全球身后的最后奥义。

上一篇:浅析border 返回下一篇:没有了