HTML5語義化的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)HTML5語義化的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

　　1、什么是HTML語義化?

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

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

　　2、為什么要語義化?

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

　　用戶體驗(yàn)：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用;

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

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

　　便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

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

　　盡可能少的使用無語義的標(biāo)簽p和span;

　　在語義不明顯時(shí)，既可以使用p或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對(duì)兼容特殊終端有利;

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

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

　　使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。

　　表頭和一般單元格要區(qū)分開，表頭用th，單元格用td;

　　表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途;

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

　　4、HTML5新增了哪些語義標(biāo)簽

　　HTML5的目標(biāo)：書寫更簡(jiǎn)潔的HTML代碼，創(chuàng)建更簡(jiǎn)單的Web程序。

　　另人激動(dòng)的新特性如下：新的html標(biāo)簽和屬性，完全支持CSS3，視頻和音頻標(biāo)簽，2D/3D繪圖，本地存儲(chǔ)，本地SQL數(shù)據(jù)庫。

　　為什么要引入語義元素：讓開發(fā)人員更直觀地了解頁面每部分的功能表，同時(shí)搜索引擎以及視覺障礙人士使用的屏幕閱讀器也能更方便地識(shí)別頁面的每一部分。

　　區(qū)塊標(biāo)簽：

　　標(biāo)簽article:表示包含于一個(gè)文檔、頁面、應(yīng)用程序或網(wǎng)站中的一段獨(dú)立的內(nèi)容，也就是說，它能夠獨(dú)立地被發(fā)布或重新使用。

　　運(yùn)用

　　一些使用article的例子：一片博客、一個(gè)論壇帖子、一篇新聞報(bào)道、一個(gè)用戶評(píng)論。

　　標(biāo)簽header

　　一般被放置在頁面的頂部，或者頁面中某個(gè)區(qū)塊元素的頂部，包含整個(gè)頁面或某個(gè)區(qū)塊的標(biāo)題、簡(jiǎn)介等信息。

　　一個(gè)文檔中可以包含多于一個(gè)的header標(biāo)簽;header標(biāo)簽不一定非要顯示在頁面的上方，它的內(nèi)容決定這里需要使用header標(biāo)簽，位置并不重要;可以為body,article,section和aside增加header元素。

　　標(biāo)簽footer

　　一般被放置在頁面的底部，或者頁面中某個(gè)區(qū)塊元素的底部。

　　標(biāo)簽nav

　　表示頁面的導(dǎo)航,可以通過導(dǎo)航連接到網(wǎng)站的其他頁面，或當(dāng)前頁面的其他部分。

　　搜索引擎或屏幕閱讀器會(huì)根據(jù)nav標(biāo)簽確定網(wǎng)站內(nèi)容，不是任何一組超鏈接都適合放在nav標(biāo)簽中。

　　標(biāo)簽aside

　　包含的內(nèi)容不是頁面的主要內(nèi)容，具有獨(dú)立性，是對(duì)頁面內(nèi)容的補(bǔ)充。

　　一些使用aside的例子：頁面?zhèn)冗厵?廣告;友情鏈接;文章引語(內(nèi)容摘要)。

　　標(biāo)簽section

　　一個(gè)主題性的內(nèi)容分組，通常包含一個(gè)頭部(header)，可能還會(huì)有一個(gè)尾部(footer)。

　　標(biāo)簽p和section的比較：標(biāo)簽p應(yīng)用更廣泛，只要你想為一個(gè)區(qū)域定義一個(gè)樣式，就可以使用p標(biāo)簽;標(biāo)簽section包含的內(nèi)容是一個(gè)明確的主題，通常有標(biāo)題區(qū)域。

　　內(nèi)容分組標(biāo)簽：

　 標(biāo)簽main

　　顯示頁面的主體內(nèi)容;每個(gè)頁面只能包含一個(gè)main標(biāo)簽;main標(biāo)簽中不包含網(wǎng)站標(biāo)題、logo、主導(dǎo)航、版權(quán)聲明等信息。

　　標(biāo)簽figure

　　定義媒介內(nèi)容的分組，以及它們的標(biāo)題。

　　標(biāo)簽figcaption

　　定義figure元素的標(biāo)題。

　　文本級(jí)別的語義標(biāo)簽：

　　標(biāo)簽time

　　HTML5的新標(biāo)簽。表示一個(gè)日期，或者一個(gè)時(shí)間，或者同時(shí)表示一個(gè)日期和時(shí)間值。

　　標(biāo)簽i和b

　　HTML4中已經(jīng)存在，在HTML5中被賦予了新的語義化功能的標(biāo)簽。

　　標(biāo)簽i

　　在HTML4中，是修飾文字樣式的，將文字顯示為斜體文本;在HTML5中，表示強(qiáng)調(diào)不同的情緒或聲音，也可以表示技術(shù)術(shù)語、生物分類、來自另一種語言的成語或習(xí)語、一個(gè)想法等等。

　　標(biāo)簽b

　　在HTML4中，是修飾文字樣式的，將文字顯示為粗體文本;在HTML5中，表示文檔中的關(guān)鍵字、商品名稱等。

　　標(biāo)簽em和strong

　　在HTML4中就已經(jīng)有了語義化的功能。

　　標(biāo)簽em：emphasis 強(qiáng)調(diào)，標(biāo)簽中的內(nèi)容是用來強(qiáng)調(diào)的重點(diǎn)內(nèi)容，會(huì)被瀏覽器顯示成斜體文本。

　　標(biāo)簽strong：表示非常重要、嚴(yán)重性或內(nèi)容的緊迫性;會(huì)被瀏覽器顯示成粗體文本。

　　使用建議：如果你只是單純的想把文字的樣式顯示為斜體或粗體，請(qǐng)不要使用這幾個(gè)語義標(biāo)簽，W3C建議我們要在CSS樣式表中定義文字樣式。

關(guān)于“HTML5語義化的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。