《編寫高質量代碼-Web前端開發修改之道》筆記--第三章 高質量的HTML

本章內容：

標籤的語義

爲何要使用語義化標籤

如何肯定你的標籤是否語義良好

常見模塊你真的很瞭解嗎

標籤的語義

HTML標籤的設計都是有語義考慮的，部分標籤的中文翻譯圖示及本章內容參看：3.1 標籤的語義。其中div和span是沒有語義的，它們只是分別用做塊兒級元素和行內元素的區域分割符。

爲何要使用語義化標籤

搜索引擎看不到視覺效果，看到的只是代碼，只能經過標籤來判斷內容的語義。

專一於結構：經過標籤能夠知道「這是個標題」、「這是個段落」，等等。

CSS佈局的一個誤區：只要不是table佈局，只要是經過CSS佈局就是對的，就是符合Web標準的。

在HTML、CSS、JavaScript這三大元素中，HTML纔是最重要的，結構纔是重點，樣式是用來修飾結構的。正確的作法是，先肯定HTML ，肯定語義的標籤，再來選用合適的CSS。

如何肯定你的標籤是否語義良好

瀏覽器會根據標籤的語義給定一個默認的樣式。判斷網頁標籤語義是否良好的一個簡單方法是：去掉樣式，看網頁結構是否組織清晰有序，是否仍然有良好的可讀性。

值得重點說起的h標籤，其含義爲「標題」，搜索引擎對這個比較敏感，尤爲是h1,h2。h標籤應該是完整有序沒有斷層的。即h一、h二、h三、h4這樣依次列排下來，不能出現漏掉h2的狀況。

調試插件：Firefox--Web Developer。參考站點：W3C官方站點。

常見模塊你真的很瞭解嗎

標題和內容

<div>
    <h2>標題</h2>
    <a href="#">更多</a>
</div>
<p>
    內容
</p>

 

表單

<form action="" method="">
    <fieldset>
        <legend>登陸表單</legend>
        <p>
            <label for="name">帳戶：</label><input type="text" id="name" name="name" />
        </p>
        <p>
            <label for="pwd">帳戶：</label><input type="text" id="password" name="password" />
        </p>
        <input type="submit" value="登陸" />
    </fieldset>
</form>

通常來講，表單域要用fieldset標籤包起來並用legend標籤說明表單的用途。每一個input標籤對應的說明文本都須要用label標籤，並經過爲input設置id屬性，在label標籤中設置for=someld，來讓說明文本和相應的input關聯起來。在用戶點擊這個說明文本的時候，相關聯的input自動得到焦點，方便用戶輸入信息或變成相應的選中狀態等。

表格

table。雖然在CSS佈局中table不推薦用來佈局，但它仍有一席之地--在二維數據展現方面它是最好的選擇。

表格標題要用caption，表頭要用thead包圍，主體部分用tbody包圍，尾部要用tfoot包圍，表頭通常和單元格要區分開，表頭用th，通常單元格用td。

語義化標籤應注意的一些其它問題

爲了保證網頁去樣式後的可讀性，而且又符合Web標準，咱們應注意如下幾點：

• 儘可能少的使用無語義標籤div和span；
• 在語義不明顯，既能夠用p也能夠使用div的狀況下，儘可能用p，p默認狀況下有上下間距，去樣式後的可讀性更好，對兼容特殊終端有利；
• 不要使用純樣式標籤，如b、font和u等，改用CSS設置。語義上須要強調的文本能夠包在strong或em標籤裏，strong和em有「強調」的語意，strong默認加粗，em默認斜體。