HTML5 編碼規範

時間 2019-12-05

標籤 html5 html 編碼規範欄目 HTML5 简体版

原文原文鏈接

在編寫HTML時，可能有一些方面不夠規範，在經過對《HTML5編碼規範》的學習後，採用代碼註解的方式，作相關的整理，方便從此回顧。javascript

 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>