HTML 5 样式指南和代码约定
HTML 代碼約定
web 開(kāi)發(fā)者常常不確定在 HTML 中使用的代碼樣式和語(yǔ)法。
在 2000 年至 2010 年之間，許多 web 開(kāi)發(fā)者從 HTML 轉(zhuǎn)換為 XHTML。
通過(guò) XHTML，開(kāi)發(fā)者不得不編寫(xiě)有效的“格式良好的”代碼。
HTML5 在代碼驗(yàn)證時(shí)會(huì)更寬松一點(diǎn)。
通過(guò) HTML5，您必須創(chuàng)建屬于自己的最佳實(shí)踐、樣式指南和代碼約定。
智能且有未來(lái)保證
對(duì)樣式的合乎邏輯的使用，可以令其他人更容易理解和使用您的 HTML。
在未來(lái)，諸如 XML 閱讀器之類的程序，也許需要閱讀您的 HTML。
使用格式良好的“近似 XHTML 的”語(yǔ)法，能夠更智能。
注釋：請(qǐng)始終保持您的樣式智能、整潔、純凈、格式良好。
請(qǐng)使用正確的文檔類型
請(qǐng)始終在文檔的首行聲明文檔類型：
<!DOCTYPE html>如果您一貫堅(jiān)持小寫(xiě)標(biāo)簽，那么可以使用：
<!doctype html>請(qǐng)使用小寫(xiě)元素名
HTML5 允許在元素名中使用混合大小寫(xiě)字母。
我們推薦使用小寫(xiě)元素名：
- 混合大小寫(xiě)名稱并不好
- 開(kāi)發(fā)者習(xí)慣使用小寫(xiě)名（比如在 XHTML 中）
- 小寫(xiě)更起來(lái)更純凈
- 小寫(xiě)更易書(shū)寫(xiě)
不太好：
<SECTION> <p>This is a paragraph.</p> </SECTION>很糟糕：
<Section> <p>This is a paragraph.</p> </SECTION>還不錯(cuò)：
<section> <p>This is a paragraph.</p> </section>關(guān)閉所有 HTML 元素
在 HTML5 中，您不必關(guān)閉所有元素（例如 <p> 元素）。
我們建議關(guān)閉所有 HTML 元素：
看起來(lái)不好：
<section><p>This is a paragraph.<p>This is a paragraph. </section>看起來(lái)不錯(cuò)：
<section><p>This is a paragraph.</p><p>This is a paragraph.</p> </section>關(guān)閉空的 HTML 元素
在 HTML5 中，關(guān)閉空元素是可選的。
允許這樣：
<meta charset="utf-8">也允許這樣：
<meta charset="utf-8" />斜杠（/）在 XHTML 和 XML 中是必需的。
如果您期望 XML 軟件來(lái)訪問(wèn)您的頁(yè)面，保持這個(gè)習(xí)慣是個(gè)好主意。
使用小寫(xiě)屬性名
HTML5 允許大小寫(xiě)混合的屬性名。
我們建議使用小寫(xiě)屬性名：
- 混合屬性名并不好
- 開(kāi)發(fā)者習(xí)慣于使用小寫(xiě)屬性名（比如在 XHTML 中）
- 小寫(xiě)屬性名看情況更純凈
- 小寫(xiě)屬性名更易書(shū)寫(xiě)
看起來(lái)不好：
<div CLASS="menu">看起來(lái)不錯(cuò)：
<div class="menu">屬性值加引號(hào)
HTML5 允許不加引號(hào)的屬性值。
我們推薦屬性值加引號(hào)：
- 如果屬性值包含值，則必須使用引號(hào)
- 混合樣式絕對(duì)不好
- 加引號(hào)的值更易閱讀
這個(gè)屬性值無(wú)效，因?yàn)橹抵邪崭?#xff1a;
<table class=table striped>這樣是有效的：
<table class="table striped">必需的屬性
請(qǐng)始終對(duì)圖像使用?alt?屬性。當(dāng)圖像無(wú)法顯示時(shí)該屬性很重要。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">請(qǐng)始終定義圖像尺寸。這樣做會(huì)減少閃爍，因?yàn)闉g覽器會(huì)在圖像加載之前為圖像預(yù)留空間。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">空格和等號(hào)
等號(hào)兩邊的空格是合法的：
<link rel = "stylesheet" href = "styles.css">但是精簡(jiǎn)空格更易閱讀， But space-less is easier to read, and groups entities better together:
<link rel="stylesheet" href="styles.css">避免長(zhǎng)代碼行
當(dāng)使用 HTML 編輯器時(shí)，通過(guò)左右滾動(dòng)來(lái)閱讀 HTML 代碼很不方便。
請(qǐng)盡量避免代碼行超過(guò) 80 個(gè)字符。
空行和縮進(jìn)
請(qǐng)勿毫無(wú)理由地增加空行。
為了提高可讀性，請(qǐng)?jiān)黾涌招衼?lái)分隔大型或邏輯代碼塊。
為了提高可讀性，請(qǐng)?jiān)黾觾蓚€(gè)空格的縮進(jìn)。請(qǐng)勿使用 TAB。
請(qǐng)勿使用沒(méi)有必要的空行和縮進(jìn)。沒(méi)有必要在短的和相關(guān)項(xiàng)目之間使用空行，也沒(méi)有必要縮進(jìn)每個(gè)元素：
不必要：
<body><h1>Famous Cities</1><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</1> <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>LondonA</li><li>Paris</li><li>Tokyo</li> </ol>省略 <html> 和 <body>？
在 HTML5 標(biāo)準(zhǔn)中，能夠省略 <html> 標(biāo)簽和 <body> 標(biāo)簽。
以下代碼作為 HTML5 進(jìn)行驗(yàn)證：
示例
<!DOCTYPE html> <head><title>Page Title</title> </head><h1>This is a heading</h1> <p>This is a paragraph.</p>我們不推薦省略 <html> 和 <body> 標(biāo)簽。
<html> 元素是文本的根元素。它是規(guī)定頁(yè)面語(yǔ)言的理想位置。
<!DOCTYPE html> <html lang="en-US">對(duì)于可訪問(wèn)應(yīng)用程序（屏幕閱讀器）和搜索引擎，聲明語(yǔ)言很重要。
省略 <html> 或 <body> c可令 DOM 和 XML 軟件崩潰。
省略 <body> 會(huì)在老式瀏覽器（IE9）中產(chǎn)生錯(cuò)誤。
省略 <head>？
在 HTML5 標(biāo)準(zhǔn)中，<head> 標(biāo)簽也能夠被省略。
默認(rèn)地，瀏覽器會(huì)把 <body> 之前的所有元素添加到默認(rèn)的 <head> 元素。
通過(guò)省略 <head> 標(biāo)簽，您能夠降低 HTML 的復(fù)雜性：
示例
<!DOCTYPE html> <html> <title>Page Title</title><body><h1>This is a heading</h1><p>This is a paragraph.</p> </body></html>注釋：對(duì)于 web 開(kāi)發(fā)者，省略標(biāo)簽的做法是陌生的。建立規(guī)則需要時(shí)間。
元數(shù)據(jù)
<title> 元素在 HTML5 中是必需的。請(qǐng)盡可能制作有意義的標(biāo)題。
<title>HTML5 Syntax and Coding Style</title>為了確保恰當(dāng)?shù)慕忉?#xff0c;以及正確的搜索引擎索引，在文檔中對(duì)語(yǔ)言和字符編碼的定義越早越好：
<!DOCTYPE html> <html lang="en-US"> <head><meta charset="UTF-8"><title>HTML5 Syntax and Coding Style</title> </head>HTML 注釋
短注釋?xiě)?yīng)該在單行中書(shū)寫(xiě)，并在 <!-- 之后增加一個(gè)空格，在 <!-- 之前增加一個(gè)空格：
<!-- This is a comment -->長(zhǎng)注釋，跨越多行，應(yīng)該通過(guò) <!-- 和 --> 在獨(dú)立的行中書(shū)寫(xiě)：
<!-- 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. -->長(zhǎng)注釋更易觀察，如果它們被縮進(jìn)兩個(gè)空格的話。
樣式表
請(qǐng)使用簡(jiǎn)單的語(yǔ)法來(lái)鏈接樣式表（type 屬性不是必需的）：
<link rel="stylesheet" href="styles.css">短規(guī)則可以壓縮為一行，就像這樣：
p.into {font-family:"Verdana"; font-size:16em;}長(zhǎng)規(guī)則應(yīng)該分為多行：
body {background-color: lightgrey;font-family: "Arial Black", Helvetica, sans-serif;font-size: 16em;color: black; }- 開(kāi)括號(hào)與選擇器位于同一行
- 在開(kāi)括號(hào)之前用一個(gè)空格
- 使用兩個(gè)字符的縮進(jìn)
- 在每個(gè)屬性與其值之間使用冒號(hào)加一個(gè)空格
- 在每個(gè)逗號(hào)或分號(hào)之后使用空格
- 在每個(gè)屬性值對(duì)（包括最后一個(gè)）之后使用分號(hào)
- 只在值包含空格時(shí)使用引號(hào)來(lái)包圍值
- 把閉括號(hào)放在新的一行，之前不用空格
- 避免每行超過(guò) 80 個(gè)字符
注釋：在逗號(hào)或分號(hào)之后添加空格，是所有書(shū)寫(xiě)類型的通用規(guī)則。
在 HTML 中加載 JavaScript
請(qǐng)使用簡(jiǎn)單的語(yǔ)法來(lái)加載外部腳本（type 屬性不是必需的）：
<script src="myscript.js">通過(guò) JavaScript 訪問(wèn) HTML 元素
使用“不整潔”的 HTML 樣式的后果，是可能會(huì)導(dǎo)致 JavaScript 錯(cuò)誤。
這兩個(gè) JavaScript 語(yǔ)句會(huì)產(chǎn)生不同的結(jié)果：
var obj = getElementById("Demo")var obj = getElementById("demo")如果可能，請(qǐng)?jiān)?HTML 中使用（與 JavaScript）相同的命名約定。
請(qǐng)?jiān)L問(wèn) JavaScript 樣式指南。
使用小寫(xiě)文件名
大多數(shù) web 服務(wù)器（Apache、Unix）對(duì)文件名的大小寫(xiě)敏感：
不能以 london.jpg 訪問(wèn) London.jpg。
其他 web 服務(wù)器（微軟，IIS）對(duì)大小寫(xiě)不敏感：
能夠以 london.jpg 或 London.jpg 訪問(wèn) London.jpg。
如果使用混合大小寫(xiě)，那么您必須保持高度的一致性。
如果您從對(duì)大小寫(xiě)不敏感的服務(wù)器轉(zhuǎn)到一臺(tái)對(duì)大小寫(xiě)敏感的服務(wù)器上，這些小錯(cuò)誤將破壞您的網(wǎng)站。
為了避免這些問(wèn)題，請(qǐng)始終使用小寫(xiě)文件名（如果可以的話）。
文件擴(kuò)展名
HTML 文件名應(yīng)該使用擴(kuò)展名?.html（而不是?.htm）。
CSS 文件應(yīng)該使用擴(kuò)展名?.css。
JavaScript 文件應(yīng)該使用擴(kuò)展名?.js。
from:?http://www.w3school.com.cn/html/html5_syntax.asp
總結(jié)
以上是生活随笔為你收集整理的HTML 5 样式指南和代码约定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： HTML Input 属性
- 下一篇： HTML 标签 参考手册