在編寫HTML時，可能有一些方面不夠規範，在通過對《HTML5編碼規範》的學習後，採用代碼註解的方式，做相關的整理，方便今後回顧。 1 <!DOCTYPE html> <!-- HTML5 doctype 標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現-->
在編寫HTML時，可能有一些方面不夠規範，在通過對《HTML5編碼規範》的學習後，採用代碼註解的方式，做相關的整理，方便今後回顧。
1 <!DOCTYPE html> <!-- HTML5 doctype 標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現--> 2 <html lang="zh-CN"> <!-- 語言屬性 有助於語音合成工具確定其所應該採用的發音，有助於翻譯工具確定其翻譯時所應遵守的規則等等 --> 3 <head> 4 5 <!-- 字元編碼 通過明確聲明字元編碼，能夠確保瀏覽器快速並容易的判斷頁面內容的渲染方式 --> 6 <meta charset="UTF-8"> 7 8 <!-- IE 支持通過特定的 <meta> 標簽來確定繪製當前頁面所應該採用的 IE 版本。 9 除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 採用其所支持的最新的模式 --> 10 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 11 12 <title>Page title</title> 13 14 <!-- External CSS 根據 HTML5 規範，在引入 CSS 文件時一般不需要指定 type 屬性，因為 text/css 是它的預設值 --> 15 <link rel="stylesheet" href="code-guide.css"> 16 17 <!-- In-document CSS --> 18 <style> 19 /* ... */ 20 </style> 21 22 <!-- JavaScript 根據 HTML5 規範，在引入 JavaScript 文件時一般不需要指定 type 屬性，因為 text/javascript 是它的預設值 --> 23 <script src="code-guide.js"></script> 24 25 </head> 26 <body> 27 28 <!-- 屬性順序 HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。 29 class 30 id, name 31 data-* 32 src, for, type, href 33 title, alt 34 aria-*, role 35 class 用於標識高度可復用組件，因此應該排在首位。id 用於標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位 --> 36 <a class="..." id="..." data-modal="toggle" href="#"> 37 Example link 38 </a> 39 40 <input class="form-control" type="text"> 41 42 <img src="..." alt="..."> 43 44 <!-- 布爾（boolean）型屬性 不用賦值 元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false --> 45 <select> 46 <option value="1" selected>1</option> 47 </select> 48 49 <!-- JavaScript 放在 body 底部載入可增快頁面渲染速度 --> 50 <script src="code-guide.js"></script> 51 </body> 52 </html>
