HTML5 程式碼規(guī)範(fàn)
HTML 程式碼約定
許多 Web 開發(fā)人員對(duì) HTML 的程式碼規(guī)格所知甚少。
在2000年至2010年，許多Web開發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)格。
而針對(duì)於 HTML5 ，我們應(yīng)該形成比較好的程式碼規(guī)範(fàn)，以下提供了幾個(gè)規(guī)範(fàn)的建議。
使用正確的文件類型
#文件類型宣告位於HTML文件的第一行：
<!DOCTYPE?html>
#如果你想跟其他標(biāo)籤一樣使用小寫，可以使用以下程式碼：
<!doctype?html>
使用小寫元素名稱
#HTML5 元素名稱可以使用大寫和小寫字母。
推薦使用小寫字母：
混合了大小寫的風(fēng)格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更清爽。
小寫字母容易寫。
不建議:
<SECTION>?
??< ;p>這是一個(gè)段落。 </p>
</SECTION>
#非常糟糕:
################ ##<Section>?###??<p>這是一個(gè)段落。 </p>###</SECTION>##################推薦:#########
<section>?
??<p>這是一個(gè)段落。 </p>
</section>
關(guān)閉所有HTML 元素
在HTML5 中, 你不一定要關(guān)閉所有元素(例如<p> 元素)，但我們建議每個(gè)元素都要加上關(guān)閉標(biāo)籤。
不建議:
#<section>
??<p>這是一個(gè)段落。
??<p>這是一個(gè)段落。
</section>
建議:
##<section> ??<p>這是一個(gè)段落。 </p>
??<p>這是一個(gè)段落。 </p>
</section>
#關(guān)閉空白的HTML 元素
#在HTML5 中, 空的HTML 元素也不一定要關(guān)閉：我們可以這麼寫：也可以這麼寫：<meta?charset="utf-8">
#在XHTML 和XML 中斜線(/) 是必須的。 如果你期望 XML 軟體使用你的頁面，使用這個(gè)風(fēng)格是非常好的。<meta?charset="utf-8"?/>
使用小寫屬性名稱
HTML5 屬性名稱允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時(shí)使用大寫寫是非常不好的習(xí)慣。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更清爽。
小寫字母容易寫。
不建議：
#<div?CLASS="menu">
推薦：
#<div?class="menu">
屬性值
#HTML5 屬性值可以不用引號(hào)。
屬性值我們推薦使用引號(hào):
如果屬性值含有空格需要使用引號(hào)。
混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格。
屬性值使用引號(hào)易於閱讀。
以下實(shí)例屬性值包含空格，沒有使用引號(hào)，所以不能起作用:
<table?class=table striped>
以下使用了雙引號(hào)，是正確的：
<table?class="table striped">
############################################################################################# ##############圖片屬性############圖片通常使用?alt?屬性。 當(dāng)圖片不能顯示時(shí)，它能取代圖片顯示。 ############<img?src="html5.gif"?alt="HTML5" >############定義好圖片的尺寸，在載入時(shí)可預(yù)留指定空間，減少閃爍。 ###
<img?src="html5.gif"?alt="HTML5"?style="width:128px;height:128px">
空格和等號(hào)
#等號(hào)前後可以使用空格。
<link?rel =?"stylesheet"?href =?"styles.css">##但我們建議少用空格:
避免一行程式碼過長(zhǎng)
使用HTML 編輯器，左右捲動(dòng)程式碼是不方便的。
每行程式碼盡量少於 80 個(gè)字元。
空行與縮排
#不要無緣無故加入空白行。為每個(gè)邏輯功能區(qū)塊新增空白行，這樣更容易閱讀。
??< ;h1>php中文網(wǎng)</h1>
縮排使用兩個(gè)空格，不建議使用 TAB。
比較短的程式碼間不要使用不必要的空白行很縮排。
不必要的空白行與縮排:
#<body>
??<h2>HTML</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>#################d:################################################################################<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í)例:
列表實(shí)例:<table>
??<tr>
????<th>Name</th>
????<th>Description</th>##????<th>Description</th>##????<th>Description</th>##????<th>Description</th>
\gt;##\Sgt; #??<tr>
????<td>A</td>
????<td>Description of A</td>
?<td>Description of A</td>##f ;td>B</td>
????<td>Description of B</td>
??</tr>
</table>
<ol>
??<li>London</li>??<li> Paris</li>??<li>Tokyo</li>
</ol>
省略<html> ; 和<body>?
在標(biāo)準(zhǔn)HTML5 中， <html> 和<body> 標(biāo)籤是可以省略的。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <h1>這是一個(gè)標(biāo)題</h1> <p>這是一個(gè)段落。</p>執(zhí)行程式嘗試
#不建議省略 <html> 和 <body> 標(biāo)籤。
<html> 元素是文件的根元素，用來描述頁面的語言：
<!DOCTYPE?html>< html?lang="zh">省略 <html> 或 <body> 在 DOM 和 XML 軟體中會(huì)崩潰。 省略 <body> 在舊版瀏覽器 (IE9)會(huì)發(fā)生錯(cuò)誤。
聲明語言是為了方便螢?zāi)婚喿x器及搜尋引擎。
省略 <head>?
# 在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)籤是可以省略的。 預(yù)設(shè)情況下，瀏覽器會(huì)將 <body> 之前的內(nèi)容加入到一個(gè)預(yù)設(shè)的 <head> 元素上。 執(zhí)行程式嘗試 提示：現(xiàn)在省略head 標(biāo)籤也不推薦使用。 來源資料 #HTML5 中<title> 元素是必須的，標(biāo)題名稱描述了頁面的主題: <title>php中文網(wǎng)</title> 標(biāo)題和語言可以讓搜尋引擎很快了解你頁面的主題: <!DOCTYPE?html> HTML註解 註解可以寫在<!-- 和--> 中: <!-- 這是註解--> 比較長(zhǎng)的評(píng)論可以在<!-- 和--> 中分行寫： <!--? 長(zhǎng)評(píng)論第一個(gè)字元縮排兩個(gè)空格，更容易閱讀。 樣式表 樣式表使用簡(jiǎn)潔的語法格式( type 屬性不是必須的): <link?rel="stylesheet"?href="styles.css"> 短的規(guī)則可以寫成一行: #p.into?{font-family:?Verdana;?font-size:?16em;} 長(zhǎng)的規(guī)則可以寫成多行: body?{ } 將左花括號(hào)與選擇器放在同一行。 左花括號(hào)與選擇器間新增以空格。 使用兩個(gè)空格來縮排。 逗號(hào)和符號(hào)之後使用一個(gè)空格。 每個(gè)屬性與值結(jié)尾都要使用符號(hào)。 只有屬性值包含空格時(shí)才使用引號(hào)。 每行最多 80 個(gè)字元。 #在HTML 中載入JavaScript ##使用簡(jiǎn)潔的語法來載入外部的腳本檔案( type 屬性不是必須的): 檔案副檔名 HTML 檔案後綴可以是?.html?(或 .htm)。 CSS 檔案後綴是?.css?。 JavaScript 檔案後綴是?.js?。 #.htm 和.html 的差異 #.htm 和.html 的副檔名檔案本質(zhì)上是沒有區(qū)別的。瀏覽器和 Web 伺服器都會(huì)把它們當(dāng)作 HTML 檔案來處理。 差異在於： .htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或只能有三個(gè)字元。 在 Unix 系統(tǒng)中後綴沒有特別限制，一般用 .html。 技術(shù)上區(qū)別 如果一個(gè)URL 沒有指定檔案名稱(如http://miracleart.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"。 <!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<body>
<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 會(huì)被替換
document.getElementById("demo").innerHTML = "HELLO。";
</script>
</body>
</html>
<html?lang="zh">
<head>
??<meta?charset="UTF -8">
??<title>php中文網(wǎng)路</title>
</head>
? 這是一個(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)論。 這是 一個(gè)較長(zhǎng)評(píng)論。
-->
??background-color:?lightgrey;
??font-family:?"Arial Black", Helvetica, sans-serif;
??font-size?16em;
#在逗號(hào)和分號(hào)後面加上空格是常用的一個(gè)規(guī)則。
