html與css肯定是前端開發的入門第一課，相信大部分朋友都已經感覺自己很熟悉我們的這倆個好朋友了。但是大家是否瞭解其規範呢？今天我們一起看看Html的開發規範。
文章目錄
1.1通用約定
標籤
- 自閉合（self-closing）標籤，無需閉合 ( 例如： img input br hr 等 )；
- 可選的閉合標籤（closing tag），需閉合 ( 例如： 或 )；
- 儘量減少標籤數量；
<!-- 推薦的寫法 -->
<img class="avatar" src="xxx" alt="xxx">
<input type="text" name="title">
<ul>
<li>Style</li>
<li>Guide</li>
</ul>
<!-- 不推薦的寫法:原因是外面行內元素嵌套了img -->
<span class="avatar">
<img src="...">
</span>
Class 與 ID
- class 應以功能或內容命名，不以表現形式命名；
- class 與 id 單詞字母小寫，多個單詞組成時，採用中劃線-分隔；
- 使用唯一的 id 作爲 Javascript hook, 同時避免創建無樣式信息的 class；
<!-- 不推薦的寫法:以表現形式命名的class -->
<div class="j-hook left contentWrapper"></div>
<!-- 推薦的寫法 -->
<div id="j-hook" class="sidebar content-wrapper"></div>
屬性順序
HTML 屬性應該按照特定的順序出現以保證易讀性。
- id
- class
- name
- data-xxx
- src, for, type, href
- title, alt
- aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a>
<input class="form-control" type="text">
<img src="..." alt="...">
引號
屬性的定義，統一使用雙引號：
<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
嵌套
a 不允許嵌套 div這種約束屬於語義嵌套約束，與之區別的約束還有嚴格嵌套約束，比如a 不允許嵌套 a。
嚴格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多會容錯處理，生成的文檔樹可能相互不太一樣。
語義嵌套約束
- <li> 用於 <ul> 或 <ol> 下；
- <dd>, <dt> 用於 <dl> 下；
- <thead>, <tbody>, <tfoot>, <tr>, <td> 用於 <table> 下；
嚴格嵌套約束
- inline-Level 元素，僅可以包含文本或其它 inline-Level 元素;
- <a>裏不可以嵌套交互式元素<a>、<button>、==<select>==等;
- <p>裏不可以嵌套塊級元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、==<form>==等。
布爾值屬性
HTML5 規範中 disabled、checked、selected 等屬性不用設置值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
1.2語義化
沒有 CSS 的 HTML 是一個語義系統而不是 UI 系統。
通常情況下，每個標籤都是有語義的，所謂語義就是你的衣服分爲外套， 褲子，裙子，內褲等，各自有對應的功能和含義。所以你總不能把內褲套在脖子上吧。-- 一絲
此外語義化的 HTML 結構，有助於機器（搜索引擎）理解，另一方面多人協作時，能迅速瞭解開發者意圖。
常見標籤語義
示例
將你構建的頁面當作一本書，將標籤的語義對應的其功能和含義；
- 書的名稱：<h1>
- 書的每個章節標題: <h2>
- 章節內的文章標題: <h3>
- 小標題/副標題: <h4> <h5> <h6>
- 章節的段落: <p>
1.3HEAD
文檔類型
爲每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明， 這樣能夠確保在每個瀏覽器中擁有一致的表現。
<!DOCTYPE html>
語言屬性
爲什麼使用 lang=“zh-cmn-Hans” 而不是我們通常寫的 lang=“zh-CN” 呢? 請參考知乎上的討論: 網頁頭部的聲明應該是用 lang=“zh” 還是 lang=“zh-cn”？
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 簡體中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁體中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">
字符編碼
- 以無 BOM 的 utf-8 編碼作爲文件格式;
- 指定字符編碼的 meta 必須是 head 的第一個直接子元素；
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>
IE兼容模式
優先使用最新版本的IE 和 Chrome 內核
<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">
iOS圖標
- apple-touch-icon 圖片自動處理成圓角和高光等效果;
- apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖;
<!-- iPhone 和 iTouch，默認 57x57 像素，必須有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<!-- iPad，72x72 像素，可以沒有，但推薦有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
<!-- Retina iPad，144x144 像素，可以沒有，但推薦有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
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>