標籤：卸載 targe 順序 體驗 相同 字元編碼 cell flex 屬性
HTML代碼規範我們知道，前端工程師入門容易，通過學習基本的HTML和CSS就能在瀏覽器上看到實際的效果，可是要寫好的HTML，就不是那麼容易了。這裡將和大家分享HTML規範，希望大家讀完之後都能夠有所收穫。本文將主要以下面三個部分展開：
http://bootstrap.cn/p/codeguide.html 這裡的規範也不錯，有時間看看。
第一部分：HTML整體結構1.HTML基礎設施
（1）檔案應以<!DOCTYPE.....>首行頂格開始，這句話告訴瀏覽器這是一個什麼檔案，我們推薦使用<!DOCTYPE html>。
（2）必須在head元素內部的meta標籤內聲明文檔的字元編碼charset, 如：<meta charset="UTF-8">，這句代碼告訴瀏覽器應該此HTML檔案使用的字元集是什麼，如果不加此行代碼，那麼在瀏覽器中可能顯示為亂碼。
（3） 頁面的title是極為重要的不可缺少的一項。
當我們在sublime text編輯器中輸入！並按下tab鍵便得到：
| 12345678910 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body></html> |
2.HTML代碼結構和視覺順序基本保持一致
（1）.按照從上之下，從左至右的視覺順序書寫HTML結構。
（2）.有時候為了便於搜尋引擎抓取，我們也會將重要內容在HTML結構順序上提前，以為搜尋引擎抓取網頁內容是自上而下的，所以將重要內容在HTML結構順序上提前可便於抓取重要的內容。
（3）.不要使用table布局，現在基本上被淘汰了，而應該代之以div來布局，方便控制。
3.結構、表現、行為三者分類，避免內聯。
（1）.使用link引入外部css檔案到head中。注意：一般我們不適用@import來引入外部css檔案。兩者的區別可以看我的另外一篇博文《添加css的方式：link和@import的區別》。
（2）.使用script將js檔案引入，共置於body底部，這時js檔案會最後載入，html會最先載入，使用者體驗會更好。（注意：並不是所有的js檔案都要放置於body的底部，如當我們需要使用js檔案動態修改meta元素內容時，需要將js檔案引入到head標籤中，可以看我的博文《探究移動端開發》中flexible.js檔案的引入）。
4.保持良好的樹形結構
（1）.每一個區塊層級元素都另起一行，每一行都是用tab縮排對齊。如果不是區塊層級元素，比如幾個行內元素，我們把他寫在一行即可。注意：html、 head、 body 以及body下的第1級標籤（即直接子項目）不縮排，其他的都正常縮排。如所示：
（2）.當然，我們也可以在大的模組之間用空行空開，在模組內不要使用多餘的空行。
5.其他需要注意的問題
（1）.一個標籤上引用的className不要過多，越少越好。
（2）.對於一個語義化的內部標籤，應該盡量避免使用className。
第二部分：HTML代碼格式
1.說明文案的注釋方法
（1）開始注釋：<!-- 注釋文案 -->
（2）結束注釋：<!-- /注釋文案 -->
（3）允許只有開始注釋。
2.嚴格嵌套
（1）.應當以最嚴格的xhtml strict標準來嵌套，不如內嵌元素不能包含區塊層級元素等等。
（2）.正確閉合標籤且必須閉合。
3.嚴格的屬性
（1）.屬性和值全部小寫，每個屬性都必須有一個值，每個值必須加雙引號。
（2）.沒有值的屬性必須使用自己的名稱做為值（checked、disabled、readonly、selected等等）。
（3）.可以省略style標籤和script標籤的type屬性。
第三部分：HTML內容語義
1.加強資源型內容的可訪問性和可用性。
比如在img標籤內加入alt屬性，在audio內加入文案和連結等等。
2.加強不可見內容的可訪問性
比如背景圖片的文字應該同時卸載HTML中，並使用css使其不可見，有利於搜尋引擎抓取你的內容，也可在css失效的情況下看到內容。
3.適當使用實體
以實體代替與HTML文法相同的字元，避免瀏覽器解析錯誤。
常用的HTML字元實體（建議使用實體）：
常用的字元實體（不建議使用實體）：
更多HTML、CSS規範點擊這裡。
html代碼規範
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
