語義化是html5新特性嗎

小編給大家分享一下語義化是html5新特性嗎，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

語義化是html5新特性，其作用為：1、讓頁面能呈現(xiàn)出更好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)；2、提升用戶體驗感；3、有利于SEO；4、讓瀏覽器的爬蟲和機器更好地解析；5、便于團隊開發(fā)和維護。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

1、什么是HTML語義化？

基本上都是圍繞著幾個主要的標簽，像標題（H1~H6）、列表（li）、強調(diào)（strong em）等等>

　根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器更好地解析。

2、為什么要語義化？有什么用？

• 為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)：為了裸奔時好看；

• 提升用戶體驗感：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；

• 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重；

• 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備），以意義的方式來渲染網(wǎng)頁；

• 便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

3、寫HTML代碼時應(yīng)注意什么？

• 盡可能少的使用無語義的標簽p和span；

• 在語義不明顯時，既可以使用p或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；

• 不要使用純樣式標簽，如：b、font、u等，改用css設(shè)置。

• 需要強調(diào)的文本，可以包含在strong或者em標簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；

• 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；

• 表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；

• 每個input標簽對應(yīng)的說明文本都需要使用label標簽，并且通過為input設(shè)置id屬性，在lable標簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

4、HTML5新增了哪些語義標簽，詳述之。

1）、<section></section>

定義文檔中的主體部分的節(jié)、段。

2）、<article></article>

一個特殊的section標簽，比section有更明確的語義。定義來自外部的一個獨立的、完整的內(nèi)容塊，例如什么論壇的文章，博客的文本。。。

3）、<aside></aside>

用來裝載頁面中非正文的內(nèi)容，獨立于其他模塊。例如廣告、成組的鏈接、側(cè)邊欄。。。

4）、<header></header>

　     定義文檔、頁面的頁眉。通常是一些引導(dǎo)和導(dǎo)航信息，不局限于整個頁面頭部，也可以用在內(nèi)容里。

5）、<footer></footer>

　     定義了文檔、頁面的頁腳，和header類似。

6）、<nav></nav>

　    定義了一個鏈接組組成的導(dǎo)航部分，其中的鏈接可以鏈接到其他網(wǎng)頁或者當前頁面的其他部分。

7）、<hgroup></hgroup>

　    用于對網(wǎng)頁或區(qū)段(section)的標題元素(h2~h7)進行組合。

8）、<figure></figure>

　    用于對元素進行組合。

9）、<figcaption></figcaption>

　    為figure元素加標題。一般放在figure第一個子元素或者最后一個。

10）、<details></details>

　    定義元素的細節(jié)，用戶可以點擊查看或者隱藏。

11）、<summary></summary>

　    和details連用，用來包含details的標題。

12）、<canvas></canvas>

　    用來進行canvas繪圖。

13）、<video></video>

　    定義視頻。

14）、<audio></audio>

　    定義音頻。

15）、<embed></embed>

　    定義嵌入網(wǎng)頁的內(nèi)容。比如插件。

16）、<source></source>

　    該標簽為媒介元素(比如video、audio)定義媒介元素。

17）、<datalist id='dl'></datalist>

　    定義可選數(shù)據(jù)的列表，與input配合使用(<input list='dl'>)可制作輸入值的下拉列表。

18）、<mark></mark>

　    在視覺上向用戶展現(xiàn)出那些想要突出的文字。比如搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。

19）、<meter [min/max/low/high/optimum/value]></meter>

　    度量衡，用紅黃綠表示出一個數(shù)值所在范圍。

20）、<output></output>

　    定義不同類型的輸出，樣式與span無異。

21）、<progress></progress>

　    進度條，運行中的進度。

22）、<time></time>

　    定義日期或者時間。

23）、<keygen></keygen>

　    定義加密內(nèi)容。

24）、<command></command>

　    定義命令行為。

以上是“語義化是html5新特性嗎”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！