Html語義化理解

　　1、什么是HTML語義化?

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

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

　　2、為什么要語義化?

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

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

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

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

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

　　3、寫HTML代碼時應注意什么?

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

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

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

　　需要強調的文本，可以包含在strong或者em標簽中(瀏覽器預設樣式，能用CSS指定就不用他們)，strong默認樣式是加粗(不要用b)，em是斜體(不用i);

　　使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。

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

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

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

　　4、HTML5新增了哪些語義標簽

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

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

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

　　區(qū)塊標簽：

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

　　運用

　　一些使用article的例子：一片博客、一個論壇帖子、一篇新聞報道、一個用戶評論。

　　標簽header

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

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

　　標簽footer

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

　　標簽nav

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

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

　　標簽aside

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

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

　　標簽section

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

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

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

　 標簽main

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

　　標簽figure

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

　　標簽figcaption

　　定義figure元素的標題。

　　文本級別的語義標簽：

　　標簽time

　　HTML5的新標簽。表示一個日期，或者一個時間，或者同時表示一個日期和時間值。

　　標簽i和b

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

　　標簽i

　　在HTML4中，是修飾文字樣式的，將文字顯示為斜體文本;在HTML5中，表示強調不同的情緒或聲音，也可以表示技術術語、生物分類、來自另一種語言的成語或習語、一個想法等等。

　　標簽b

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

　　標簽em和strong

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

　　標簽em：emphasis 強調，標簽中的內(nèi)容是用來強調的重點內(nèi)容，會被瀏覽器顯示成斜體文本。

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

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