文章目錄
原則
- 儘量使用語義化標籤，少用div
- 標籤不要大寫，即便是doctype 標籤
- 用兩個空格來代替製表符（tab） – 這是唯一能保證在所有環境下獲得一致展現的方法。
- 嵌套元素應當縮進一次（即兩個空格）。
- 對於屬性的定義，永遠全部使用雙引號，絕不要使用單引號。
- 不要在自閉合（self-closing）元素的尾部添加斜線 — HTML5 規範 中明確說明斜線是可忽略的。
- 不要省略可選的結束標籤（closing tag）。
- 每行不得超過 120 個字符，過長的字符不利於閱讀。
<!doctype html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
文檔規範
引入CSS、JS
根據 HTML5 規範，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因爲 text/css 和 text/javascript 分別是它們的默認值。
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>
優化層級，減少標籤的數量
<!-- 定義一個圖片，這裏多了一個span標籤 -->
<span class="img">
<img src="...">
</span>
<!-- 更好的寫法-->
<img class="img" src="...">
啓用 IE Edge 模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
在 html 標籤上設置正確的 lang 屬性。
<html lang="zh-CN">
若頁面要適用於移動設備，需指定頁面的 viewport。
<meta name ="viewport" content ="initial-scale = 1.0">
頁面必須要有titile標籤。且必須作爲 head 的直接子元素，並緊隨 charset 聲明之後
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
屬性規範
屬性書寫順序
屬性順序應確保代碼的可讀性，按照其重要程度依次書寫，寧外id作爲唯一標識碼，儘量少用，如果使用也應儘量不要用於CSS選擇器
- class
- id,name
- data-*
- src, for, type, href, value
- title, alt
- role, aria-*
<a class="..." id="..." data-toggle="modal" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
布爾類型的屬性
布爾類型的屬性，不建議再添加屬性值
<input type="text" disabled>
<input type="checkbox" value="1" checked>
元素標籤規範
圖片標籤
- 圖片通常使用 alt 屬性。 在圖片不能顯示時，它能替代圖片顯示。
- 禁止 img 的 src 取值爲空。延遲加載的圖片也要增加默認的 src。
- 對有下載需求的圖片採用img標籤實現，無下載需求的標籤（icon、背景、代碼使用的圖片）採用CSS背景實現。
<img src = " ../../" alt = "圖片不能加載時提示">
表單
- 有文本標題的控件必須使用 label 標籤將其與其標題相關聯。
<label for="username">用戶名：</label>
<input type="textbox" name="username" id="username">
- 使用 button 元素時必須指明 type 屬性值。
- 當表單提交時，回車也可提交。
多媒體
- 當在現代瀏覽器中使用 audio 以及 video 標籤來播放音頻（mp3、wav、ogg）、視頻（mp4、WebM、ogg）時，應當注意格式。
- 在支持 HTML5 的瀏覽器中優先使用 audio 和 video 標籤來定義音視頻元素。
- 使用退化到插件的方式來對多瀏覽器進行支持。
- 只在必要的時候開啓音視頻的自動播放。
- 在 object 標籤內部提供指示瀏覽器不支持該標籤的說明。
常見標籤語義
| 標籤 | 語義 |
|---|---|
| p | 段落 |
| h1,h2,h3,h4,h5,h6 | 層級標題 |
| strong，em | 強調 |
| ins | 插入 |
| del | 刪除 |
| abbr | 縮寫 |
| code | 代碼標識 |
| cite | 引述來源作品的標題 |
| q | 引用 |
| blockquote | 一段或長篇引用 |
| ul | 無序列表 |
| ol | 有序列表 |
| dl,dt,dd | 定義列表 |
命名
- id、name屬性爲駝峯命名；且id、name同一頁面必須唯一
- class爲短橫分隔命名；單詞最好採用小寫
<div id="todayNews" class="container-fluid">
<input name="userName" />
</div>
註釋
註釋可以如下寫:
<!-- 這是註釋 -->
<div id="todayNews" class="container-fluid"></div>