小说阅读网,古风小说,有声

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

html5中有哪些語義化標(biāo)簽

這篇文章給大家介紹html5中有哪些語義化標(biāo)簽，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元宣恩做網(wǎng)站,已為上家服務(wù),為宣恩各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

HTML語義化：

每個HTML標(biāo)簽都有自己特定含義（語義），語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽，使頁面有良好的結(jié)構(gòu)，頁面元素有含義，能夠讓人和搜索引擎都容易理解。

看過一個比較形象的例子：

蓋一棟房子的時候，有的地方該用磚頭，有的部分該用瓷片，還有的地方得用水泥糊上，這樣蓋出來房子才會結(jié)實，整潔和美觀。
如果硬是要瓷片替代磚頭，房子勉強(qiáng)也能蓋起來，但是這樣的房子不牢固，容易倒塌，外觀也不好看。

同樣，生活很多事物都有相似相同之處！該用什么標(biāo)簽表示就用什么標(biāo)簽表示，結(jié)構(gòu)良好，更易人和搜索引擎理解。還有一點(diǎn)，就是便于開發(fā)和維護(hù)啊，看過好多網(wǎng)頁結(jié)構(gòu)，各種想吐槽好嗎?各種混亂不堪，外觀表現(xiàn)的任務(wù)交由css去實現(xiàn)就行啦，不要為了外觀表現(xiàn)而布局！

語義化的意義與作用

去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用；
有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；
方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。

語義化都注意什么？

盡可能少用無語義的p、span標(biāo)簽等；使用HTML5中新增的較多強(qiáng)語義化標(biāo)簽，；
不要使用樣式化標(biāo)簽，如font、b、….等等等，完全可以用css實現(xiàn)樣式（再說HTML5中基本將此類“樣式化標(biāo)簽”廢除了?。?/p>
強(qiáng)調(diào)文本，盡量使用strong標(biāo)簽加強(qiáng)強(qiáng)調(diào)，em標(biāo)簽設(shè)置斜體
表格書寫規(guī)范：標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；(說實話，這個倒真沒怎么注意到！)
每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過id屬性和相對應(yīng)的input關(guān)聯(lián)起來。

HTML5語義化標(biāo)簽：

1.header：標(biāo)簽定義“網(wǎng)頁”或“section”的頁眉。

通常包含h2-h7元素或hgroup，作為整個頁面或者一個內(nèi)容塊的標(biāo)題。也可以包裹一節(jié)的目錄部分，一個搜索框，一個nav，或者任何相關(guān)logo。


     畢業(yè)生實習(xí)
     2016/08/05


...

或


    
        網(wǎng)站標(biāo)題
        網(wǎng)站副標(biāo)題

用法：

可以是“網(wǎng)頁”或任意“section”的頭部部分；
沒有個數(shù)限制。
如果hgroup或h2-h7自己就能工作的很好，那就不要用header。

2.nav：定義導(dǎo)航鏈接的部分。


    
        首頁
        xxx
        xxx
        xxx
    


...

用法：

用在整個頁面主要導(dǎo)航部分上，不合適就不要用nav元素；
可用作頁面導(dǎo)航的鏈接組，并不是所有的鏈接組都要放進(jìn)nav元素中，只需將主要、基本的鏈接組放進(jìn)其中；

注意：例如，在頁腳中通過會有一組鏈接，包括服務(wù)條款，首頁，版權(quán)聲明等，使用footer元素是最恰當(dāng)?shù)摹?/p>

具體用途：傳統(tǒng)導(dǎo)航條、側(cè)邊欄導(dǎo)航、業(yè)內(nèi)導(dǎo)航、翻頁操作等

3.footer標(biāo)簽：代表“網(wǎng)頁”或“section”的頁腳。

通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。

如果footer元素包含了整個節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標(biāo)簽，類別等一些其他類似信息。


  作者：xxxx 
 Copyright ? xxx.All rights reserved.


...

用法：

可以是“網(wǎng)頁”或任意“section”的底部部分；
沒有個數(shù)限制，除了包裹的內(nèi)容不一樣，其他跟header類似。
多用于包含服務(wù)條款，友情鏈接、作者信息、版權(quán)信息等

4. hgroup元素：“網(wǎng)頁”或“section”的標(biāo)題

當(dāng)元素有多個層級時，該元素可以將h2到h7元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題的組合


    主標(biāo)題
    HTML 5

用法：

如果只需要一個h2-h7標(biāo)簽就不用hgroup
如果有連續(xù)多個h2-h7標(biāo)簽就用hgroup
如果有連續(xù)多個標(biāo)題和其他文章數(shù)據(jù)，h2-h7標(biāo)簽就用hgroup包住，和其他文章元數(shù)據(jù)一起放入header標(biāo)簽

5.section標(biāo)簽：定義文檔中含有標(biāo)題和段落的區(qū)域。（強(qiáng)調(diào)分段或分塊）


  section要包含標(biāo)題
  section要包含內(nèi)容...

用法：

article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用p
當(dāng)容器需要標(biāo)題和內(nèi)容時，建議使用section標(biāo)簽，若只是普通的容器，應(yīng)該用p元素較好！section標(biāo)簽非p！

6.article：代表獨(dú)立、完整、可獨(dú)自被外部引用的內(nèi)容（博客或報刊中的文章、一遍論壇帖子、一段用戶評論或獨(dú)立的插件、或任何獨(dú)立的內(nèi)容）;（強(qiáng)調(diào)的是獨(dú)立性！可含有完整的標(biāo)題、內(nèi)容、腳注)


   
     標(biāo)題處
   
   內(nèi)容描述
   腳部聲明標(biāo)注

用法：定義一個獨(dú)立完整的內(nèi)容部分（可包含標(biāo)題，內(nèi)容，腳注）時使用！

article、section間的相互嵌套關(guān)系：

7. aside標(biāo)簽：表示當(dāng)前頁面或文章的附屬信息部分，可包含于當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條、以及其他類似的有別于主要內(nèi)容的部分。

1.用于article標(biāo)簽之內(nèi)，此時表示的是該獨(dú)立內(nèi)容的附屬信息部分；


        article內(nèi)容區(qū)
        
            附屬信息1
            附屬信息2
            附屬信息3

2.用于article標(biāo)簽之外，此時作為頁面或站點(diǎn)全局的附屬信息部分。

    
        附屬信息標(biāo)題
        附屬信息...
        附屬信息...
        附屬信息...

用法：

aside在article內(nèi)表示主要內(nèi)容的附屬信息
在article之外則可做側(cè)邊欄，頁面或站點(diǎn)全局的附屬信息部分
如果是廣告，其他日志鏈接或者其他分類導(dǎo)航也可以用

（一句話概括：不同的位置表示為對應(yīng)區(qū)域的附屬信息！）

8. figure標(biāo)簽：規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。

figcaption標(biāo)簽：用于元素定義figure的標(biāo)題。

1.一個figure元素內(nèi)最多只允許放置一個figcaption元素，其他元素可無限放置。

2.figcaption 元素應(yīng)該被置于 figure元素的第一個或最后一個子元素的位置。

    
        figure的標(biāo)題

9. time標(biāo)簽：定義時間或日期

定義時間...9:00

結(jié)合datetime屬性定義日期...時間

10. address標(biāo)簽：代表區(qū)塊容器，必須是作為聯(lián)系信息出現(xiàn)，郵編地址、郵件地址等等,一般出現(xiàn)在footer。

表示文檔或文章的作者/擁有者的聯(lián)系信息，在body標(biāo)簽中表示文檔的作者的聯(lián)系信息；在article標(biāo)簽中表示文章作者的聯(lián)系信息；

用法：

標(biāo)簽不應(yīng)該用于描述通訊地址，除非它是聯(lián)系信息的一部分。
元素通常連同其他信息被包含在 footer 元素中。

關(guān)于html5中有哪些語義化標(biāo)簽就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：html5中有哪些語義化標(biāo)簽
網(wǎng)站地址：http://fisionsoft.com.cn/article/iisgph.html

新聞中心

HTML語義化：

語義化的意義與作用

語義化都注意什么？

HTML5語義化標(biāo)簽：

主標(biāo)題

HTML 5

section要包含標(biāo)題

其他資訊

語義化都注意什么？