HTML5 程式碼規(guī)範(fàn)

HTML 程式碼約定

許多 Web 開發(fā)人員對 HTML 的程式碼規(guī)格所知甚少。

在2000年至2010年，許多Web開發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。

使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)格。

而針對於 HTML5 ，我們應(yīng)該形成比較好的程式碼規(guī)範(fàn)，以下提供了幾個規(guī)範(fàn)的建議。

使用正確的文檔類型

文檔類型宣告位於HTML文檔的第一行：

<!DOCTYPE?html>

#如果你想跟其他標(biāo)籤一樣使用小寫，可以使用以下程式碼：

<!doctype?html>

使用小寫元素名稱

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

推薦使用小寫字母：混合了大小寫的風(fēng)格是非常糟糕的。

開發(fā)人員通常使用小寫 (類似 XHTML)。

小寫風(fēng)格看起來更清爽。小寫字母容易寫。

不推薦:

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

非常糟糕:

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

推薦:

<body>
<h1>相思</h1>
<h2></h2>
<p>紅豆生南國，春來發(fā)幾枝。
愿君多采擷，此物最相思。</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>?

在標(biāo)準(zhǔn)HTML5 中， <html> 和<body> 標(biāo)籤是可以省略的。

以下 HTML5 文件是正確的:

實例:

<!DOCTYPE html>
<head>
  <title>網(wǎng)頁標(biāo)題</title>
</head>
<h1>標(biāo)題</h1>
<p>段落。</p>

不建議省略 <html> 和 <body> 標(biāo)籤。

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

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

聲明語言是為了方便螢?zāi)婚喿x器及搜尋引擎。

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

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

省略 <head>?

在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)籤是可以省略的。

預(yù)設(shè)情況下，瀏覽器會將 <body> 之前的內(nèi)容加入到一個預(yù)設(shè)的 <head> 元素上。

實例

<!DOCTYPE html>
<html>
<title>頁面標(biāo)題</title>
<body>
  <h1>標(biāo)題</h1>
  <p>段落。</p>
</body>
</html>

現(xiàn)在省略 head 標(biāo)籤還不建議使用。

元資料

HTML5 中<title> 元素是必須的，標(biāo)題名稱描述了頁面的主題:

<title>php中文網(wǎng)</title> ;

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

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>ask.php.cn</title>
</head>

HTML 註解

註解可以寫在 ; 中:

比較長的評論可以在 中分行寫：

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

樣式表

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

短的規(guī)則可以寫成一行:

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

長的規(guī)則可以寫成多行:

body?{
??background-color:?lightgrey;
??font-family:?"Arial Black", Helvetica, sans-serif;
??fontfontfont -size:?16em;
??color:?black;
}

#將左花括號與選擇器放在同一行。

左花括號與選擇器間新增以空格。

使用兩個空格來縮排。

冒號與屬性值之間新增已空格。

逗號和符號之後使用一個空格。

每個屬性與值結(jié)尾都要使用符號。

只有屬性值包含空格時才使用引號。

右花括號放在新的一行。

每行最多 80 個字元。

在逗號和分號後面加上空格是常用的一個規(guī)則。

在HTML 中載入JavaScript

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

使用JavaScript 存取HTML 元素

一個糟糕的HTML 格式可能會導(dǎo)致JavaScript 執(zhí)行錯誤。

以下兩個 JavaScript 語句會輸出不同結(jié)果:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 會被替換
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>

HTML 中 JavaScript 盡量使用相同的命名規(guī)則。

存取 JavaScript 程式碼規(guī)格。

使用小寫檔名

大多 Web 伺服器 (Apache, Unix) 對大小寫敏感： london.jpg 不能透過 London.jpg 存取。

其他 Web 伺服器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以透過 London.jpg 或 london.jpg 存取。

你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫的檔案名稱。

檔案副檔名

HTML 檔案後綴可以是?.html?(或r?.htm)。

CSS 檔案後綴是?.css?。

JavaScript 檔案後綴是?.js?。

.htm 和 .html 的區(qū)別

.htm 和 .html 的副檔名檔案本質(zhì)上是沒有區(qū)別的。瀏覽器和 Web 伺服器都會把它們當(dāng)作 HTML 檔案來處理。

差異在於：

.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或只能有三個字元。

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

技術(shù)上差異

如果一個 URL 沒有指定檔案名稱 (如 http://ipnx.cn/css/), 伺服器會傳回預(yù)設(shè)的檔案名稱。通常預(yù)設(shè)檔名為 index.html, index.htm, default.html, 和 default.htm。

如果伺服器只配置了 "index.html" 作為預(yù)設(shè)文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常伺服器可以設(shè)定多個預(yù)設(shè)文件，你可以根據(jù)需要設(shè)定預(yù)設(shè)文件嗎。

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

繼續(xù)學(xué)習(xí)

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <p id="Demo">段落 1。</p> <p id="demo">段落 2。</p> <script> // 只有段落 2 會被替換 document.getElementById("demo").innerHTML = "HELLO."; </script> </body> </html>

提交重置程式碼

自動運行