本節(jié)我們列出了使用 html 5 過(guò)程中總結(jié)出來(lái)的良好的實(shí)踐 使用正確的文檔類型文檔類型聲明位于 html 文檔的第一行 <!DOCTYPE html> 如果習(xí)慣了全小寫，可以使用下面的代碼 <!doctype html> 使用小寫元素名HTML5 元素名可以使用大寫和小寫字母 但我們推薦全部都使用小寫 混合了大小寫的風(fēng)格是非常糟糕的 開發(fā)人員通常使用小寫 小寫風(fēng)格看起來(lái)更加清爽 小寫字母容易編寫 不推薦<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)閉 但我們推薦關(guān)閉空的 HTML 元素 可以這么寫 <Meta charset="utf-8"> 也可以這么寫: <Meta charset="utf-8" /> 在 XHTML 和 XML 中斜線 (/) 是必須的 如果想要 XML 軟件使用我們的頁(yè)面，使用這種風(fēng)格是非常好的 使用小寫屬性名HTML5 屬性名允許使用大寫和小寫字母 我們推薦使用小寫字母屬性名 同時(shí)使用大小寫是非常不好的習(xí)慣 開發(fā)人員通常使用小寫 小寫風(fēng)格看起來(lái)更加清爽 小寫字母容易編寫 不推薦<div CLASS="menu"> 推薦<div class="menu"> 屬性值HTML5 屬性值可以不用引號(hào) 但我們推薦對(duì)于屬性值需要用雙引號(hào)引起來(lái) 如果屬性值含有空格需要使用引號(hào) 混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格 屬性值使用引號(hào)易于閱讀 下面的范例屬性值包含空格，沒(méi)有使用引號(hào)，所以不能起作用 <table class=table striped> 下面的則使用了雙引號(hào)，是正確的 <table class="table striped"> 圖片屬性圖片要添加 alt 屬性，在圖片不能顯示時(shí)，它能替代圖片顯示 <img src="html5.gif" alt="HTML5" style="width:128px;"> 定義好圖片的尺寸，在加載時(shí)可以預(yù)留指定空間，減少閃爍 <img src="html5.gif" alt="HTML5" style="width: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è)字符 空行和縮進(jìn)不要無(wú)緣無(wú)故添加空行 為每個(gè)邏輯功能塊添加空行，這樣更易于閱讀 縮進(jìn)使用兩個(gè)空格，不建議使用 TAB 比較短的代碼間不要使用不必要的空行和縮進(jìn) 不必要的空行和縮進(jìn)<body> <h1>簡(jiǎn)單編程</h1> <h2>HTML</h2> <p> 簡(jiǎn)單編程，簡(jiǎn)單編程 簡(jiǎn)單編程，簡(jiǎn)單編程 簡(jiǎn)單編程，簡(jiǎn)單編程 簡(jiǎn)單編程，簡(jiǎn)單編程 </p></body> 推薦<body><h1>簡(jiǎn)單編程</h1><h2></h2> <p>簡(jiǎn)單編程，簡(jiǎn)單編程。簡(jiǎn)單編程，簡(jiǎn)單編程。簡(jiǎn)單編程，簡(jiǎn)單編程。簡(jiǎn)單編程，簡(jiǎn)單編程</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> <title>頁(yè)面標(biāo)題</title> </head> <h1>這是一個(gè)標(biāo)題</h1> <p>這是一個(gè)段落</p> 不推薦省略 <html> 和 <body>標(biāo)簽 <html> 元素是文檔的根元素，用于描述頁(yè)面的語(yǔ)言 <!DOCTYPE html> <html lang="zh"> 聲明語(yǔ)言是為了方便屏幕閱讀器及搜索引擎 省略 <html> 或 <body> 在 DOM 和 XML 軟件中會(huì)崩潰 省略 <body> 在舊版瀏覽器 (IE9) 會(huì)發(fā)生錯(cuò)誤 省略 ?HTML5 中， <head> 標(biāo)簽是可以省略的 默認(rèn)情況下，瀏覽器會(huì)將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上 <!DOCTYPE html> <html> <title>頁(yè)面標(biāo)題</title> <body> <h1>這是一個(gè)標(biāo)題</h1> <p>這是一個(gè)段落</p> </body> </html> 元數(shù)據(jù)HTML5 中 <title> 元素是必須的，標(biāo)題名描述了頁(yè)面的主題 <title>簡(jiǎn)單編程</title> 標(biāo)題和語(yǔ)言可以讓搜索引擎很快了解頁(yè)面的主題 <!DOCTYPE html> <html lang="zh"> <head> <Meta charset="UTF-8"> <title>簡(jiǎn)單編程</title> </head> HTML 注釋注釋可以寫在 <!-- 和 --> 中 <!-- 這是注釋 --> 比較長(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)論。 這是 一個(gè)較長(zhǎng)評(píng)論。--> 長(zhǎng)評(píng)論第一個(gè)字符縮進(jìn)兩個(gè)空格，更易于閱讀 樣式表樣式表使用簡(jiǎn)潔的語(yǔ)法格式，HTML5 中，type 屬性不是必須的 <link rel="stylesheet" href="styles.css"> 短的規(guī)則可以寫成一行 p.into {font-family: Verdana; font-size: 16em;}長(zhǎng)的規(guī)則可以寫成多行: body {
background-color: lightgrey;
font-family: "Arial Black",Helvetica,sans-serif;
font-size: 16em;
color: black;
}將左花括號(hào)與選擇器放在同一行 在逗號(hào)和冒號(hào)后添加空格是常用的一個(gè)規(guī)則 在 HTML 中載入 JavaScript使用簡(jiǎn)潔的語(yǔ)法來(lái)載入外部的腳本文件，在 HTML5 中 type 屬性不是必須的 <script src="myscript.js"></script> 使用 JavaScript 訪問(wèn) HTML 元素一個(gè)糟糕的 HTML 格式可能會(huì)導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤 下面的兩個(gè) JavaScript 語(yǔ)句會(huì)輸出不同結(jié)果 var obj = getElementById("Demo");var obj = getElementById("demo");HTML 中 JavaScript 盡量使用相同的命名規(guī)則 使用小寫文件名大多 Web 服務(wù)器 (Apache,Unix) 對(duì)大小寫敏感 london.jpg 不能通過(guò) London.jpg 訪問(wèn) 其他 Web 服務(wù)器 (Microsoft,IIS) 對(duì)大小寫不敏感 london.jpg 可以通過(guò) London.jpg 或 london.jpg 訪問(wèn) 你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫的文件名 文件擴(kuò)展名HTML 文件后綴可以是 .html (或 .htm ) CSS 文件后綴是 .css JavaScript 文件后綴是 .js .htm 和 .html 的區(qū)別.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒(méi)有區(qū)別的 瀏覽器和 Web 服務(wù)器都會(huì)把它們當(dāng)作 HTML 文件來(lái)處理 區(qū)別在于： .htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個(gè)字符 在 Unix 系統(tǒng)中后綴沒(méi)有特別限制，一般用 .html 技術(shù)上區(qū)別如果一個(gè) URL 沒(méi)有指定文件名， 服務(wù)器會(huì)返回默認(rèn)的文件名 通常默認(rèn)文件名為 index.html,index.htm,default.html,和 default.htm 如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件，那么必須將文件命名為 "index.html",而不是 "index.htm" 但是，通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件名 不管怎樣，HTML 完整的后綴是 ".html" |
