HTML 程式碼約定

很多 Web 開發人員對 HTML 的程式碼規範知之甚少。

在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規範。

而針對於 HTML5 ，我們應該形成比較好的程式碼規範，以下提供了幾種規範的建議。

使用正確的文件型別

文件型別宣告位於HTML文件的第一行：

如果你想跟其他標籤一樣使用小寫，可以使用以下程式碼：

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

• 混合了大小寫的風格是非常糟糕的。
• 開發人員通常使用小寫 (類似 XHTML)。
• 小寫風格看起來更加清爽。
• 小寫字母容易編寫。

不推薦:

非常糟糕:

推薦:

關閉所有 HTML 元素

在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素)，但我們建議每個元素都要新增關閉標籤。

不推薦:

推薦:

關閉空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要關閉：

我們可以這麼寫：

也可以這麼寫：

在 XHTML 和 XML 中斜線 (/) 是必須的。

如果你期望 XML 軟體使用你的頁面，使用這種風格是非常好的。

使用小寫屬性名

HTML5 屬性名允許使用大寫和小寫字母。

我們推薦使用小寫字母屬性名:

• 同時使用大小寫是非常不好的習慣。
• 開發人員通常使用小寫 (類似 XHTML)。
• 小寫風格看起來更加清爽。
• 小寫字母容易編寫。

不推薦：

推薦：

屬性值

HTML5 屬性值可以不用引號。

屬性值我們推薦使用引號:

• 如果屬性值含有空格需要使用引號。
• 混合風格不推薦的，建議統一風格。
• 屬性值使用引號易於閱讀。

以下例項屬性值包含空格，沒有使用引號，所以不能起作用:

以下使用了雙引號，是正確的：

圖片屬性

圖片通常使用 alt 屬性。 在圖片不能顯示時，它能替代圖片顯示。

定義好圖片的尺寸，在載入時可以預留指定空間，減少閃爍。

空格和等號

等號前後可以使用空格。

但我們推薦少用空格:

避免一行程式碼過長

使用 HTML 編輯器，左右滾動程式碼是不方便的。

每行程式碼儘量少於 80 個字元。

空行和縮排

不要無緣無故新增空行。

為每個邏輯功能塊新增空行，這樣更易於閱讀。

縮排使用兩個空格，不建議使用 TAB。

比較短的程式碼間不要使用不必要的空行和縮排。