編碼規範_html程式碼規範化編寫
語法
-
縮排使用soft tab（4個空格）；
-
巢狀的節點應該縮排；
-
在屬性上，使用雙引號，不要使用單引號；
-
屬性名全小寫，用中劃線做分隔符；
-
不要在自動閉合標籤結尾處使用斜線（html5 規範指出他們是可選的）；
-
不要忽略可選的關閉標籤；
html5 doctype
在頁面開頭使用這個簡單地doctype來啟用標準模式，使其在每個瀏覽器中儘可能一致的展現；
雖然doctype不區分大小寫，但是按照慣例，doctype大寫 （關於html屬性，大寫還是小寫）。
<!DOCTYPE html>
lang屬性
根據html5規範：
應在html標籤上加上lang屬性。這會給語音工具和翻譯工具幫助，告訴它們應當怎麼去發音和翻譯。
更多關於lang屬性的說明在這裡；
在sitepoint上可以查到語言列表；
但sitepoint只是給出了語言的大類，例如中文只給出了zh，但是沒有區分香港，臺灣，大陸。而微軟給出了一份更加詳細的語言列表，其中細分了zh-cn, zh-hk, zh-tw。
<html lang="en-us">
字元編碼
通過宣告一個明確的字元編碼，讓瀏覽器輕鬆、快速的確定適合網頁內容的渲染方式，通常指定為'UTF-8'。
<meta charset="UTF-8">
IE相容模式
用<meta>籤可以指定頁面應該用什麼版本的IE來渲染；
程式碼示例：
<meta http-equiv="X-UA-Compatible"content="IE=Edge">
引入css,js
根據html5規範, 通常在引入css和js時不需要指明type，因為text/css和text/JavaScript分別是他們的預設值。
html5 規範連結
-
使用link
-
使用style
-
使用script
<!-- External css --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document css --> <style> </style> <!-- External js --> <script src="code_guide.js"></script> <!-- In-document js --> <script> </script>
屬性順序
屬性應該按照特定的順序出現以保證易讀性；
-
class
-
id
-
name
-
data-*
-
src,for,type,href,value,max-length,max,min,pattern
-
placeholder,title,alt
-
aria-*,role
-
required,readonly,disabled
class是為高可複用元件設計的，所以應處在第一位；
id更加具體且應該儘量少使用，所以將它放在第二位。
<a id="..." data-modal="toggle" href="#"> Example link </a> <img src="..." alt="...">
boolean屬性
boolean屬性指不需要宣告取值的屬性，Xhtml需要每個屬性宣告取值，但是HTML5並不需要；boolean屬性的存在表示取值為true，不存在則表示取值為false。
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select>
攝圖網https://www.wode007.com/sites/73204.html VJ師網https://www.wode007.com/sites/73287.html
js生成標籤
在js檔案中生成標籤讓內容變得更難查詢，更難編輯，效能更差。應該儘量避免這種情況的出現。
減少標籤數量
在編寫HTML程式碼時，需要儘量避免多餘的父節點；
很多時候，需要通過迭代和重構來使HTML變得更少。
實用高於完美
儘量遵循HTML標準和語義，但是不應該以浪費實用性作為代價；
任何時候都要用盡量小的複雜度和儘量少的標籤來解決問題。