《Web前端開發最佳實踐》——3.4　停止使用不標準的標籤和屬性，簡化HTML程式碼

本節書摘來自華章計算機《Web前端開發最佳實踐》一書中的第3章，第3.4節,作者:黨　建 更多章節內容可以訪問雲棲社群“華章計算機”公眾號檢視。

3.4　停止使用不標準的標籤和屬性，簡化HTML程式碼

W3C在制定的HTML4和HTML5標準中有獨立的章節來說明哪些是不被推薦的標籤和屬性，這些標籤和屬性是Web網際網路發展早期HTML標準混亂和瀏覽器“各自為政”的產物，有些標籤甚至使用率頗高，比如滾動效果標籤< marquee >，儘管在現在看來其效果不好，但在當時幾乎所有的網站都會使用這樣的效果，風靡一時。但是隨著Web網際網路的飛速發展，人們對Web的認識也逐漸提高，也開始關注如何讓網頁HTML程式碼更統一、更簡潔、更易理解等，不在侷限於單純的外觀。在此過程中，一些標籤和屬性逐漸被更好的方案代替，這些標籤也不被標準所推薦，甚至是從標準規範中移除，有些特性在瀏覽器中也不被繼續支援。從這些標籤和屬性的作用來看，導致不被推薦的原因主要有如下幾個。
（1）標籤沒有實際的語義，僅僅是用於設定樣式
不推薦使用單純設定樣式的標籤，如basefont、big、center、font等。應該通過CSS設定樣式，讓HTML標籤功能更單一。不推薦的示例如下：

<!--不推薦程式碼：不推薦使用單純設定樣式的標籤，應該通過CSS設定樣式-->
<font color=blue>don`t use it!</font>
<big>don`t use it!</big>
<center>don`t use it!</center>

不推薦在HTML標籤中新增樣式屬性，如iframe、img、input、div等標籤中的align屬性，body標籤上的background屬性，td和tr標籤上的height、width、nowrap、bgcolor、valign等屬性，iframe標籤中的frameborder、marginheight、scrolling等屬性。此類屬性應該廢棄，並通過新增CSS樣式來實現相同的效果。不推薦的示例如下：

<!—不推薦程式碼：標籤中新增border、width、height等樣式屬性-->
<img src="#" alt="demo" border="1" width="194" height="37" />
<div id="focusViwer" align=center></div>

不推薦使用< blink >或< marquee > （閃動或滾動）。這兩個標籤的職能已經超出了HTML本身，並且也存在瀏覽器的相容問題。以如今的審美來說，這兩個標籤實現的效果不佳，如果一定要這樣的效果，可以通過JavaScript程式碼來實現，並且效果會更好，如可以使用jQuery Marquee外掛。不推薦的示例如下：

<!--不推薦程式碼：效果不佳，並且存在瀏覽器相容問題，不推薦使用，如果需要實現這樣的效果，可以通過JavaScript程式碼來實現，並且效果會更好-->
<blink>don`t use it!</blink>
<marquee scrollamount=3 scrolldelay=100 >don`t use it</marquee>

（2）讓HTML標籤具有更好的語義
不推薦使用< b >和< i >顯示黑體字和斜體，推薦使用更具有語義的< strong >和< em >，如果單純是為了樣式，推薦用CSS樣式定義font-weight 和 font-style，讓頁面更簡潔。類似的不推薦標籤還有< s > 和< strike >，這兩個標籤是給文字新增刪除線的，可以用< del >和< ins >來代替。
不推薦示例：

<!--不推薦程式碼：無語義的標籤，單純設定樣式-->
<b>don`t use it!</b>
<i>don`t use it!</i>
<s>?don`t use it!</s>
<strike>don`t use it!</strike>

推薦示例：

<!--推薦程式碼：使用具有語義的標籤，如果單純為了樣式，則應該通過CSS來設定-->
<strong>important</strong>
<em>emphasize</em>
<del>deleted</del>
<ins>insert</ins>

（3）移除不常用的HTML標籤
此類標籤包括acronym、applet、dir等，廢棄的原因是使用率極低或者是語義有歧義，並且有其他更好代替方案可以使用。例如，表達縮寫的標籤< acronym >，其語義模糊，開發者更常用來代替；開發者更喜歡使用< ul >而不是 < dir >。