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