標籤
儘量遵循HTML標準和語義，但不要以失去實用性爲代價
- 自閉合標籤，無需閉合（
img, input, br, hr）； - 可選閉合標籤，需要閉合（
</li>, </body>）； - 儘量減少標籤的數量；
class與id的使用
- class應以功能或者內容命名，不以表現形式命名；
- class與id單詞
字母小寫，多個單詞組合時，採用中劃線-分割； - 使用唯一的id作爲JavaScript hook；
- 避免創建無樣式信息的class；
<!-- 錯誤示範 -->
<div class="j-hook left contentWraaper"></div>
<!-- 正確示範 -->
<div id="j-hook" class="content-wrapper"></div>
屬性的順序
屬性應當按照一定的順序出現，來保證易讀性。順序如下：
- id
- class
- name
- data-xxx
- src, for, type, ref
- title, alt
- aria-xxx, role
- 單雙引號
屬性的定義，統一使用雙引號。示範如下
<!-- 正確示範 -->
<div id="detail" class="red content-wrapper"></div>
- 嵌套規則
語義嵌套：瀏覽器會做容錯處理，生成的文檔樹可能互相不太一樣；
嚴格嵌套約束：在所有的瀏覽器都都不被允許；
-
語義嵌套約束
<li>用於<ul>或者<ol>下<dt><dd>用於<dl>下<thead><tbody><tbody><tr><td>放在<table>下
-
嚴格嵌套約束
- 行內元素下只能包含文本和行內元素
-
<a>標籤裏不可以嵌套交互元素，如<a>,<button>,<select>等
布爾值屬性
在HTML中，disabled, selected, checked等屬性不用設置值
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
- 語義化
- 通常情況下，每個標籤都是有語義的，所謂語義就是有各自的功能和含義；
- 語義化的HTML結構，有助於機器（搜索引擎）理解；
- 多人協作時，能夠快速理解別的開發者的用途；
腳本引用寫在 body 結束標籤之前；
儘量保證結構、表現、行爲三者分離，並儘量使三者之間沒有太多的交互和聯繫。儘量在文檔和模板中只包含結構性的 HTML；而將所有表現代碼，移入樣式表中；將所有動作行爲，JS腳本之中。
儘量不使用行內樣式；
在每一個塊狀元素，列表元素和表格元素後，加上一新空白行，並對其子孫元素進行縮進。內聯元素寫在一行內，塊狀元素還有列表和表格要另起一行。
任何時候都要儘量使用最少的標籤並保持最小的複雜度，儘量避免多餘的父元素。
儘量避免通過 JavaScript 生成的標籤，它讓內容變得不易查找、編輯，並且降低性能。
重要圖片一定要加上alt屬性; 給重要的元素和截斷的元素加上title;
-
標籤和含義
標籤 含義 <p>段落 <h1>--<h6>標題 <ul>無序列表 <ol>有序列表 <blockquote>大段引用 <cite>一般小引用 <b>爲樣式加粗 <strong>爲了強調而加粗 <i>爲樣式傾斜 <em>爲強調內容而傾斜 <code>代碼標識 <abbr>縮寫 文檔類型
HTML的第一行要加一個標準模式的聲明，這樣確保了瀏覽器有一致的表現形式
<!DOCTYPE html>
- 語言
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 簡體中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁體中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">
- 字符編碼
- 應以無BOM的utf-8編碼作爲文件格式
-
<meta charset="utf-8">必須作爲<head>的第一個直接子元素
- IE模式兼容
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- SEO優化
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- SEO -->
<title>Style Guide</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
</head>
- viewport
- viewport：指瀏覽器窗口內容區的大小，不包括工具條，選項卡等；
- width：瀏覽器寬度，輸出設備中可見區域寬度；
- device-width：設備分辨率寬度，輸出設備的屏幕可見寬度；
- initial-scale：初始縮放比例；
- maximum-scale：最大縮放比例；
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- favicon
在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico。爲了保證 favicon 可訪問，避免 404，必須遵循以下兩種方法之一：
- 在 Web Server 根目錄放置 favicon.ico 文件；
- 使用 link 指定 favicon；
<link rel="shortcut icon" href="path/to/favicon.ico">
- 綜上，head部分應當這樣寫：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<meta name="description" content="不超過150個字符">
<meta name="keywords" content="">
<meta name="author" content="name, [email protected]">
<!-- 爲移動設備添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 圖標 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>
!!! 以上規則僅供參考