前端面試題-HTML結構語義化

1、HTML語義化的背景

HTML結構語義化，是近幾年才提出來的，對比以前的 HTML 結構，大可能是一堆沒有語義的標籤。用的最多的就是 DIV+CSS，爲了改變這種現狀，開發者們和官方提出了 HTML結構語義化的概念，而且在 HTML5 添加了不少語義化標籤。

2、HTML語義化的概念

語義化是指根據內容的結構，選擇合適的標籤，便於開發者閱讀和寫出更優雅的代碼的同時，讓瀏覽器的爬蟲和機器很好的解析。

3、HTML語義化的必要

隨着互聯網的發展，WEB承載愈來愈多的信息（圖片，音頻，視頻等），人們開始用機器來處理網絡信息，就此誕生了搜索引擎。如次龐大及複雜的信息如何讓搜索引擎處理和挖掘，因此讓機器可以更好地讀懂WEB上內容就變得愈來愈重要。

傳統的Web由文檔組成，W3C但願經過一組技術支撐 「數據的Web」，即 Web of Data，將Web看做一個存儲和管理數據的大型分佈式數據庫。語義Web是構造這樣的數據Web的重要一環，幫助人們建立數據並存儲在Web上，建立相關的詞彙表及數據的處理規則。

4、HTML語義化的做用

4.1 頁面結構清晰

去掉或 CSS 樣式丟失的時候,也能讓頁面呈現清晰的結構，加強頁面的可讀性。

4.2 支持更多設備

方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以有意義的方式來渲染網頁。

4.3 利於SEO優化

和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重。

4.4 便於團隊開發和維護

在團隊中你們都遵循W3C標準，能夠減小不少差別化的東西，方便開發和維護，提升開發效率，甚至實現模塊化開發。

5、HTML語義化的方法

（1）根據文檔上下文結構合理的選用最適合表達當前語義的標籤；

（2）儘可少使用無語義的標籤 <div> 和 <span>；

（3）不要使用帶有樣式的標籤，好比：<b> 、 <u> 、 <font> 等，使用 CSS 設置；

（4）標題標籤的使用應該根據重要性逐級遞減，沒有斷層，而且一個頁面只能有一個 <h1>；

（5）提升關鍵詞密度，如圖像的替代文本 alt，提示文本 title；

（6）正確使用內容容器，好比段落 <p>，列表 <ul>, <ol>, <li>, <dl>, <dt>, <dd>;

（7）須要強調的文本，可使用 <strong> 或 <em> 標籤（瀏覽器默認樣式，能用 CSS 設置就不用）， <strong> 默認樣式是加粗（不用 <b>），<em> 是斜體（不用 <i>）；

（8）表格注意使用，標題 <caption>，表頭 <thead>，表格主體（正文）<tbody>，表注（頁腳）<tfoot>。<tr> 定義表格行，<th> 定義表頭，<td> 定義表格單元。

（9）表單域使用 <fieldset>標籤，而且<legend> 標籤爲 <fieldset> 定義標題；

（10）每一個 <input> 標籤對應的說明文本都須要使用 <label> 標籤，經過爲 <input> 設置 id 屬性，而且在 <lable> 標籤中設置 for=id 使說明文本和對應的 <input> 關聯。

閱讀更多