基本原則
結(jié)構(gòu)碍讯、樣式属瓣、行為分離
盡量確保文檔和模板只包含HTML結(jié)構(gòu)，樣式都放到樣式表里棒仍，行為都放到腳本里悲靴。
縮進
統(tǒng)一兩個空格縮進(總之就是縮進統(tǒng)一即可)，不要使用Tab或者Tab莫其、空格混搭癞尚。
文件編碼
使用不帶BOM的UTF-8編碼。
- 在HTML中指定編碼
<meta charset="utf-8">
- 無需使用@charset指定樣式表的編碼乱陡，它默認(rèn)為UTF-8
一律使用小寫字母
<!-- Recommended -->
<!-- Not Recommended -->
<A HREF="/">HOME</A>
/* Recommended */
color: #e5e5e5;
/* Not Recommended */
color: #E5E5E5;
省略外鏈資源URL協(xié)議部分
省略外鏈資源(圖片及其它媒體資源)URL中的http/https協(xié)議浇揩，使URL成為相對地址，避免Mixed Content問題憨颠，減小文件字節(jié)數(shù)胳徽。
其它協(xié)議(ftp等)的URL不省略。
<!-- Recommended -->
<script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>
<!-- Not recommended -->
<script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>
/* Recommended */
.example {
background: url(//www.google.com/images/example);
}
/* Not recommended */
.example {
background: url(http://www.google.com/images/example);
}
統(tǒng)一注釋
HTML注釋
- 模塊注釋
<!-- 文章列表列表模塊 -->
<div class="article-list">
...
</div>
- 區(qū)塊注釋
<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->
CSS注釋
組件塊和子組件塊以及聲明塊之間使用一空行分隔爽彤，子組件塊之間三空行分隔养盗。
/* ==========================================================================
組件塊
============================================================================ */
/* 子組件塊
============================================================================ */
.selector {
padding: 15px;
margin-bottom: 15px;
}
/* 子組件塊
============================================================================ */
.selector-secondary {
display: block; /* 注釋*/
}
.selector-three {
display: span;
}
Javascript注釋
- 單行注釋
必須獨占一行。//后跟一個空格适篙，縮進與下一行被注釋說明的代碼一致往核。 - 多行注釋
避免使用/*...*/這樣的多行注釋。有多行注釋內(nèi)容時嚷节，使用多個單行注釋聂儒。 - 函數(shù)/方法注釋
- 函數(shù)/方法注釋必須包含函數(shù)說明，有參數(shù)和返回值時必須使用注釋標(biāo)識硫痰；
- 參數(shù)和返回值注釋必須包含類型信息和說明衩婚；
- 當(dāng)函數(shù)是內(nèi)部函數(shù)，外部不可訪問時碍论，可以使用 @inner 標(biāo)識谅猾；
/**
* 函數(shù)描述
*
* @param {string} p1 參數(shù)1的說明
* @param {string} p2 參數(shù)2的說明，比較長
* 那就換行了.
* @param {number=} p3 參數(shù)3的說明（可選）
* @return {Object} 返回值描述
*/functionfoo(p1, p2, p3){
var p3 = p3 || 10;
return {
p1: p1,
p2: p2,
p3: p3
};
}
文件注釋
文件注釋用于告訴不熟悉這段代碼的讀者這個文件中包含哪些東西鳍悠。 應(yīng)該提供文件的大體內(nèi)容, 它的作者, 依賴關(guān)系和兼容性信息税娜。如下:
/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@meizu.com (Firstname Lastname)
* Copyright 2015 Meizu Inc. All Rights Reserved.
*/
代碼驗證
- 使用
W3C HTML Validator來驗證你的HTML代碼的有效性; - 使用
W3C CSS Validator來驗證你的CSS代碼有效性;
代碼驗證不是最終目的，真的目的在于讓開發(fā)者在經(jīng)過多次的這種驗證過程后藏研，能夠深刻理解到怎樣的語法或?qū)懛?/strong>是非標(biāo)準(zhǔn)和不推薦的敬矩，即使在某些場景下被迫要使用非標(biāo)準(zhǔn)寫法，也可以做到心中有數(shù)蠢挡。
通用約定
標(biāo)簽
-
自閉合(self-closing)標(biāo)簽廊酣，無需閉合(例如：
imginputbrhr等)； -
可選的閉合標(biāo)簽(closing tag)氧急，需閉合(例如：
</li>或</body>)柒瓣； - 盡量減少標(biāo)簽數(shù)量洪燥；
<input type="text" name="title">
<ul>
<li>Style</li>
<li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
</span>
<!-- Recommended -->
Class與ID
- class應(yīng)以功能或內(nèi)容命名，不以表現(xiàn)形式命名；
- class與id單詞字母小寫，多個單詞組成時柳恐，采用中劃線
-分隔； - 使用唯一的id作為Javascript hook热幔，同時避免創(chuàng)建無樣式信息的class乐设；
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
屬性順序
HTML屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。
- id
- class
- name
- data-xx
- src, for, type, href
- title, alt
- aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a>
<input class="form-control" type="text">
引號
屬性的定義绎巨，統(tǒng)一使用雙引號近尚。
<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
嵌套
a不允許嵌套div 這種約束屬于語義嵌套約束，與之區(qū)別的約束還有嚴(yán)格嵌套約束场勤，比如a不允許嵌套a戈锻。
嚴(yán)格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束却嗡，瀏覽器大多會容錯處理舶沛，生成的文檔樹可能相互不太一樣嘹承。
語義嵌套約束
-
<li>用于<ul>或<ol>下窗价； -
<dd>,<dt>用于<dl>之下； -
<thead>,<tbody>,<tfoot>,<tr>,<td>用于<table>下叹卷；
嚴(yán)格嵌套約束
- inline-Level元素撼港，僅可以包含文本或其他inline-Level元素；
-
<a>里不可以嵌套交互式元素<a>骤竹、<button>帝牡、<select>等； -
<p>里不可以嵌套塊級元素<div>蒙揣、<h1>~<h6>靶溜、<p>、<ul>/<ol>/<li>懒震、<dl>/<dt>/<dd>罩息、<form>等。
布爾值屬性
HTML5規(guī)范中disabled个扰、 checked瓷炮、 selected等屬性不用設(shè)置值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
語義化
沒有css的HTML是一個語義系統(tǒng)而不是UI系統(tǒng)递宅。
通常情況下娘香，每個標(biāo)簽都是有語義的苍狰，所謂語義就是你的衣服分為外套、褲子烘绽、裙子淋昭、內(nèi)褲等，各自有對應(yīng)的功能和含義安接。所以你總不能把內(nèi)褲套在脖子上吧响牛。
此外，語義化的HTML結(jié)構(gòu)赫段，有助于機器（搜索引擎）理解呀打，另一方面多人協(xié)作時，能迅速了解開發(fā)者的意圖糯笙。
常見標(biāo)簽語義
| 標(biāo)簽 | 語義 |
|---|---|
<p> |
段落 |
<h1> <h2> <h3> ··· |
標(biāo)題 |
<ul> |
無序列表 |
<ol> |
有序列表 |
<blockquote> |
大段引用 |
<cite> |
一般引用 |
<b> |
為樣式加粗而加粗 |
<strong> |
為強調(diào)內(nèi)容而加粗 |
<i> |
為樣式傾斜而傾斜 |
<em> |
為強調(diào)內(nèi)容而傾斜 |
code |
代碼標(biāo)識 |
abbr |
縮寫 |
示例
將你構(gòu)建的頁面當(dāng)作一本書贬丛，將標(biāo)簽的語義對應(yīng)的其功能和含義；
- 書的名稱：
<h1> - 書的每個章節(jié)標(biāo)題：
<h2> - 章節(jié)內(nèi)的文章標(biāo)題：
<h3> - 小標(biāo)題/副標(biāo)題：
<h4> <h5> <h6> - 章節(jié)的段落：
<p>
HEAD
文檔類型
為每個HTML頁面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明给涕，這樣能夠確保在每個瀏覽器中擁有一致的表現(xiàn)豺憔。
<!DOCTYPE html>
語言屬性
為什么使用lang="zh-cmn=Hans"而不是我們通常寫的lang="zh-CN"呢？請參考:https://www.zhihu.com/question/20797118
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 簡體中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁體中文 -->
<html lang="zh-cmn-Hnat">
<!-- Enlish -->
<html lang="en">
字符編碼
- 以無BOM的utf-8編碼作為文件格式够庙；
- 指定字符編碼的meta必須是head的第一個直接子元素恭应；
<html>
<head>
<meta charset-"utf-8">
···
</head>
<body>
···
</body>
</html>
IE兼容模式
優(yōu)先使用最新版本的IE和Chrome內(nèi)核
<meta http-equiv="X-UA-Cimpatible" content="IE=edge,chrome=1">
