最新的Web開發教程

HTML(5)風格指南和編碼約定

❮上一頁 下一頁章❯

HTML編碼規範

Web開發人員往往是不確定的編碼風格和語法在HTML中使用。

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

隨著XHTML，開發商被迫寫啥"well-formed"代碼。

HTML5是一個比較草率，當涉及到代碼驗證。

有了HTML5，你必須創建自己的最佳實踐，風格指南和編碼約定 。

是聰明，面向未來

隨之而來的使用風格，讓別人更容易理解和使用你的HTML。

在未來，像XML閱讀器程序，可能需要閱讀你的HTML。

使用結構良好"close to XHTML"的語法，可聰明了。

始終保持你的風格聰明，整潔，乾淨，良好的。

使用正確的文件類型

始終聲明文檔類型為文檔中的第一行：

<!DOCTYPE html>

如果你想用小寫標籤的一致性，您可以使用：

<!DOCTYPE html>

使用小寫的元素名稱

HTML5允許混合元素名稱大寫和小寫字母。

我們建議您使用小寫字母元素名稱：

  • 混合大寫和小寫的名字是壞
  • 開發商習慣於使用小寫名稱(as in XHTML)
  • 小寫看起來更乾淨
  • 小寫字母更容易編寫，

壞：

<SECTION>
  <p>This is a paragraph.</p>
</SECTION>

很壞：

<SECTION>
  <p>This is a paragraph.</p>
</SECTION>

好：

<SECTION>
  <p>This is a paragraph.</p>
</SECTION>

關閉所有的HTML元素

在HTML5中，不必關閉所有元件(for example the <p> element) 。

我們建議您關閉所有的HTML元素：

面色不善：

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

看起來不錯：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

關閉空HTML元素

在HTML5中，它是可選的，關閉空元素。

這是允許的：

<meta charset="utf-8">

這也是允許的：

<meta charset="utf-8" />

斜杠(/)需要在XHTML和XML。

如果你希望XML軟件來訪問你的頁面，這可能是一個好主意，讓它。

使用小寫的屬性名稱

HTML5允許混合屬性名稱大寫和小寫字母。

我們建議您使用小寫的屬性名稱：

  • 混合大寫和小寫的名字是壞
  • 開發商習慣於使用小寫名稱(as in 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編輯器，它是不方便向左和向右滾動閱讀HTML代碼。

盡量避免行代碼超過80個字符。

空行和縮進

不要沒有理由加空行。

為了可讀性，添加空白行來分離較大的或邏輯的代碼塊。

為了增強可讀性，加2個空格縮進。 不要使用TAB。

不要使用不必要的空行和縮進。 這是沒有必要使用短和相關項目之間的空行。 這是沒有必要縮進每一個元素：

不必要：

<body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

更好：

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</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>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
試一試»

我們不建議省略<html>和<body>標籤。

的<html>元素是文檔根。 它是用於指定頁面語言推薦的地方：

<!DOCTYPE html>
<html lang="en-US">

聲明一個語言是用來輔助功能應用程序很重要(screen readers)和搜索引擎。

遺漏<html>或<body>會崩潰DOM和XML軟件。

省略<body>可以產生在舊的瀏覽器的錯誤(IE9)

省略<head>

在HTML5標準中， <head>標籤也可被省略。

默認情況下，瀏覽器將添加前的所有元素<body>為默認<head>元素。

您可以通過省略降低了HTML的複雜性， <head>標籤：

例

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>
試一試»

省略標籤是不熟悉的Web開發人員。 這需要建立一個指導時間。

元數據

所述<title>元素是必需的在HTML5。 使標題盡可能為有意義：

<title>HTML5 Syntax and Coding Style</title>

為了確保適當的解釋和正確的搜索引擎索引，無論是語言和字符編碼應該文檔中盡可能早地進行定義：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML註釋

簡短的評論應該在一行後寫，用空格<!-- and a space before --> ：

<!-- This is a comment -->

長註釋，跨越多條線路，應當書面<!-- and -->在單獨的行：

<!--
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

長註釋更容易觀察，如果他們被縮進2個空格。

樣式表

使用簡單的語法用於鏈接樣式表(the type attribute is not necessary) ：

<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;
}
  • 放置開口托架上的同一行的選擇器。
  • 左括號前使用一個空間。
  • 使用2個空格縮進。
  • 使用冒號加上每個屬性和值之間有一個空格。
  • 每個逗號或者分號後使用空間。
  • 使用分號每個屬性值對後，包括最後一個。
  • 只有當值包含空格周圍使用值引號。
  • 放在一個新行右括號，無前導空格。
  • 避免超過80個字符的行。

一個逗號，或者分號後添加一個空格，在所有類型的寫作的一般規則。

在HTML加載JavaScript

使用簡單的語法，用於加載外部腳本(the type attribute is not necessary) ：

<script src="myscript.js">

訪問使用JavaScript的HTML元素

使用的後果"untidy" HTML樣式，可能會導致JavaScript錯誤。

這兩個JavaScript語句會產生不同的結果：

例

var obj = getElementById("Demo")

var obj = getElementById("demo")
試一試»

如果可能的話，使用相同的命名約定(as JavaScript)的HTML。

訪問JavaScript的風格指南 。

使用小寫文件名

大多數Web服務器(Apache, Unix)的有關文件名大小寫敏感：

london.jpg不能作為London.jpg訪問。

其他Web服務器(Microsoft, IIS)是不區分大小寫：

london.jpg可以作為London.jpg或london.jpg訪問。

如果您使用大寫和小寫的組合，你必須非常一致。

如果您不敏感的情況下，要區分大小寫的服務器遷移，即使是小錯誤會打破你的網絡。

為了避免這些問題，始終使用小寫的文件名(if possible) 。

文件擴展名

HTML文件應該有一個.html擴展名(or .htm )

CSS文件應該有一個擴展名為.css。

JavaScript文件應該有一個.js擴展。

名為.htm和.html的區別

還有就是名為.htm和.html擴展名之間沒有什麼區別。 雙方將通過任何網絡瀏覽器或Web服務器被視為HTML。

差異是文化：

.htm "smells"早期DOS系統，其中系統限制了擴展到3個字符的。

.html "smells"是沒有這個限制的Unix操作系統。

技術差異

當URL沒有指定一個文件名(like http://www.w3ii.com/css/)服務器返回一個默認的文件名。 常見的默認文件名是index.html，index.htm的，default.html中，和Default.htm的。

如果您的服務器僅配置"index.html"作為默認的文件名，文件必須被命名為"index.html" ，而不是"index.htm."

然而，服務器可以與一個以上的默認文件名進行配置，通常您可以根據需要設置為默認的許多文件名。

總之，充分擴展HTML文件名為.html，並且有它不應該被用於任何理由。

❮上一頁 下一頁章❯