前端代碼標準最佳實務：HTML篇

Web前端代碼中，HTML是根本，CSS和JavaScript也是圍繞著既有的HTML結構來構建，所以良好的HTML代碼結構，除了提高了HTML代碼的可讀性，可維護性和執行效能之外，也可以讓相對應的CSS和JavaScript代碼更好的構建。距前面兩篇探討JavaScript前端代碼標準最佳實務：JavaScript篇）和CSS前端代碼標準最佳實務：CSS篇）之後，我們今天來探討Web前端HTML的一些最佳實務。

1）HTML代碼的基本規範 1. HTML的命名和格式

任何代碼的混亂都是從命名和格式的混亂開始的，所以一定要有統一和規範的命名和格式，以下是一些基本的規範。

HTML代碼所有的標籤名和屬性應該都為小寫，雖然HTML代碼是大小寫不敏感的，但是W3c的規範建議為小寫；屬性值應該用雙引號包括。

給所有的關鍵元素定義元素的id和class，便於和CSS，JavaScript的互動；id名稱中的關鍵詞用底線_）串連，class的關鍵詞用中劃線-）串連，根據實際的意義和Dom樹的層級關係定義合適的名稱。

HTML代碼的層級縮排為4個空格；值為空白的元素定義應該單獨佔用一行；包含子項目的元素的起始標籤和閉合標籤分別單獨佔用一行。

例子：

 

  
<div id="info_container" class="info-container"> 
  
    <div class="container-top"></div> 
  
    <article> 
  
         ... 
  
    </article> 
  
    <div class="container-bottom"></div> 
  
</div> 
 

2 CSS代碼和HTML代碼分離

樣式可以直接寫在標籤的style屬性裡面，也可以寫在頁面head地區的style標籤裡面，這兩種方式都是不好的方式，尤其第一種方式。應該把樣式單獨寫到css樣式檔案中，方便代碼的重用和維護。

3. 寫標準的HTML代碼

所有的HTML標籤應該正確閉合；所有的元素定義都要有起始和閉合標籤，即使元素的值為空白，除了如下這些標籤，如下的標籤是可以自閉合：<br/><hr/><input/><img/>等。

停止規範不支援的標籤，如下的標籤規範已經不推薦使用，儘管瀏覽器可以正確的解析：<center><font><s><strike><u><menu>等。

停止使用規範不支援的屬性，如下的屬性已經不推薦使用：body的background屬性，某些標籤的align屬性，td和th上的nowrap屬性，某些標籤的width和height屬性等。其實這些規範不推薦的標籤和屬性都是一些影響外觀的標籤和屬性，都可以通過CSS樣式來設定。

應該經常驗證代碼的標準性，可以使用w3c提供的驗證工具:Unicorn。

2）高可讀性的HTML代碼

1. 合適的地方用合適的標籤

HTML代碼不是純粹為了讓瀏覽器展現，也需要良好的可讀性，方便代碼的檢查和維護，更重要的是各種搜尋引擎也能更好地識別頁面內容，所以要寫有語義的HTML代碼，即經常提到的HTML標籤語義化。

div和span是兩個典型的沒有任何語義的標籤，所以使用這兩個標籤之前先確認，是否有更具有語義的標籤可以代替。

<h1>~<h6>

h1到h6是作為標題的，h1是最進階別的標題，網頁中顯示標題的地方應該使用這些標題標籤。

<em>和<strong>

這兩個標籤的語義是強調和重點強調，代替了沒有任何語義的標籤<i>和<b>。

<table>

table標籤最早是經常用於布局，至今還有大量的頁面是由table來布局的，table布局遭到了前端工程師們的一致唾棄，使得很多新手不敢使用這個標籤了，這裡要強調的是table的語義是表格，如果需要列出一些統計資料等，table標籤是首選。

<ul>，<ol>，<li>

<ul>是無序列表，<ol>是有序列表，所以網頁的導覽功能表最合適用ul，而一些有序的列表，比如章節列表等，則應該用ol標籤。

不好的例子：

 

  
<div class="title">文章標題</div> 
  
 
  
<p> 
  
本文內容，<b>需要強調的內容</b> 
  
</p> 
  
 
  
<div class="main-menu"> 
  
    <span>導航1</span> 
  
    <span>導航2</span> 
  
    <span>導航3</span> 
  
</div> 
 

規範的例子：

 

  
<h1>文章標題</h1> 
  
 
  
<p> 
  
本文內容，<strong>需要強調的內容</strong> 
  
</p> 
  
 
  
<ul class="main-menu"> 
  
    <li>導航1</li> 
  
    <li>導航2</li> 
  
    <li>導航3</li> 
  
</ul> 
 

 

2. 給頁面添加必要的meta

meta資訊描述有關頁面的資訊，放在頁面的head部分，用於搜尋引擎更友好的識別。如下是常用的一些定義：

 

  
<meta name="author" content="John Doe"> 
  
<meta name="copyright" content="&copy; 1997 Acme Corp."> 
  
<meta name="keywords" content="corporate,guidelines,cataloging"> 
  
<meta name="date" content="1994-11-06T08:49:37+00:00"> 
 

3. 不要省略某些標籤的屬性

<img>標籤的alt屬性的作用是當圖片不能正常顯示的時候的替換文字，<a>標籤的title屬性可作為說明資訊，並且當滑鼠hover時顯示為提示資訊。

3）高效能的HMTL代碼

1. CSS檔案在前，JavaScript檔案在後，JavaScript代碼放到頁面底部

JavaScript檔案的下載和解析會阻塞頁面的載入，所以在head部分，CSS的引用寫在前面，而JavaScript檔案的引用寫在後面；

另外script標籤有兩個屬性async和defer,defer設定為true,則意味著此JavaScript檔案滯後執行,不影響頁面HTML的渲染，async是HTML5中新引入的屬性，已經得到了大多數現代瀏覽器的支援，此屬性設定為true意味著檔案非同步載入和執行。兩個屬性的區別是async下載完成後就會執行，而defer則會還是按照在頁面的的次序來執行，所以下載和執行不一定會連續。可以根據實際的項目情況設定這兩個屬性，提高頁面載入的速度。

2. 精簡HTML代碼

越精簡的HTML代碼，頁面的傳輸的時間就會越短，頁面的渲染的時間也會更快,相應的使用者體驗就會越好，所以很有必要精簡頁面載入的HTML代碼。

頁面的精簡主要從如下幾個地方入手：

刪除多餘標籤

多餘的標籤大多是為了方便布局而加入的，例如如下的代碼：

 

  
<div> 
  
    <ul> 
  
        <li>item1</li> 
  
        <li>item2</li> 
  
        <li>item3</li> 
  
    </ul> 
  
</div> 
 

代碼中最外層的div標籤大部分情況下是沒有必要，其內層的ul標籤可以完全擔當其作用，可以直接刪除此標籤，並適當調整ul的樣式。

動態載入和渲染非關鍵地區

在頁面中某些地區並不是使用者重點關注的地區，例如頁面的廣告，一些統計資訊等，此類內容可以等待頁面關鍵地區載入後通過javascript代碼動態載入和顯示。

3. 謹慎使用iframe

iframe有兩個缺點：1，iframe會阻塞首頁面的Onload事件；2，iframe和首頁面共用串連池，而瀏覽器對相同域的串連有限制，所以會影響頁面的並行載入。使用iframe之前需要考慮這兩個缺點。
如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。

總結

以上是一些常見的HTML開發過程中要注意的地方，其實有關HTML還有很多細節的技巧，需要我們在實踐中不斷的總結。本文的目的在於拋磚引玉，讓大家重視代碼的可讀性，可維護性，以及代碼的效能，在開發的過程中有意識地去考慮這些問題，養成良好的編碼習慣比熟悉某項開發技術更重要。