Latest web development tutorials

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" style= "width:128px;height:128px" >

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

< img src= "html5.gif" alt= "HTML5" style= "width:128px;height:128px " >

空格和等號

等號前後可以使用空格。

< link rel = "stylesheet" href = "styles.css" >

但我們推薦少用空格:

< link rel= "stylesheet" href= "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= "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= "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 (或r .htm )。

CSS文件後綴是.css 。

JavaScript文件後綴是.js 。

.htm 和.html 的區別

.htm 和.html 的擴展名文件本質上是沒有區別的。 瀏覽器和Web 服務器都會把它們當作HTML 文件來處理。

區別在於：

.htm 應用在早期DOS 系統，系統現在或者只能有三個字符。

在Unix 系統中後綴沒有特別限制，一般用.html。

技術上區別

如果一個URL 沒有指定文件名(如http://www.w3big.com/css/), 服務器會返回默認的文件名。 通常默認文件名為index.html, index.htm, default.html, 和default.htm。

如果服務器只配置了"index.html" 作為默認文件，你必須將文件命名為"index.html", 而不是"index.htm"。

但是，通常服務器可以設置多個默認文件，你可以根據需要設置默認文件嗎。

不管怎樣，HTML 完整的後綴是".html"。