基本原則
結(jié)構(gòu)、樣式、行為分離
盡量確保文檔和模板只包含HTML結(jié)構(gòu)，樣式都放到樣式表里，行為都放到腳本里。
縮進(jìn)
統(tǒng)一兩個(gè)空格縮進(jìn)(總之就是縮進(jìn)統(tǒng)一即可)，不要使用Tab或者Tab、空格混搭。
文件編碼
使用不帶BOM的UTF-8編碼。
- 在HTML中指定編碼
<meta charset="utf-8">
- 無(wú)需使用@charset指定樣式表的編碼，它默認(rèn)為UTF-8
一律使用小寫(xiě)字母
<!-- Recommended -->
<!-- Not Recommended -->
<A HREF="/">HOME</A>
/* Recommended */
color: #e5e5e5;
/* Not Recommended */
color: #E5E5E5;
省略外鏈資源URL協(xié)議部分
省略外鏈資源(圖片及其它媒體資源)URL中的http/https協(xié)議，使URL成為相對(duì)地址，避免Mixed Content問(wèn)題，減小文件字節(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注釋
- 單行注釋
必須獨(dú)占一行。//后跟一個(gè)空格，縮進(jìn)與下一行被注釋說(shuō)明的代碼一致。 - 多行注釋
避免使用/*...*/這樣的多行注釋。有多行注釋內(nèi)容時(shí)，使用多個(gè)單行注釋。 - 函數(shù)/方法注釋
- 函數(shù)/方法注釋必須包含函數(shù)說(shuō)明，有參數(shù)和返回值時(shí)必須使用注釋標(biāo)識(shí)；
- 參數(shù)和返回值注釋必須包含類(lèi)型信息和說(shuō)明；
- 當(dāng)函數(shù)是內(nèi)部函數(shù)，外部不可訪問(wèn)時(shí)，可以使用 @inner 標(biāo)識(shí)；
/**
* 函數(shù)描述
*
* @param {string} p1 參數(shù)1的說(shuō)明
* @param {string} p2 參數(shù)2的說(shuō)明，比較長(zhǎng)
* 那就換行了.
* @param {number=} p3 參數(shù)3的說(shuō)明（可選）
* @return {Object} 返回值描述
*/functionfoo(p1, p2, p3){
var p3 = p3 || 10;
return {
p1: p1,
p2: p2,
p3: p3
};
}
文件注釋
文件注釋用于告訴不熟悉這段代碼的讀者這個(gè)文件中包含哪些東西。 應(yīng)該提供文件的大體內(nèi)容, 它的作者, 依賴(là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.
*/
代碼驗(yàn)證
- 使用
W3C HTML Validator來(lái)驗(yàn)證你的HTML代碼的有效性; - 使用
W3C CSS Validator來(lái)驗(yàn)證你的CSS代碼有效性;
代碼驗(yàn)證不是最終目的，真的目的在于讓開(kāi)發(fā)者在經(jīng)過(guò)多次的這種驗(yàn)證過(guò)程后，能夠深刻理解到怎樣的語(yǔ)法或?qū)懛?/strong>是非標(biāo)準(zhǔn)和不推薦的，即使在某些場(chǎng)景下被迫要使用非標(biāo)準(zhǔn)寫(xiě)法，也可以做到心中有數(shù)。
通用約定
標(biāo)簽
-
自閉合(self-closing)標(biāo)簽，無(wú)需閉合(例如：
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單詞字母小寫(xiě)，多個(gè)單詞組成時(shí)，采用中劃線
-分隔； - 使用唯一的id作為Javascript hook，同時(shí)避免創(chuàng)建無(wú)樣式信息的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">
引號(hào)
屬性的定義，統(tǒng)一使用雙引號(hào)。
<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
嵌套
a不允許嵌套div 這種約束屬于語(yǔ)義嵌套約束，與之區(qū)別的約束還有嚴(yán)格嵌套約束，比如a不允許嵌套a。
嚴(yán)格嵌套約束在所有的瀏覽器下都不被允許；而語(yǔ)義嵌套約束，瀏覽器大多會(huì)容錯(cuò)處理，生成的文檔樹(shù)可能相互不太一樣。
語(yǔ)義嵌套約束
-
<li>用于<ul>或<ol>下； -
<dd>,<dt>用于<dl>之下； -
<thead>,<tbody>,<tfoot>,<tr>,<td>用于<table>下；
嚴(yán)格嵌套約束
- inline-Level元素，僅可以包含文本或其他inline-Level元素；
-
<a>里不可以嵌套交互式元素<a>、<button>、<select>等； -
<p>里不可以嵌套塊級(jí)元素<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>
語(yǔ)義化
沒(méi)有css的HTML是一個(gè)語(yǔ)義系統(tǒng)而不是UI系統(tǒng)。
通常情況下，每個(gè)標(biāo)簽都是有語(yǔ)義的，所謂語(yǔ)義就是你的衣服分為外套、褲子、裙子、內(nèi)褲等，各自有對(duì)應(yīng)的功能和含義。所以你總不能把內(nèi)褲套在脖子上吧。
此外，語(yǔ)義化的HTML結(jié)構(gòu)，有助于機(jī)器（搜索引擎）理解，另一方面多人協(xié)作時(shí)，能迅速了解開(kāi)發(fā)者的意圖。
常見(jiàn)標(biāo)簽語(yǔ)義
| 標(biāo)簽 | 語(yǔ)義 |
|---|---|
<p> |
段落 |
<h1> <h2> <h3> ··· |
標(biāo)題 |
<ul> |
無(wú)序列表 |
<ol> |
有序列表 |
<blockquote> |
大段引用 |
<cite> |
一般引用 |
<b> |
為樣式加粗而加粗 |
<strong> |
為強(qiáng)調(diào)內(nèi)容而加粗 |
<i> |
為樣式傾斜而傾斜 |
<em> |
為強(qiáng)調(diào)內(nèi)容而傾斜 |
code |
代碼標(biāo)識(shí) |
abbr |
縮寫(xiě) |
示例
將你構(gòu)建的頁(yè)面當(dāng)作一本書(shū)，將標(biāo)簽的語(yǔ)義對(duì)應(yīng)的其功能和含義；
- 書(shū)的名稱(chēng)：
<h1> - 書(shū)的每個(gè)章節(jié)標(biāo)題：
<h2> - 章節(jié)內(nèi)的文章標(biāo)題：
<h3> - 小標(biāo)題/副標(biāo)題：
<h4> <h5> <h6> - 章節(jié)的段落：
<p>
HEAD
文檔類(lèi)型
為每個(gè)HTML頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的表現(xiàn)。
<!DOCTYPE html>
語(yǔ)言屬性
為什么使用lang="zh-cmn=Hans"而不是我們通常寫(xiě)的lang="zh-CN"呢？請(qǐng)參考:https://www.zhihu.com/question/20797118
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 簡(jiǎn)體中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁體中文 -->
<html lang="zh-cmn-Hnat">
<!-- Enlish -->
<html lang="en">
字符編碼
- 以無(wú)BOM的utf-8編碼作為文件格式；
- 指定字符編碼的meta必須是head的第一個(gè)直接子元素；
<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">
