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元素可以使用大寫和小寫字母
推薦使用小寫字母
1.混合了大小寫的風(fēng)格是非常糟糕的
2.開發(fā)人員通常使用小寫
3.小寫風(fēng)格看起來更加清爽
4.小寫字母容易編寫
不推薦:
<SECTION>
<p>這是一個段落陡鹃。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個段落烘浦。</p>
</SECTION>
推薦:
<section>
<p>這是一個段落。</p>
</section>
關(guān)閉所有HTML元素
在HTML5中萍鲸，你不一定要關(guān)閉所有元素闷叉，但建議每個元素都要添加關(guān)閉標(biāo)簽
不推薦:
<section>
<p>這是一個段落。
<p>這是一個段落猿推。
</section>
推薦:
<section>
<p>這是一個段落片习。</p>
<p>這是一個段落捌肴。</p>
</section>
關(guān)閉空的HTML元素
在HTML5中蹬叭，空的HTML元素也不一定要關(guān)閉
可以這樣寫
<meta charset="utf-8">
也可以這么寫：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁面状知，使用這種風(fēng)格是非常好的秽五。
使用小寫屬性名
HTML5屬性名允許使用大寫和小寫字母
推薦使用小寫字母屬性名
1.同時使用大小寫是非常不好的習(xí)慣
2.開發(fā)人員通常使用小寫
3.小寫風(fēng)格看起來更加清爽
4.小寫字母容易編寫
不推薦：
<div CLASS="menu">
推薦：
<div class="menu">
屬性值
HTML5屬性值可以不用引號
屬性值推薦使用引號
1.如果屬性值含有空格需要使用引號
2.混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格
3.屬性值使用引號易于閱讀
以下實例屬性值包含空格饥悴，沒有使用引號坦喘，所以不能起作用:
<table class=table striped>
以下使用了雙引號，是正確的：
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性西设。 在圖片不能顯示時瓣铣，它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸贷揽，在加載時可以預(yù)留指定空間棠笑，減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號
等號前后可以使用空格禽绪。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過長
使用 HTML 編輯器蓖救，左右滾動代碼是不方便的洪规。
每行代碼盡量少于 80 個字符。
空行和縮進
不要無緣無故添加空行循捺。
為每個邏輯功能塊添加空行斩例，這樣更易于閱讀。
縮進使用兩個空格从橘，不建議使用 TAB念赶。
比較短的代碼間不要使用不必要的空行和縮進。
不必要的空行和縮進:
<body>
<h1>菜鳥教程</h1>
<h2>HTML</h2>
<p>
菜鳥教程洋满，學(xué)的不僅是技術(shù)晶乔，更是夢想。
菜鳥教程牺勾，學(xué)的不僅是技術(shù)正罢，更是夢想。
菜鳥教程驻民，學(xué)的不僅是技術(shù)翻具，更是夢想,
菜鳥教程，學(xué)的不僅是技術(shù)回还，更是夢想裆泳。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程，學(xué)的不僅是技術(shù)柠硕，更是夢想工禾。
菜鳥教程，學(xué)的不僅是技術(shù)蝗柔，更是夢想闻葵。
菜鳥教程，學(xué)的不僅是技術(shù)癣丧，更是夢想槽畔。
菜鳥教程，學(xué)的不僅是技術(shù)胁编，更是夢想厢钧。</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>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在標(biāo)準(zhǔn) HTML5 中， <html> 和 <body> 標(biāo)簽是可以省略的嬉橙。
以下 HTML5 文檔是正確的:
實例
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<h1>這是一個標(biāo)題</h1>
<p>這是一個段落早直。</p>
不推薦省略 <html> 和 <body> 標(biāo)簽。
<html> 元素是文檔的根元素市框，用于描述頁面的語言：
<!DOCTYPE html>
<html lang="zh">
聲明語言是為了方便屏幕閱讀器及搜索引擎霞扬。
省略 <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>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<body>
<p id="Demo">段落 1乒疏。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 會被替換
document.getElementById("demo").innerHTML = "HELLO饮焦。";
</script>
</body>
</html>
注意：現(xiàn)在省略head標(biāo)簽還不推薦使用
元數(shù)據(jù)
HTML5 中 <title> 元素是必須的怕吴，標(biāo)題名描述了頁面的主題:
<title>菜鳥教程</title>
標(biāo)題和語言可以讓搜索引擎很快了解你頁面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥教程</title>
</head>
HTML 注釋
注釋可以寫在 中:
比較長的評論可以在 中分行寫：
長評論第一個字符縮進兩個空格，更易于閱讀县踢。
樣式表
樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規(guī)則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長的規(guī)則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- 將左花括號與選擇器放在同一行转绷。
- 左花括號與選擇器間添加一個空格。
- 使用兩個空格來縮進硼啤。
- 冒號與屬性值之間添加一個空格议经。
- 逗號和符號之后使用一個空格。
- 每個屬性與值結(jié)尾都要使用分號谴返。
- 只有屬性值包含空格時才使用引號煞肾。
- 右花括號放在新的一行。
- 每行最多 80 個字符嗓袱。
| 在逗號和冒號后添加空格是常用的一個規(guī)則籍救。 |
在 HTML 中載入 JavaScript
使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
使用 JavaScript 訪問 HTML 元素
一個糟糕的 HTML 格式可能會導(dǎo)致 JavaScript 執(zhí)行錯誤。
以下兩個 JavaScript 語句會輸出不同結(jié)果:
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p id="Demo">段落 1渠抹。</p>
<p id="demo">段落 2蝙昙。</p>
<script>
// 只有段落 2 會被替換
document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>
HTML 中 JavaScript 盡量使用相同的命名規(guī)則。
使用小寫文件名
大多 Web 服務(wù)器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問奇颠。
其他 Web 服務(wù)器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
你必須保持統(tǒng)一的風(fēng)格篮幢，我們建議統(tǒng)一使用小寫的文件名大刊。
文件擴展名
HTML 文件后綴可以是 .html (或 .htm)为迈。
CSS 文件后綴是 .css 三椿。
JavaScript 文件后綴是 .js 。
.htm 和 .html 的區(qū)別
.htm 和 .html 的擴展名文件本質(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 沒有指定文件名 (如 http://www.runoob.com/css/), 服務(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"暴浦。
