前端代码标准最佳实践：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個空格；值為空的元素定義應該單獨占用一行；包含子元素的元素的起始標簽和閉合標簽分別單獨占用一行。
例子：
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標簽。
不好的例子：
規范的例子：
?
2. 給頁面添加必要的meta
meta信息描述有關頁面的信息，放在頁面的head部分，用于搜索引擎更友好的識別。如下是常用的一些定義：
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標簽可以完全擔當其作用，可以直接刪除此標簽，并適當調整ul的樣式。
動態加載和渲染非關鍵區域
在頁面中某些區域并不是用戶重點關注的區域，例如頁面的廣告，一些統計信息等，此類內容可以等待頁面關鍵區域加載后通過javascript代碼動態加載和顯示。
3. 謹慎使用iframe
iframe有兩個缺點：1，iframe會阻塞主頁面的Onload事件；2，iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點。?
如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。
總結
以上是一些常見的HTML開發過程中要注意的地方，其實有關HTML還有很多細節的技巧，需要我們在實踐中不斷的總結。本文的目的在于拋磚引玉，讓大家重視代碼的可讀性，可維護性，以及代碼的性能，在開發的過程中有意識地去考慮這些問題，養成良好的編碼習慣比熟悉某項開發技術更重要。
轉載于:https://blog.51cto.com/guangningchen/1034391
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的前端代码标准最佳实践：HTML篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 税务系统问题分析 来自CSNA论坛
- 下一篇： IE（6）浏览器