HTML5 程式碼規(guī)範(fàn)
使用正確的文件類型
文件類型宣告位於HTML文件的第一行：
<!DOCTYPE?html>
如果你想跟其他標(biāo)籤一樣使用小寫(xiě)，可以使用以下程式碼：
<!doctype?html>
#使用小寫(xiě)元素名稱
HTML5 元素名稱可以使用大寫(xiě)和小寫(xiě)字母。
推薦使用小寫(xiě)字母：
混合了大小寫(xiě)的風(fēng)格是非常糟糕的。
開(kāi)發(fā)人員通常使用小寫(xiě) (類似 XHTML)。
小寫(xiě)風(fēng)格看起來(lái)更清爽。
小寫(xiě)字母容易寫(xiě)。
<section>?
??<p>這是一個(gè)段落。 </p>
</section>
#關(guān)閉所有HTML 元素
在HTML5 中, 你不一定要關(guān)閉所有元素(例如<p> 元素)，但我們建議每個(gè)元素都要加上關(guān)閉標(biāo)籤。
<section>
??<p>這是一個(gè)段落。 </p>
??<p>這是一個(gè)段落。 </p>
</section>
#關(guān)閉空的HTML 元素
在HTML5 中, 空的HTML 元素也不一定關(guān)閉：
我們可以這麼寫(xiě)：
<meta?charset="utf-8">
也可以這麼寫(xiě)：
< ;meta?charset="utf-8"?/>
在XHTML 和XML 中斜線(/) 是必須的。
如果你期望 XML 軟體使用你的頁(yè)面，使用這個(gè)風(fēng)格是非常好的。
使用小寫(xiě)屬性名稱
HTML5 屬性名允許使用大寫(xiě)和小寫(xiě)字母。
我們推薦使用小寫(xiě)字母屬性名:
同時(shí)使用大小寫(xiě)是非常不好的習(xí)慣。
開(kāi)發(fā)人員通常使用小寫(xiě) (類似 XHTML)。
小寫(xiě)風(fēng)格看起來(lái)更清爽。
小寫(xiě)字母容易寫(xiě)。
<div?class="menu">
#屬性值
HTML5 屬性值可以不用引號(hào)。
屬性值我們建議使用引號(hào):
如果屬性值含有空格需要使用引號(hào)。
混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格。
屬性值使用引號(hào)易於閱讀。
<table?class="table striped">
#圖片屬性
圖片通常使用?alt?屬性。 當(dāng)圖片不能顯示時(shí)，它能取代圖片顯示。
<img?src="html5.gif"?alt="HTML5"?style="width:128px;height:128px">
定義好圖片的尺寸，在載入時(shí)可以預(yù)留指定空間，減少閃爍。
<img?src="html5.gif"?alt="HTML5"?style="width:128px;height:128px">
#空格和等號(hào)
等號(hào)前後可以使用空格。
<link?rel =?"stylesheet"?href =?"styles.css">
但我們推薦少用空格:
<link?rel="stylesheet" href="styles.css">
避免一行程式碼過(guò)長(zhǎng)
使用 HTML 編輯器，左右捲動(dòng)程式碼是不方便的。
每行程式碼盡量少於 80 個(gè)字元。
空白行和縮排
不要無(wú)緣無(wú)故添加空白行。
為每個(gè)邏輯功能區(qū)塊新增空白行，這樣更容易閱讀。
縮排使用兩個(gè)空格，不建議使用 TAB。
比較短的程式碼間不要使用不必要的空白行很縮排。
<body>
<h1>php中文網(wǎng)</h1>
<h2></h2>
<p>php中文網(wǎng)，學(xué)的不只是技術(shù)，更是夢(mèng)想。
php中文網(wǎng)，學(xué)的不只是技術(shù)，更是夢(mèng)想。
php中文網(wǎng)，學(xué)的不只是技術(shù)，更是夢(mèng)想。
php中文網(wǎng)，學(xué)的不只是技術(shù)，更是夢(mèng)想。 </p>
</body>
表格實(shí)例:
<table>
??<tr>
????<th>Name</th>
????<th>Description</th>#lt???<th>Description</th>#1; ;tr>
????<td>A</td>
????<td>Description of A</td>
??<>#lttd;/td>
?;B</td>
????<td>Description of B</td>
??</tr>
</table>
列表範(fàn)例:
#列表列表範(fàn)例#<ol>
??<li>London</li>
??<li>Paris</li>
??<li>Tokyo</li>
??<li>Tokyo</li>
##省略<html> 和<body>?
在標(biāo)準(zhǔn)HTML5 中， < html> 和<body> 標(biāo)籤是可以省略的。
以下 HTML5 文件是正確的:
<!DOCTYPE?html>
<head>
?<title>頁(yè)名</title>
</head>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。 </p>
不建議省略 <html> 和 <body> 標(biāo)籤。
#省略<head>?
在標(biāo)準(zhǔn)HTML5 中， <head>標(biāo)籤是可以省略的。
預(yù)設(shè)情況下，瀏覽器會(huì)將 <body> 之前的內(nèi)容加入到一個(gè)預(yù)設(shè)的 <head> 元素上。
省略 head 標(biāo)籤還不建議使用。
##HTML5 中<title> 元素是必須的，標(biāo)題名描述了頁(yè)面的主題:
<title>php中文網(wǎng)</title>
標(biāo)題和語(yǔ)言可以讓搜尋引擎很快了解你頁(yè)面的主題:
<!DOCTYPE?html>
<html?lang="zh">
<head>
??<meta?charset="UTF-8">
??<meta?charset="UTF-8">
??<# ;title>php中文網(wǎng)</title>
<!--?
? 這是較長(zhǎng)評(píng)論。 這是 一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。
? 這是 一個(gè)較長(zhǎng)評(píng)論 這是一個(gè)較長(zhǎng)評(píng)論。 這是 一個(gè)較長(zhǎng)評(píng)論。
長(zhǎng)評(píng)論第一個(gè)字元縮排兩個(gè)空格，更容易閱讀。
樣式表
樣式表使用簡(jiǎn)潔的語(yǔ)法格式( type 屬性不是必須的):
<link?rel="stylesheet"?href="styles.css">
#短的規(guī)則可以寫(xiě)成一行:
p.into?{font-family:?Verdana;?font-size: 16em;}
長(zhǎng)的規(guī)則可以寫(xiě)成多行:
body?{
??background-color:?lightgrey;
??font-family:?"Arial Black", Helvetica, sans- serif;
??font-size:?16em;
??color:?black;
}
將左花括號(hào)與選取者放在同一行。
左花括號(hào)與選擇器間新增以空格。
使用兩個(gè)空格來(lái)縮排。
冒號(hào)與屬性值之間新增已空格。
逗號(hào)和符號(hào)之後使用一個(gè)空格。
每個(gè)屬性與值結(jié)尾都要使用符號(hào)。
只有屬性值包含空格時(shí)才使用引號(hào)。
右花括號(hào)放在新的一行。
每行最多 80 個(gè)字元。
在逗號(hào)和分號(hào)後面加上空格是常用的一個(gè)規(guī)則。
在HTML 中載入JavaScript
使用簡(jiǎn)潔的語(yǔ)法載入外部的腳本檔( type 屬性不是必須的):
<script?src="myscript.js">
使用JavaScript 存取HTML 元素
一個(gè)糟糕的HTML 格式可能會(huì)導(dǎo)致JavaScript 執(zhí)行錯(cuò)誤。
以下兩個(gè)JavaScript 語(yǔ)句會(huì)輸出不同結(jié)果:
實(shí)例
var?obj = getElementById("Demo")
var?obj = getElementById(" demo")
試試看?
HTML 中JavaScript 盡量使用相同的命名規(guī)則。
使用小寫(xiě)檔名
大多 Web 伺服器 (Apache, Unix) 對(duì)大小寫(xiě)敏感： london.jpg 不能透過(guò) London.jpg 存取。
其他 Web 伺服器 (Microsoft, IIS) 對(duì)大小寫(xiě)不敏感： london.jpg 可以透過(guò) London.jpg 或 london.jpg 存取。
你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫(xiě)的檔案名稱。
#HTML 檔案後綴可以是?.html?(或r?. htm)。
CSS 檔案後綴是?.css?。
JavaScript 檔案後綴是?.js?。
.htm 和 .html 的區(qū)別
.htm 和 .html 的副檔名檔案本質(zhì)上是沒(méi)有區(qū)別的。瀏覽器和 Web 伺服器都會(huì)把它們當(dāng)作 HTML 檔案來(lái)處理。
差異在於：
.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或只能有三個(gè)字元。
在 Unix 系統(tǒng)中後綴沒(méi)有特別限制，一般用 .html。
技術(shù)上差異
如果一個(gè) URL 沒(méi)有指定檔案名稱 (如 http://ipnx.cn/css/), 伺服器會(huì)傳回預(yù)設(shè)的檔案名稱。通常預(yù)設(shè)檔名為 index.html, index.htm, default.html, 和 default.htm。
如果伺服器只配置了 "index.html" 作為預(yù)設(shè)文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是，通常伺服器可以設(shè)定多個(gè)預(yù)設(shè)文件，你可以根據(jù)需要設(shè)定預(yù)設(shè)文件嗎。
不管怎樣，HTML 完整的字尾是 ".html"。
