您現在的位置是:電腦技術吧?>? 組裝維修 ??>??div和section,section和div區別??>??正文詳情

div和section,section和div區別

粟惠心2019-11-30 16:21:58 人圍觀
簡介用section導入表格當我第一次接觸HTML5時,我對它的標簽不太適應,甚至一度有點反感。尤其是對于div、section和article的標簽,它們應該在哪里使用還不清楚。divHdiv居中

剛剛開始接觸 HTML5 時,對它的標簽很不適應,甚至一度有點反感。

尤其是對 div、section、article 這幾個標簽,實在弄不清楚應該使用在什么場合下。

divHTML Spec:The div element has no special meaning at all. 這個標簽是我們見得最多、用得最多的一個標簽。

本身沒有任何語義,用作布局以及樣式化或腳本的鉤子(hook)。

sectionHTML 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 sites 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 elements contents would be listed explicitly in the documents outline.section 不僅僅是一個普通的容器標簽。

當一個標簽只是為了樣式化或者方便腳本使用時,應該使用 div 。

一般來說,當元素內容明確地出現在文檔大綱中時,section 就是適用的。

XML/HTML Code復制內容到剪貼板

    article hgroup h1Apples/h1 h2Tasty, delicious fruit!/h2 /hgroup pThe apple is the pomaceous fruit of the apple tree./p section h1Red Delicious/h1 pThese bright red apples are the most common found in many supermarkets./p /section section h1Granny Smith/h1 pThese juicy, green apples make a great filling for apple pies./p /section /article
articleHTML 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 中是不是完整的。

看這段內容脫離了所在的語境,是否還是完整的、獨立的。

例子:XML/HTML Code復制內容到剪貼板

    article header h1The Very First Rule of Life/h1 ptime pubdate datetime=2009-10-09T14:28-08:00/time/p /header pIf 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=1Show comments.../a /footer /article article header h1The Very First Rule of Life/h1 ptime pubdate datetime=2009-10-09T14:28-08:00/time/p /header pIf 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 h1Comments/h1 article footer pPosted by: George Washington/p ptime pubdate datetime=2009-10-10T19:10-08:00/time/p /footer pYeah! Especially when talking about your lobbyist friends!/p /article article footer pPosted by: George Hammond/p ptime pubdate datetime=2009-10-10T19:15-08:00/time/p /footer pHey, you have the same first name as me./p /article /section /article
總結 div section article ,語義是從無到有,逐漸增強的。

div 無任何語義,僅僅用作樣式化或者腳本化的鉤子(hook),對于一段主題性的內容,則就適用 section,而假如這段內容可以脫離上下文,作為完整的獨立存在的一段內容,則就適用 article。

原則上來說,能使用 article 的時候,也是可以使用 section 的,但是實際上,假如使用 article 更合適,那么就不要使用 section 。

nav 和 aside 的使用也是如此,這兩個標簽也是特殊的 section,在使用 nav 和 aside 更合適的情況下,也不要使用 section 了。

對于 div 和 section、 article 以及其他標簽的區分比較簡單。

對于 section 和 article 的區分乍看比較難,其實重點就是看看這段內容脫離了整體是不是還能作為一個完整的、獨立的內容而存在,這里面的重點又在完整身上。

因為其實說起來 section 包含的內容也能算作獨立的一塊,但是它只能算是組成整體的一部分,article 才是一個完整的整體。

因為其實有些時候每個人都有自己的看法,所以難免有難于決斷的時候,怎么辦?

在 HTML5 設計原理 中,有一條是專門用來解決類似情況的: 最終用戶優先(Priority of Constituencies) In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. 一旦遇到沖突,最終用戶優先,其次是作者,其次是實現者,其次標準制定者,最后才是理論上的完滿。

推薦各位多讀幾遍 HTML5 設計原理,這才是紛繁世界背后的最終奧義。

版權聲明:本文由 粟惠心 整理編輯。

原標題:sectionhtml5居中,css section

轉載注明出處:http://www.dn9ww09s.icu/assemble/14953.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 被拋棄了,被拋棄的我

    被拋棄了,被拋棄的我 相關圖片被拋棄的痛苦不斷尋找新的替代技術,H5即將被拋棄?昨天,社交達人分享了一段“當H5警報響起時,我該怎么辦?”這似乎是H5危機的警報。W公司創始人李3水先生表示,W不會正式做感...

  • 有哪些表現手法,表現手法

    有哪些表現手法,表現手法 相關圖片表現手法和描寫手法亞非:近半年來,我一直負責霹靂戰機和天天庫寶項目,主要集中在品牌建設和創意營銷方面。我嘗試過手繪的形式,這次我會和大家分享我的設計經驗。雷霆鋒T...

  • 刷屏,怎樣刷屏

    刷屏,怎樣刷屏 相關圖片朋友圈刷屏一、三情(親情、愛情、友情)壽草先生的情書掃描二維碼查看詳情!在這部H5中,壽操并沒有選擇呈現太多的互動技巧,而是用大段的文案和黑白影像悄悄地告訴你一個男人...

  • 排行榜,TOP

    排行榜,TOP 相關圖片國內汽車品牌排行榜目前市場上有大量的HTML 5頁面模板制作工具,但對于很多非專業的設計師來說,制作html5頁面是非常方便的。但我不得不承認,大部分作品在模板工具平臺上依然停留...

  • 廣告H5,沒有廣告的h5

    廣告H5,沒有廣告的h5 相關圖片h5創意廣告你是否突然對市場上的H5麻木了,情況一樣,內容缺乏新意?你想做,但做不好。你不知道如何判斷工作的質量?我們在這個只有一年多的行業里遇到了什么困難?我們怎么對...

  • 決戰江湖各門派玩法,神武3門派玩法

    決戰江湖各門派玩法,神武3門派玩法 相關圖片神武3門派技能詳解作為近一年來最受歡迎的炸雞品種,H5經過一年的摸爬滾打(SE)體驗,不僅沒有氣喘吁吁,而且有許多新動作,在空中打出了新的高度。頂君一路追蹤,帶出兩個最酷...

  • 短暫的分開是為了更長久的,短暫的快樂長久的悲傷

    短暫的分開是為了更長久的,短暫的快樂長久的悲傷 相關圖片美好的時間總是短暫的中秋節快到了。你是高興回家過節,還是被迫在公司加班?作為廣告商,中秋節不僅是我們眼中的月餅,更是數不清的短暫卻不慌張!我聽說看了這組案子后,你...

  • 廣告H5,沒有廣告的h5

    廣告H5,沒有廣告的h5 相關圖片h5創意廣告以前,我做過很多關于H5的分享,但是它的定義和深度都很廣。從這個系列開始,我想從H5的定義開始,總結一下我所知道的關于H5的所有內容和設計方法!這是一件有意義的...

  • 標簽style,標簽內的style

    標簽style,標簽內的style 相關圖片style屬性值HTML樣式標記樣式標記—在文檔中聲明樣式時,標記樣式標記成對使用,以結束包含內容的屬性media--media type,type--type,通常使用typstyle...

  • 存儲原理,存儲雙活詳解原理

    存儲原理,存儲雙活詳解原理 相關圖片3par存儲雙活解決方案說到web開發中的本地存儲,首先要考慮的是cookies。當然,第一批餅干都是已知的。主要的問題是它們太小了,大約4KB。而且,IE6每個域名只支持20個coo存儲框架...

熱評文章

  • storage,Localstorage

    storage,Localstorage 相關圖片讀取localstorage本文主要介紹在HTML5中使用本地存儲的教程。本地存儲用于瀏覽器和系統之間交互的本地傳出。您可以參考幾天前的本地存儲,發現在舊項目中操作cookie很奇怪。咨詢local...

  • h5有什么用,h5怎么用

    h5有什么用,h5怎么用 相關圖片h5是用來做什么的最近發現好多人喜歡將 HTML5 說成 h5,甚至是代指移動端的 Web Page 或者 WebApp。雖然說起來朗朗上口,但是小編真的不建議這樣來使用。  小h5用什么框架好...

  • 水晶櫻桃,水晶櫻桃簡介

    水晶櫻桃,水晶櫻桃簡介 相關圖片水晶櫻桃和黃蜜櫻桃很多朋友都討論過如何用煙花制作水晶櫻桃。本文教程將以圖片的形式解釋水晶櫻桃的制作,這將更清楚地傳達給每個學習者。以下是煙花制作水晶櫻桃的具體操作...

  • 最近新出平臺項目,新出投資項目大全

    最近新出平臺項目,新出投資項目大全 相關圖片項目拼出新速度12年前,無論布局多么復雜,擺在我們神奇的餐桌前都不是問題。十年前,Agie的網站重建為我們開啟了新的篇章。八年前,我們研究了雅虎網站,對它在IE5下的完美表現...

  • 文字環繞,文字環繞方式在哪

    文字環繞,文字環繞方式在哪 相關圖片如何設置文字環繞圖片有時我們可能需要做一些循環文字包裝。事實上,這種文本實際上是一種文本包裝路徑效果,但僅僅使用attach to path函數是無法實現的。仔細看一下:路徑周圍文四...

  • 組合路徑,路徑組合的步驟

    組合路徑,路徑組合的步驟 相關圖片怎么合并路徑焰火的一個特點是直接繪制矢量路徑。除了使用矢量工具(筆、矩形等幾何圖形)直接繪制矢量路徑外,還可以適當地使用組合路徑函數,使路徑的操作更加高效、省力。...

  • 生活中還有哪些是指南針,生活中什么可以做指南針

    生活中還有哪些是指南針,生活中什么可以做指南針 相關圖片指南針在生活中的應用有哪些本文介紹了在焰火中如何畫指南針。主要包括五個部分。首先用橢圓工具設置畫布大小,然后填充顏色,最后繪制圖案。下面是如何在焰火中繪制指南針:...

  • 創建紋理是什么意思,怎么做紋理

    創建紋理是什么意思,怎么做紋理 相關圖片從文件創建立方體紋理我們將在焰火中創建一個新文件,鍵入它,并選擇一個更大的字體大小以使其更有效。因為文本是白色的,所以我們將背景顏色設置為黃色以進行區分。文本也可...

  • 邊緣行為,如何邊緣控制

    邊緣行為,如何邊緣控制 相關圖片邊緣控制什么意思呀如何在沒有特殊濾鏡的情況下制作藝術照片或相框?讓我們來介紹一下如何處理焰火圖像邊緣的具體方法,并歡迎所有感興趣的同事學習。有很多方法可以做到這一...

  • 野棋子,自走棋前期強的棋子

    野棋子,自走棋前期強的棋子 相關圖片云頂之奕棋子攻擊距離焰火有多種圖案。如果能充分突出其圖案的紋理特征,就可以很容易地畫出各種圖形的逼真效果。接下來,我們將使用木紋3的陰影繪制一個逼真的棋子。開始焰火...

關注微信

变脸官网查询