HTML5代碼規範
HTML 代碼約定
很多 Web 開發人員對 HTML 的代碼規範知之甚少。
在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。
使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規範。
而針對於 HTML5 ，我們應該形成比較好的代碼規範，以下提供了幾種規範的建議。
使用正確的文檔類型
文檔類型聲明位於HTML文檔的第一行：
1 <!DOCTYPE html>
如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：
1 <!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母：
- 混合了大小寫的風格是非常糟糕的。
- 開發人員通常使用小寫 (類似 XHTML)。
- 小寫風格看起來更加清爽。
- 小寫字母容易編寫。
不推薦:
1 <SECTION> 2 <p>這是一個段落。</p> 3 </SECTION>
非常糟糕:
1 <Section> 2 <p>這是一個段落。</p> 3 </SECTION>
推薦:
1 <section> 2 <p>這是一個段落。</p> 3 </section>
關閉所有 HTML 元素
在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素)，但我們建議每個元素都要添加關閉標簽。
不推薦:
1 <section> 2 <p>這是一個段落。 3 <p>這是一個段落。 4 </section>
推薦:
1 <section> 2 <p>這是一個段落。</p> 3 <p>這是一個段落。</p> 4 </section>
關閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關閉：
我們可以這麽寫：
1 <meta charset="utf-8">
也可以這麽寫：
1 <meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁面，使用這種風格是非常好的。
使用小寫屬性名
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
- 同時使用大小寫是非常不好的習慣。
- 開發人員通常使用小寫 (類似 XHTML)。
- 小寫風格看起來更加清爽。
- 小寫字母容易編寫。
不推薦：
1 <div CLASS="menu">
推薦：
1 <div class="menu">
屬性值
HTML5 屬性值可以不用引號。
屬性值我們推薦使用引號:
- 如果屬性值含有空格需要使用引號。
- 混合風格不推薦的，建議統一風格。
- 屬性值使用引號易於閱讀。
以下實例屬性值包含空格，沒有使用引號，所以不能起作用:
1 <table class=table striped>
以下使用了雙引號，是正確的：
1 <table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時，它能替代圖片顯示。
1 <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸，在加載時可以預留指定空間，減少閃爍。
1 <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號
等號前後可以使用空格。
1 <link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
1 <link rel="stylesheet" href="styles.css">
避免一行代碼過長
使用 HTML 編輯器，左右滾動代碼是不方便的。
每行代碼盡量少於 80 個字符。
空行和縮進
不要無緣無故添加空行。
為每個邏輯功能塊添加空行，這樣更易於閱讀。
縮進使用兩個空格，不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進。
不必要的空行和縮進:
1 <body> 2 3 <h1>菜鳥教程</h1> 4 5 <h2>HTML</h2> 6 7 <p> 8 菜鳥教程，學的不僅是技術，更是夢想。 9 菜鳥教程，學的不僅是技術，更是夢想。 10 菜鳥教程，學的不僅是技術，更是夢想, 11 菜鳥教程，學的不僅是技術，更是夢想。 12 </p> 13 14 </body>
推薦:
1 <body> 2 3 <h1>菜鳥教程</h1> 4 5 <h2></h2> 6 <p>菜鳥教程，學的不僅是技術，更是夢想。 7 菜鳥教程，學的不僅是技術，更是夢想。 8 菜鳥教程，學的不僅是技術，更是夢想。 9 菜鳥教程，學的不僅是技術，更是夢想。</p> 10 11 </body>
表格實例:
1 <table> 2 <tr> 3 <th>Name</th> 4 <th>Description</th> 5 </tr> 6 <tr> 7 <td>A</td> 8 <td>Description of A</td> 9 </tr> 10 <tr> 11 <td>B</td> 12 <td>Description of B</td> 13 </tr> 14 </table>
列表實例:
1 <ol> 2 <li>London</li> 3 <li>Paris</li> 4 <li>Tokyo</li> 5 </ol>
省略 <html> 和 <body>?
在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。
以下 HTML5 文檔是正確的:
<!DOCTYPE html> <head> <title>頁面標題</title> </head> <h1>這是一個標題</h1> <p>這是一個段落。</p>
不推薦省略 <html> 和 <body> 標簽。
<html> 元素是文檔的根元素，用於描述頁面的語言：
1 <!DOCTYPE html> 2 <html lang="zh">
聲明語言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。
省略 <head>?
在標準 HTML5 中， <head>標簽是可以省略的。
默認情況下，瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。
1 <!DOCTYPE html> 2 <html> 3 <title>頁面標題</title> 4 5 <body> 6 <h1>這是一個標題</h1> 7 <p>這是一個段落。</p> 8 </body> 9 10 </html>
現在省略 head 標簽還不推薦使用。
元數據
HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:
1 <title>菜鳥教程</title>
標題和語言可以讓搜索引擎很快了解你頁面的主題:
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>菜鳥教程</title> 6 </head>
HTML 註釋
註釋可以寫在 <!-- 和 --> 中:
1 <!-- 這是註釋 -->
比較長的評論可以在 <!-- 和 --> 中分行寫：
1 <!-- 2 這是一個較長評論。 這是 一個較長評論。這是一個較長評論。 3 這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。 4 -->
長評論第一個字符縮進兩個空格，更易於閱讀。
樣式表
樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
1 <link rel="stylesheet" href="styles.css">
短的規則可以寫成一行:
1 p.into {font-family: Verdana; font-size: 16em;}
長的規則可以寫成多行:
1 body { 2 background-color: lightgrey; 3 font-family: "Arial Black", Helvetica, sans-serif; 4 font-size: 16em; 5 color: black; 6 }
- 將左花括號與選擇器放在同一行。
- 左花括號與選擇器間添加一個空格。
- 使用兩個空格來縮進。
- 冒號與屬性值之間添加一個空格。
- 逗號和符號之後使用一個空格。
- 每個屬性與值結尾都要使用分號。
- 只有屬性值包含空格時才使用引號。
- 右花括號放在新的一行。
- 每行最多 80 個字符。
在 HTML 中載入 JavaScript
使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
1 <script src="myscript.js">
使用 JavaScript 訪問 HTML 元素
一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。
以下兩個 JavaScript 語句會輸出不同結果:
1 var obj = getElementById("Demo") 2 3 var obj = getElementById("demo")
HTML 中 JavaScript 盡量使用相同的命名規則。
使用小寫文件名
大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。
其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
你必須保持統一的風格，我們建議統一使用小寫的文件名。
文件擴展名
HTML 文件後綴可以是 .html (或 .htm)。
CSS 文件後綴是 .css 。
JavaScript 文件後綴是 .js 。
.htm 和 .html 的區別
.htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。
區別在於：
.htm 應用在早期 DOS 系統，系統現在或者只能有三個字符。
在 Unix 系統中後綴沒有特別限制，一般用 .html。
摘抄於菜鳥教程
HTML5代碼規範