html5 語義化標(biāo)簽

1、html5 語義化標(biāo)簽博客分類： · JavaScript· 瀏覽器 轉(zhuǎn)載HTML 5的革新之一：語義化標(biāo)簽一節(jié)元素標(biāo)簽。在HTML 5出來之前，我們用div來表示頁面章節(jié)，但是這些div都沒有實(shí)際意義。（即使我們用css樣式的id和class形容這塊內(nèi)容的意義）。這些標(biāo)簽只是我們提供給瀏覽器的指令，只是定義一個網(wǎng)頁的某些部分。但現(xiàn)在，那些之前沒“意義”的標(biāo)簽因為因為html5的出現(xiàn)消失了，這就是我們平時說的“語義”?？聪聢D沒有用div標(biāo)簽來布局  html5的布局嗯，如上圖那個頁面結(jié)構(gòu)沒有一個div，都是采用html5語義標(biāo)簽（用哪

2、些標(biāo)簽，關(guān)鍵取決于你的設(shè)計目標(biāo)）。但是也不要因為html5新標(biāo)簽的出現(xiàn)，而隨意用之，錯誤的使用肯定會事與愿違。所以有些地方還是要用div的，就是因為div沒有任何意義的元素，他只是一個標(biāo)簽，僅僅是用來構(gòu)建外觀和結(jié)構(gòu)。因此是最適合做容器的標(biāo)簽。W3C定義了這些語義標(biāo)簽，不可能完全符合我們有時的設(shè)計目標(biāo)，就像制定出來的法律不可能流傳100年都不改變，更何況它才制定沒多久，不可能這些語義標(biāo)簽對所以設(shè)計目標(biāo)的適應(yīng)。只是一定程度上的“通用”，我們的目標(biāo)是讓爬蟲讀懂重要的東西就夠了。結(jié)論：不能因為有了HTML 5標(biāo)簽就棄用了div，每個事物都有它的獨(dú)有作用的。節(jié)點(diǎn)元素標(biāo)簽因使用的地方不同，我將他們分為：節(jié)

3、元素標(biāo)簽、文本元素標(biāo)簽、分組元素標(biāo)簽分開來講解HTML5中新增加的語義化標(biāo)簽和使用總結(jié)。header元素header 元素代表“網(wǎng)頁”或“section”的頁眉。通常包含h1-h6元素或hgroup，作為整個頁面或者一個內(nèi)容塊的標(biāo)題。也可以包裹一節(jié)的目錄部分，一個搜索框，一個nav，或者任何相關(guān)logo。整個頁面沒有限制header元素的個數(shù)，可以擁有多個，可以為每個內(nèi)容塊增加一個header元素<header><hgroup><h1>網(wǎng)站標(biāo)題</h1><h1>網(wǎng)站副標(biāo)題</h1></hgroup></h

4、eader>header的示例代碼header使用注意：· 可以是“網(wǎng)頁”或任意“section”的頭部部分；· 沒有個數(shù)限制。· 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。footer元素footer元素代表“網(wǎng)頁”或“section”的頁腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。如果footer元素包含了整個節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標(biāo)簽，類別等一些其他類似信息。<footer> COPYRIGHT小北</footer>footer的示例代碼footer使

5、用注意：· 可以是“網(wǎng)頁”或任意“section”的底部部分；· 沒有個數(shù)限制，除了包裹的內(nèi)容不一樣，其他跟header類似。hgroup元素hgroup元素代表“網(wǎng)頁”或“section”的標(biāo)題，當(dāng)元素有多個層級時，該元素可以將h1到h6元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合<hgroup><h1>這是一篇介紹HTML 5語義化標(biāo)簽和更簡潔的結(jié)構(gòu)</h1><h2>HTML 5</h2></hgroup>hgroup示例代碼hgroup使用注意：· 如果只需要一個h1-h6標(biāo)簽就不用hg

6、roup· 如果有連續(xù)多個h1-h6標(biāo)簽就用hgroup· 如果有連續(xù)多個標(biāo)題和其他文章數(shù)據(jù)，h1-h6標(biāo)簽就用hgroup包住，和其他文章元數(shù)據(jù)一起放入header標(biāo)簽nav元素nav元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分。<nav><ul><li>HTML 5</li><li>CSS3</li><li>JavaScript</li></ul></nav>nav實(shí)例但是我在有些時候卻情不自禁的想用它，譬如：側(cè)邊欄上目錄，面包屑導(dǎo)航，搜索樣

7、式，或者下一篇上一篇文章，但是事實(shí)上規(guī)范上說nav只能用在頁面主要導(dǎo)航部分上。頁腳區(qū)域中的鏈接列表，雖然指向不同網(wǎng)站的不同區(qū)域，譬如服務(wù)條款，版權(quán)頁等，這些footer元素就能夠用了。nav使用注意：· 用在整個頁面主要導(dǎo)航部分上，不合適就不要用nav元素；aside元素aside元素被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的相關(guān)資料、標(biāo)簽、名次解釋等。（特殊的section）在article元素之外使用作為頁面或站點(diǎn)全局的附屬信息部分。最典型的是側(cè)邊欄，其中的內(nèi)容可以是日志串連，其他組的導(dǎo)航，甚至廣告，這些內(nèi)容相關(guān)的頁面。<art

8、icle><p>內(nèi)容</p><aside><h1>作者簡介</h1><p>小北，前端一枚</p></aside></article>aside實(shí)例aside使用總結(jié)：· aside在article內(nèi)表示主要內(nèi)容的附屬信息，· 在article之外則可做側(cè)邊欄，沒有article與之對應(yīng)，最好不用。· 如果是廣告，其他日志鏈接或者其他分類導(dǎo)航也可以用section元素section元素代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“

9、節(jié)”可以是指一個頁面里的分組。section通常還帶標(biāo)題，雖然html5中section會自動給標(biāo)題h1-h6降級，但是最好手動給他們降級。如下：<section><h1>section是啥？</h1><article><h2>關(guān)于section</h1><p>section的介紹</p><section><h3>關(guān)于其他</h3><p>關(guān)于其他section的介紹</p></section></article>&l

10、t;/section>section示例代碼section使用注意：一張頁面可以用section劃分為簡介、文章條目和聯(lián)系信息。不過在文章內(nèi)頁，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和腳本的便利，可以用div。· 表示文檔中的節(jié)或者段；· article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實(shí)際意義的就用divarticle元素article元素最容易跟section和div容易混淆，其實(shí)article代表一個在文檔，頁面或者網(wǎng)站中自成一體

11、的內(nèi)容，其目的是為了讓開發(fā)者獨(dú)立開發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的section）除了它的內(nèi)容，article會有一個標(biāo)題（通常會在header里），會有一個footer頁腳。我們舉幾個例子介紹一下article，好更好區(qū)分article、section、div <article><h1>一篇文章</h1><p>文章內(nèi)容.</p><footer><p><small>版權(quán)：html5jscss網(wǎng)所屬，作者：小北</small

12、></p></footer></article>一篇簡單文章的article示例代碼 上例是最好簡單的article標(biāo)簽使用情況，如果在article內(nèi)部再嵌套article，那就代表內(nèi)嵌的article是與它外部的內(nèi)容有關(guān)聯(lián)的，如博客文章下面的評論，如下：<article><header><h1>一篇文章</h1><p><timepubdatedatetime="2012-10-03">2012/10/03</time></p>

13、;</header><p>文章內(nèi)容.</p><article><h2>評論</h2><article><header><h3>評論者: XXX</h3><p><timepubdatedatetime="2012-10-03T19:10-08:00">1 hour ago</time></p></header><p>哈哈哈</p></article><art

14、icle><header><h3>評論者: XXX</h3><p><timepubdatedatetime="2012-10-03T19:10-08:00">1 hour ago</time></p></header><p>哈？哈？哈？</p></article></article></article>文章里的評論，一個article嵌套article來表示的實(shí)例article內(nèi)部嵌套article，有可能是評論或

15、其他跟文章有關(guān)聯(lián)的內(nèi)容。那article內(nèi)部嵌套section一般是什么情況呢。如下：<article><h1>前端技術(shù)</h1><p>前端技術(shù)有那些</p><section><h2>CSS</h2><p>樣式.</p></section><section><h2>JS</h2><p>腳本</p></section></article>文章里的章節(jié)，一個article里的secti

16、on實(shí)例因為文章內(nèi)section部分雖然也是獨(dú)立的部分，但是它門只能算是組成整體的一部分，從屬關(guān)系，article是大主體，section是構(gòu)成這個大主體的一部分。本網(wǎng)站的全部文章都是article嵌套一個個section章節(jié)，這樣能讓瀏覽器更容易區(qū)分各個章節(jié)所包括的內(nèi)容。那section內(nèi)部嵌套article又有哪些情況呢，如下<section><h1>介紹: 網(wǎng)站制作成員配備</h1><article><h2>設(shè)計師</h2><p>設(shè)計網(wǎng)頁的.</p></article><ar

17、ticle><h2>程序員</h2><p>后臺寫程序的.</p></article><article><h2>前端工程師</h2><p>給樓上兩位打雜的.</p></article></section>一個section里的article實(shí)例設(shè)計師、程序員、前端工程師都是一個獨(dú)立的整體，他們組成了網(wǎng)站制作基本配備，當(dāng)然還有其他成員。設(shè)計師、程序員、前端工程師就像article，是一個個獨(dú)立的整體，而section將這些自成一體的article包裹

18、，就組成了一個團(tuán)體。article和section和例子就例舉這么多了，具體情況具體分析，不易深究。漏了divd，其實(shí)div就是只是想用來把元素組合或者給它們加樣式時使用。article使用注意：· 自身獨(dú)立的情況下：用article· 是相關(guān)內(nèi)容：用section· 沒有語義的：用divHTML5其他結(jié)構(gòu)元素標(biāo)簽HTML5節(jié)元素標(biāo)簽包括body article nav aside section header footer hgroup ，還有h1-h6 address。· address代表區(qū)塊容器，必須是作為聯(lián)系信息出現(xiàn)，郵編地址、郵件地

19、址等等,一般出現(xiàn)在footer。· h1-h6因為hgroup，section和article的出現(xiàn)，h1-h6定義也發(fā)生了變化，允許一張頁面出現(xiàn)多個h1。HTML5語義化標(biāo)簽還有第二篇HTML 5的革新語義化標(biāo)簽(二)。我們在構(gòu)造語義化和結(jié)構(gòu)化的標(biāo)簽時的選擇也變得有些不慎重。也就是說，我們不應(yīng)該濫用超語義化的元素。 一張頁面中結(jié)構(gòu)元素構(gòu)成網(wǎng)頁大體，但是也需要其他內(nèi)容來填充，譬如圖片、文本、代碼、表單、交互等等。所以接下來我們就來詳細(xì)了解HTML5的新增加的和重新定義的文本元素標(biāo)簽、分組元素標(biāo)簽等其他元素標(biāo)簽。文本字體元素文字對SEO影響很大，而HTML5對一些文本字體元素

20、的語義又重新定義了一遍，也增加了一些新的。那我們就來重新認(rèn)識他們。· a（anchor 的縮寫）： 用于定義超鏈接· em(emphasis 的縮寫)：em 是句意強(qiáng)調(diào)，加與不加會引起語義變化，也可以理解為局部強(qiáng)調(diào)，用在語句某個單詞上來改變句子的側(cè)重。· strong：strong表示重要，strong 的強(qiáng)調(diào)則是一種隨意無順序的，看見某文時，立刻就凸顯出來的關(guān)鍵詞句。· p：p元素· b（bold 的縮寫）：b 元素原本就是加粗，現(xiàn)在表示“文體突出”文字，通俗將是用來在文本中高亮顯示某個或者幾個字符，旨在引起用戶的特別注意，無強(qiáng)調(diào)作用。譬如文

21、檔概要中的關(guān)鍵字，評論中的產(chǎn)品名，以及分類名。· i（italic 的縮寫）：i 元素原本只是傾斜，現(xiàn)在描述為在普通文章中突出不同意見或語氣或其他的一段文本，就像劇本里的話外音（外語、譯音），或也可以用做排版的斜體文字。· code：定義計算機(jī)代碼文本。· q（quote 的縮寫）：用于定義一段引用的內(nèi)容（短內(nèi)容）· cite ：用于定義引用內(nèi)容出自書籍或雜志等的標(biāo)題，不允許其他信息，如作者，日期等。· u （underline 的縮寫）：定義下劃線文本· abbr （abbreviation 的縮寫）：

22、定義一個縮寫文本，建議在 abbr 的 title 屬性中描述縮寫的全稱· dfn （defining instance 的縮寫）：用于定義一個術(shù)語· var ：定義計算機(jī)代碼中的變量· samp （sample 的縮寫）：由程序輸出的示例文本· kbd （keyboard 的縮寫）：定義由鍵盤輸入的文本· wbr (word break)的縮寫：定義換行的時機(jī)· span ：沒有任何語義· br ：定義一個換行符以上很多只是W3C定義，有些還不支持，但是

23、為了徹底貫徹W3C的語義化，還是慢慢熟悉用起來吧。文本字體元素標(biāo)簽使用注意:· 在下面這些元素都不適合的時候：表重要的 strong ，表強(qiáng)調(diào)的 em ，表標(biāo)題的 h1h6，表高亮或標(biāo)記文本的 p 等，就用 b 來表示。· em 的強(qiáng)調(diào)是用在語句某個單詞上來改變句子的側(cè)重，可以說是局部的，而strong 和局部還是全局無關(guān)，局部強(qiáng)調(diào)用strong也可以，strong強(qiáng)調(diào)的是重要性，不會改變句意。time元素time元素也是文本標(biāo)簽，因為是全新的標(biāo)簽，所以我們單獨(dú)來介紹。time元素用來標(biāo)記一篇文章的發(fā)布時間。<timedatetime="2012-02-15

24、"pubdate>2012年02月15日</time>形如如上代碼，知道time標(biāo)簽一般有三個組成部分1. 機(jī)器可識別的時間戳：格式必須是年月日的數(shù)字以減號相隔，如果增加時間，那就在日期后面加字母T然后跟24小時格式的時間值以及時區(qū)偏移量，形如datetime="2012-2-15T22:49:40+08:00"2. 人可識別的文本內(nèi)容：格式隨意，只要能看懂。3. 一個可選的pubdata標(biāo)記：pubdata是個布爾值，如果需要，寫上屬性名就好pubdata。但是為了美觀，我們也可以寫成pubdata=""我們還要注意的是，如

25、果該time位于一個article中，那么它表示這篇文章的發(fā)布時間；如果不在article之中表示整個文檔的發(fā)布時間。<article><header><h1>html5jscss網(wǎng)<timedatetime="2012-02-14">2月14日</time>成立</h1><p>發(fā)布 <timedatetime="2012-02-15"pubdate>2012年02月15日</time> 分類：前端交流</p></header&g

26、t;<p>你好世界！</p></article>time示例代碼分組元素標(biāo)簽我們熟悉的div、 p 、dl 、dt、dd、ol、ul、li、hr都是分組元素標(biāo)簽，我們接下來看一些不常用的和新加的分組元素標(biāo)簽· blockquote：標(biāo)記一段長引文。標(biāo)記短引文（行內(nèi)引文），應(yīng)采用 q 元素！· pre：pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。pre 標(biāo)簽的一個常見應(yīng)用就是用來表示源代碼。他跟code的關(guān)系好比blockquote和q的關(guān)系。ol元素ol元素在HTML5有改良，增加了兩個屬性：1. “start”：start屬性用來定義列表編號的起始位置，2. “reversed”：reversed屬性表示將列表進(jìn)行反轉(zhuǎn)，但是目前還沒