HTML(5) 程式碼規範

HTML 程式碼約定

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

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

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

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

使用正確的文件型別

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

<!DOCTYPE html>

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

<!doctype html>

使用小寫元素名

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

推薦使用小寫字母：

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

不推薦:

<SECTION>
  <p>這是一個段落。</p>
</SECTION>

非常糟糕:

<Section>
  <p>這是一個段落。</p>
</SECTION>

推薦:

<section>
  <p>這是一個段落。</p>
</section>

關閉所有 HTML 元素

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

不推薦:

<section>
  <p>這是一個段落。
  <p>這是一個段落。
</section>

推薦:

<section>
  <p>這是一個段落。</p>
  <p>這是一個段落。</p>
</section>

關閉空的 HTML 元素

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

我們可以這麼寫：

<meta charset="utf-8">

也可以這麼寫：

<meta charset="utf-8" />

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

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

使用小寫屬性名

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

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

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

不推薦：

<div CLASS="menu">

推薦：

<div class="menu">

屬性值

HTML5 屬性值可以不用引號。

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

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

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

<table class=table striped>

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

<table class="table striped">

圖片屬性

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

<img src="html5.gif" alt="HTML5">

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

<img src=https://www.itread01.com/html/"html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等號

等號前後可以使用空格。

<link rel = "stylesheet" href =https://www.itread01.com/html/ "styles.css">

但我們推薦少用空格:

<link rel="stylesheet" href=https://www.itread01.com/html/"styles.css">

避免一行程式碼過長

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

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

空行和縮排

不要無緣無故新增空行。

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

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

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

不必要的空行和縮排:

<body>

  <h1>入門教學</h1>

  <h2>HTML</h2>

  <p>
    入門教學，學的不僅是技術，更是夢想。
    入門教學，學的不僅是技術，更是夢想。
   入門教學，學的不僅是技術，更是夢想,
    入門教學，學的不僅是技術，更是夢想。
  </p>

</body>

推薦:

<body>

<h1>入門教學</h1>

<h2></h2>
<p>入門教學，學的不僅是技術，更是夢想。
入門教學，學的不僅是技術，更是夢想。
入門教學，學的不僅是技術，更是夢想。
入門教學，學的不僅是技術，更是夢想。</p>

</body>

表格例項:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

列表例項:

<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

省略 <html> 和 <body>?

在標準 HTML5 中， <html> 和 <body> 標籤是可以省略的。

以下 HTML5 文件是正確的:

例項:

<!DOCTYPE html>
<head>
  <title>頁面標題</title>
</head>

<h1>這是一個標題</h1>
<p>這是一個段落。</p>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標籤。

<html> 元素是文件的根元素，用於描述頁面的語言：

<!DOCTYPE html>
<html lang="zh">

宣告語言是為了方便螢幕閱讀器及搜尋引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟體中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

省略 <head>?

在標準 HTML5 中， <head>標籤是可以省略的。

預設情況下，瀏覽器會將 <body> 之前的內容新增到一個預設的 <head> 元素上。

例項

<!DOCTYPE html>
<html>
<title>頁面標題</title>

<body>
  <h1>這是一個標題</h1>
  <p>這是一個段落。</p>
</body>

</html>

嘗試一下 ?
Note 現在省略 head 標籤還不推薦使用。

元資料

HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:

<title>入門教學</title>

標題和語言可以讓搜尋引擎很快了解你頁面的主題:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>入門教學</title>
</head>

HTML 註釋

註釋可以寫在 <!-- 和 --> 中:

<!-- 這是註釋 -->

比較長的評論可以在 <!-- 和 --> 中分行寫：

<!--
  這是一個較長評論。 這是 一個較長評論。這是一個較長評論。
  這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。
-->

長評論第一個字元縮排兩個空格，更易於閱讀。

樣式表

樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

<link rel="stylesheet" href=https://www.itread01.com/html/"styles.css">

短的規則可以寫成一行:

p.into {font-family: Verdana; font-size: 16em;}

長的規則可以寫成多行:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • 將左花括號與選擇器放在同一行。
  • 左花括號與選擇器間新增一個空格。
  • 使用兩個空格來縮排。
  • 冒號與屬性值之間新增一個空格。
  • 逗號和符號之後使用一個空格。
  • 每個屬性與值結尾都要使用分號。
  • 只有屬性值包含空格時才使用引號。
  • 右花括號放在新的一行。
  • 每行最多 80 個字元。
Note 在逗號和冒號後新增空格是常用的一個規則。

在 HTML 中載入 JavaScript

使用簡潔的語法來載入外部的指令碼檔案 ( type 屬性不是必須的 ):

<script src=https://www.itread01.com/html/"myscript.js">

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

以下兩個 JavaScript 語句會輸出不同結果:

例項

var obj = getElementById("Demo")

var obj = getElementById("demo")

嘗試一下 ?

HTML 中 JavaScript 儘量使用相同的命名規則。

訪問 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。

技術上區別

如果一個 URL 沒有指定檔名 (如 http://www.itread01.com/css/), 伺服器會返回預設的檔名。通常預設檔名為 index.html, index.htm, default.html, 和 default.htm。

如果伺服器只配置了 "index.html" 作為預設檔案，你必須將檔案命名為 "index.html", 而不是 "index.htm"。

但是，通常伺服器可以設定多個預設檔案，你可以根據需要設定預設檔名。

不管怎樣，HTML 完整的字尾是 ".html"。