| |
|
|
重慶分公司
重慶分公司
html5中有哪些語義化標簽
這篇文章給大家介紹html5中有哪些語義化標簽，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
成都創(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標簽都有自己特定含義（語義），語義化是指使用語義恰當?shù)臉撕?/strong>，使頁面有良好的結(jié)構(gòu)，頁面元素有含義，能夠讓人和搜索引擎都容易理解。
看過一個比較形象的例子：
蓋一棟房子的時候，有的地方該用磚頭，有的部分該用瓷片，還有的地方得用水泥糊上，這樣蓋出來房子才會結(jié)實，整潔和美觀。
如果硬是要瓷片替代磚頭，房子勉強也能蓋起來，但是這樣的房子不牢固，容易倒塌，外觀也不好看。
同樣，生活很多事物都有相似相同之處！該用什么標簽表示就用什么標簽表示，結(jié)構(gòu)良好，更易人和搜索引擎理解。還有一點，就是便于開發(fā)和維護啊，看過好多網(wǎng)頁結(jié)構(gòu)，各種想吐槽好嗎?各種混亂不堪，外觀表現(xiàn)的任務(wù)交由css去實現(xiàn)就行啦，不要為了外觀表現(xiàn)而布局！
語義化的意義與作用
去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重；
方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
語義化都注意什么？
盡可能少用無語義的p、span標簽等；使用HTML5中新增的較多強語義化標簽，；
不要使用樣式化標簽，如font、b、….等等等，完全可以用css實現(xiàn)樣式（再說HTML5中基本將此類“樣式化標簽”廢除了?。?/p>
強調(diào)文本，盡量使用strong標簽加強強調(diào)，em標簽設(shè)置斜體
表格書寫規(guī)范：標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；(說實話，這個倒真沒怎么注意到！)
每個input標簽對應(yīng)的說明文本都需要使用label標簽，并且通過id屬性和相對應(yīng)的input關(guān)聯(lián)起來。
HTML5語義化標簽：
1.header：標簽定義“網(wǎng)頁”或“section”的頁眉。
通常包含h2-h7元素或hgroup，作為整個頁面或者一個內(nèi)容塊的標題。也可以包裹一節(jié)的目錄部分，一個搜索框，一個nav，或者任何相關(guān)logo。
...
或
用法：
2.nav：定義導(dǎo)航鏈接的部分。
...
用法：
注意：例如，在頁腳中通過會有一組鏈接，包括服務(wù)條款，首頁，版權(quán)聲明等，使用footer元素是最恰當?shù)摹?/p>
具體用途：傳統(tǒng)導(dǎo)航條、側(cè)邊欄導(dǎo)航、業(yè)內(nèi)導(dǎo)航、翻頁操作等
3.footer標簽：代表“網(wǎng)頁”或“section”的頁腳。
通常含有該節(jié)的一些基本信息，譬如：作者，相關(guān)文檔鏈接，版權(quán)資料。
如果footer元素包含了整個節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標簽，類別等一些其他類似信息。
...
用法：
可以是“網(wǎng)頁”或任意“section”的底部部分；
沒有個數(shù)限制，除了包裹的內(nèi)容不一樣，其他跟header類似。
多用于包含服務(wù)條款，友情鏈接、作者信息、版權(quán)信息等
4. hgroup元素：“網(wǎng)頁”或“section”的標題
當元素有多個層級時，該元素可以將h2到h7元素放在其內(nèi)，譬如文章的主標題和副標題的組合
主標題
HTML 5
用法：
5.section標簽：定義文檔中含有標題和段落的區(qū)域。（強調(diào)分段或分塊）
section要包含標題
section要包含內(nèi)容...
用法：
6.article：代表獨立、完整、可獨自被外部引用的內(nèi)容（博客或報刊中的文章、一遍論壇帖子、一段用戶評論或獨立的插件、或任何獨立的內(nèi)容）;（強調(diào)的是獨立性！可含有完整的標題、內(nèi)容、腳注)
內(nèi)容描述
用法：定義一個獨立完整的內(nèi)容部分（可包含標題，內(nèi)容，腳注）時使用！
article、section間的相互嵌套關(guān)系：
7. aside標簽：表示當前頁面或文章的附屬信息部分，可包含于當前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條、以及其他類似的有別于主要內(nèi)容的部分。
1.用于article標簽之內(nèi)，此時表示的是該獨立內(nèi)容的附屬信息部分；
article內(nèi)容區(qū)
2.用于article標簽之外，此時作為頁面或站點全局的附屬信息部分。
用法：
aside在article內(nèi)表示主要內(nèi)容的附屬信息
在article之外則可做側(cè)邊欄，頁面或站點全局的附屬信息部分
如果是廣告，其他日志鏈接或者其他分類導(dǎo)航也可以用
（一句話概括：不同的位置表示為對應(yīng)區(qū)域的附屬信息！）
8. figure標簽：規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
figcaption標簽：用于元素定義figure的標題。
1.一個figure元素內(nèi)最多只允許放置一個figcaption元素，其他元素可無限放置。
2.figcaption 元素應(yīng)該被置于 figure元素的第一個或最后一個子元素的位置。
figure的標題
9. time標簽：定義時間或日期
定義時間...
結(jié)合datetime屬性定義日期...時間
10. address標簽：代表區(qū)塊容器，必須是作為聯(lián)系信息出現(xiàn)，郵編地址、郵件地址等等,一般出現(xiàn)在footer。
表示文檔或文章的作者/擁有者的聯(lián)系信息，在body標簽中表示文檔的作者的聯(lián)系信息；在article標簽中表示文章作者的聯(lián)系信息；
用法：
關(guān)于html5中有哪些語義化標簽就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
文章標題：html5中有哪些語義化標簽
網(wǎng)址分享：http://weahome.cn/article/iisgph.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
