HTML5代碼規範

時間 2019-11-11

標籤 html5 html 代碼規範欄目 HTML5 简体版

原文原文鏈接

HTML 代碼約定

不少 Web 開發人員對 HTML 的代碼規範知之甚少。css

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

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

而針對於 HTML5 ，咱們應該造成比較好的代碼規範，如下提供了幾種規範的建議。瀏覽器

使用正確的文檔類型

文檔類型聲明位於HTML文檔的第一行：服務器

1 <!DOCTYPE html>

若是你想跟其餘標籤同樣使用小寫，可使用如下代碼：編輯器

1 <!doctype html>

使用小寫元素名

HTML5 元素名可使用大寫和小寫字母。搜索引擎

推薦使用小寫字母：spa

混合了大小寫的風格是很是糟糕的。
開發人員一般使用小寫 (相似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦:

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

很是糟糕:

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

關閉全部 HTML 元素

在 HTML5 中, 你不必定要關閉全部元素 (例如 <p> 元素)，但咱們建議每一個元素都要添加關閉標籤。代碼規範

不推薦:code

1 <section>
2   <p>這是一個段落。
3   <p>這是一個段落。
4 </section>

關閉空的 HTML 元素

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

咱們能夠這麼寫：

1 <meta charset="utf-8">

也能夠這麼寫：

1 <meta charset="utf-8" />

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

若是你指望 XML 軟件使用你的頁面，使用這種風格是很是好的。

使用小寫屬性名

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

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

同時使用大小寫是很是很差的習慣。
開發人員一般使用小寫 (相似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦：

1 <div CLASS="menu">

屬性值

HTML5 屬性值能夠不用引號。

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

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

如下實例屬性值包含空格，沒有使用引號，因此不能起做用:

1 <table class=table striped>

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

1 <table class="table striped">

圖片屬性

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

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

定義好圖片的尺寸，在加載時能夠預留指定空間，減小閃爍。

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

空格和等號

等號先後可使用空格。

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

但咱們推薦少用空格:

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

避免一行代碼過長

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

每行代碼儘可能少於 80 個字符。

空行和縮進

不要平白無故添加空行。

爲每一個邏輯功能塊添加空行，這樣更易於閱讀。

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

比較短的代碼間不要使用沒必要要的空行和縮進。

沒必要要的空行和縮進:

 1 <body>
 2 
 3   <h1>菜鳥教程</h1>
 4 
 5   <h2>HTML</h2>
 6 
 7   <p>
 8     菜鳥教程，學的不只是技術，更是夢想。
 9     菜鳥教程，學的不只是技術，更是夢想。
10    菜鳥教程，學的不只是技術，更是夢想,
11     菜鳥教程，學的不只是技術，更是夢想。
12   </p>
13 
14 </body>

表格實例:

 1 <table>
 2   <tr>
 3     <th>Name</th>
 4     <th>Description</th>
 5   </tr>
 6   <tr>
 7     <td>A</td>
 8     <td>Description of A</td>
 9   </tr>
10   <tr>
11     <td>B</td>
12     <td>Description of B</td>
13   </tr>
14 </table>

列表實例:

1 <ol>
2   <li>London</li>
3   <li>Paris</li>
4   <li>Tokyo</li>
5 </ol>

省略 <html> 和 <body>?

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

如下 HTML5 文檔是正確的:

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

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

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

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

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

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

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

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

省略 <head>?

在標準 HTML5 中， <head>標籤是能夠省略的。

默認狀況下，瀏覽器會將 <body> 以前的內容添加到一個默認的 <head> 元素上。

 1 <!DOCTYPE html>
 2 <html>
 3 <title>頁面標題</title>
 4 
 5 <body>
 6   <h1>這是一個標題</h1>
 7   <p>這是一個段落。</p>
 8 </body>
 9 
10 </html>

如今省略 head 標籤還不推薦使用。

元數據

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

1 <title>菜鳥教程</title>

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

1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4   <meta charset="UTF-8">
5   <title>菜鳥教程</title>
6 </head>

HTML 註釋

註釋能夠寫在  中:

1 <!-- 這是註釋 -->

比較長的評論能夠在  中分行寫：

1 <!-- 
2   這是一個較長評論。 這是 一個較長評論。這是一個較長評論。
3   這是 一個較長評論 這是一個較長評論。 這是 一個較長評論。
4 -->

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

樣式表

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

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

短的規則能夠寫成一行:

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

長的規則能夠寫成多行:

1 body {
2   background-color: lightgrey;
3   font-family: "Arial Black", Helvetica, sans-serif;
4   font-size: 16em;
5   color: black;
6 }

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

在 HTML 中載入 JavaScript

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

1 <script src="myscript.js">

使用 JavaScript 訪問 HTML 元素

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

如下兩個 JavaScript 語句會輸出不一樣結果:

1 var obj = getElementById("Demo")
2 
3 var obj = getElementById("demo")

HTML 中 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。

摘抄於菜鳥教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。