通過前面的四節，我們對HTML已經有了一個基本的認識和使用。可是，當我們寫了很多的HTML時，我們會發現即使一樣的展示效果，可是我們卻寫得全然不同。
例如：
<body>
<span style="background-color: red;">這是span</span>
<p style="background-color: red; display: inline;">這是p</p>
</body>
通過上面的例子我們會發現，元素的樣式，是可以通過css去改變的，所以變得非常靈活。可是在真正得開發中，我們希望不同人開發的出來的代碼都是儘可能一樣的，包括標籤的選取使用，屬性的順序等等。
以下的規範是參考：https://codeguide.bootcss.com/ 選取的關於HTML的編碼規範，之後可能會根據自身需要進行修改成符合自身的規範。
語法
- HTML大小寫不敏感，但是標籤不要大寫，DOCTYPE大寫。
- 用兩個空格來代替製表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
- 嵌套元素應當縮進一次（即兩個空格）。
- 對於屬性的定義，永遠全部使用雙引號，絕不要使用單引號。
- 不要在自閉合（self-closing）元素的尾部添加斜線 — HTML5 規範 中明確說明斜線是可忽略的。
- 不要省略可選的結束標籤（closing tag）（例如，
</li>或</body>）。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- HTML大小寫不敏感，但是標籤不要大寫，DOCTYPE大寫 -->
<!-- good -->
<p>Hello World</p>
<!-- not good -->
<P>Hello World</P>
<!-- 用兩個空格來代替製表符（tab） -->
<!-- good -->
<div> 前面有兩個空格</div>
<!-- not good -->
<div> 前面有一個tab</div>
<!-- 嵌套元素應當縮進一次（即兩個空格）。 -->
<!-- good -->
<div>
parent
<div>
child
</div>
</div>
<!-- not good -->
<div>
parent
<div>
child
</div>
</div>
<!-- 對於屬性的定義，永遠全部使用雙引號，絕不要使用單引號 -->
<!-- good -->
<img src="../../img/browser.jpg" alt="browser">
<!-- not good -->
<img src='../../img/browser.jpg' alt='browser'>
<!-- 不要在自閉合（self-closing）元素的尾部添加斜線 -->
<!-- good -->
<br>
<!-- not good -->
<br />
<!-- 不要省略可選的結束標籤 -->
<!-- good -->
<ul>
<li>Hello</li>
<li>World</li>
</ul>
<!-- not good -->
<ul>
<li>Hello
<li>World
</ul>
</body>
</html>
屬性順序
HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
- class
- id,name
- data-*
- scr,for,type,href,value
- title,alt
- role,aria-*
class 用於標識高度可複用組件，因此應該排在首位。id 用於標識具體組件，應當謹慎使用（例如，頁面內的書籤），因此排在第二位。
示例：
<a class="..." id="..." data-toggle="modal" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
其他
- 布爾型屬性不用賦值
元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。 - 減少標籤的數量
編寫 HTML 代碼時，儘量避免多餘的父元素。很多時候，這需要迭代和重構來實現。 - 儘量避免JavsScript生成的標籤
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 布爾型屬性不用賦值 -->
<!-- good -->
<input type="checkbox" checked>
<!-- not good -->
<input type="checkbox" checked=true>
<!-- 減少標籤的數量 -->
<!-- good -->
<img class="avatar" src="...">
<!-- not good -->
<span class="avatar">
<img src="...">
</span>
<!-- 儘量避免JavsScript生成的標籤 -->
<!-- goood -->
<div id="append"><p>i'm child.</p></div>
<!-- not good -->
<div id="append"></div>
<script>
const element = document.querySelector('#append');
const child = document.createElement('p');
child.textContent = 'i\'m child.';
element.appendChild(child);
</script>
</body>
</html>
最後
儘量遵循 HTML 標準和語義，但是不要以犧牲實用性爲代價。任何時候都要儘量使用最少的標籤並保持最小的複雜度。
如果文章能夠對您有所幫助，我便感到十分榮幸。如若文章能被您點贊，那便是萬分榮幸~