HTML5 基礎(chǔ)教程

HTML5 API

HTML5 媒體

HTML5 圖形

HTML5 歷史記錄API HTML5 WebSocket

HTML(5) 代碼編寫規(guī)范

以下為您羅列出常見,并且經(jīng)常用到的html代碼規(guī)范,良好的編寫習(xí)慣有利于代碼后期維護(hù)和升級,提高工作效率,希望對大家有幫助

HTML 代碼約定

很多 Web 開發(fā)人員對 HTML 的代碼規(guī)范知之甚少。

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

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

而針對于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

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

<!doctype html>

使用小寫元素名

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

推薦使用小寫字母：

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

不推薦:

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

非常糟糕:

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

關(guān)閉所有 HTML 元素

在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素)，但我們建議每個元素都要添加關(guān)閉標(biāo)簽。

不推薦:

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

關(guān)閉空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉：

我們可以這么寫：

<meta charset="utf-8">

也可以這么寫：

<meta charset="utf-8" />

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

如果你期望 XML 軟件使用你的頁面，使用這種風(fēng)格是非常好的。

使用小寫屬性名

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

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

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

不推薦：

<div CLASS="Style">

屬性值

HTML5 屬性值可以不用引號。

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

如果屬性值含有空格需要使用引號。
混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格。
屬性值使用引號易于閱讀。

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

<table class=table striped>

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

<table class="table striped">

圖片屬性

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(cainiaoplus.com)</title> 
</head>
<body>
<img src="logo.png" alt="HTML5基礎(chǔ)教程">
</body>
</html>

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

<img src="logo.png" alt="HTML5基礎(chǔ)教程" style="width:128px;height:40px">

空格和等號

等號前后可以使用空格。

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

但我們推薦少用空格:

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

避免一行代碼過長

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

每行代碼盡量少于 80 個字符。

空行和縮進(jìn)

不要無緣無故添加空行。

為每個邏輯功能塊添加空行，這樣更易于閱讀。

縮進(jìn)使用兩個空格，不建議使用 TAB。

比較短的代碼間不要使用不必要的空行和縮進(jìn)。

不必要的空行和縮進(jìn):

        <body>
  <h1>菜鳥教程(cainiaoplus.com)</h1>
  <h2>HTML</h2>
  <p>
    基礎(chǔ)教程網(wǎng)，學(xué)好基礎(chǔ),才能走的更遠(yuǎn)。
    基礎(chǔ)教程網(wǎng)，學(xué)好基礎(chǔ),才能走的更遠(yuǎn)。
   基礎(chǔ)教程網(wǎng)，學(xué)好基礎(chǔ),才能走的更遠(yuǎn),
  基礎(chǔ)教程網(wǎng)，學(xué)好基礎(chǔ),才能走的更遠(yuǎn)。
  </p>
</body>

省略 <html> 和 <body>?

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

以下 HTML5 文檔是正確的:

示例:

<!DOCTYPE html>
<head>
<title>頁面標(biāo)題</title>
</head>
<h1>這是一個標(biāo)題</h1>
<p>這是一個段落。</p>

不推薦省略 <html> 和 <body> 標(biāo)簽。

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

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

聲明語言是為了方便屏幕閱讀器及搜索引擎。

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

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

省略 <head>?

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

默認(rèn)情況下，瀏覽器會將 <body> 之前的內(nèi)容添加到一個默認(rèn)的 <head> 元素上。

示例

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

現(xiàn)在省略 head 標(biāo)簽還不推薦使用。

元數(shù)據(jù)

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

<title>基礎(chǔ)教程網(wǎng)</title>

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>基礎(chǔ)教程網(wǎng)</title>
</head>

HTML 注釋

注釋可以寫在  中:

<!-- 這是注釋 -->

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

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

長評論第一個字符縮進(jìn)兩個空格，更易于閱讀。

樣式表

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

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

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

p.into {font-family: Verdana; font-size: 14px;}

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

body {
  background-color: yellow;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 14px;
  color: red;
}

將左花括號與選擇器放在同一行。
左花括號與選擇器間添加一個空格。
使用兩個空格來縮進(jìn)。
冒號與屬性值之間添加一個空格。
逗號和符號之后使用一個空格。
每個屬性與值結(jié)尾都要使用分號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。

在逗號和冒號后添加空格是常用的一個規(guī)則。

在 HTML 中載入 JavaScript

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

<script src="myscript.js">

使用 JavaScript 訪問 HTML 元素

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

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

示例

var obj =getElementById("Nhooo")
var obj = getElementById("nhooo")

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

使用小寫文件名

大多 Web 服務(wù)器 (Centos, *Unix) 對大小寫敏感： loading.jpg 不能通過 Loading.jpg 訪問。

其他 Web 服務(wù)器 (Window, IIS) 對大小寫不敏感： loading.jpg 可以通過 Loading.jpg 或 loading.jpg 訪問。

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

文件擴(kuò)展名

HTML 文件后綴可以是 .html (或 .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

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

.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒有區(qū)別的。瀏覽器和 Web 服務(wù)器都會把它們當(dāng)作 HTML 文件來處理。

區(qū)別在于：

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

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

技術(shù)上區(qū)別

如果一個 URL 沒有指定文件名 (如 /html/), 服務(wù)器會返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。

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

但是，通常服務(wù)器可以設(shè)置多個默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件名。

無論如何，HTML 完整的后綴是 ".html"。

HTML5 歷史記錄API HTML5 WebSocket