原則
1.規(guī)范。保證代碼規(guī)范，趨html5,遠(yuǎn)xhtml，保證結(jié)構(gòu)表現(xiàn)行為相互分離。
2.簡潔。保證代碼的最簡化，避免多余的空格、空行，保持代碼的語義化，盡量使用具有語意的元素，避免使用樣式屬性和行為屬性。任何時(shí)候都要用盡量簡單、盡量少的元素解決問題。語義化：比如head元素來定義頭部標(biāo)題，p元素來定義文字段落，用a元素來定義鏈接錨點(diǎn)等等。
有根據(jù)有目的地使用html元素，對于可訪問性、代碼重用、代碼效率來說意義重大。
3.實(shí)用。遵循標(biāo)準(zhǔn)，但是不能以犧牲實(shí)用性為代價(jià)。
4.忠誠。選擇一套規(guī)范，然后始終遵循。不管代碼由多少人參與，都應(yīng)該看起來像一個(gè)人 的一樣。
語法
1.小寫。html標(biāo)簽、html屬性全部小寫。
2.嵌套。所有元素必須正確嵌套。
3.閉合。雙標(biāo)簽必須閉合，單標(biāo)簽（自關(guān)閉標(biāo)簽）不閉合。
錯(cuò)誤書寫：
<br/> <hr/>
正確書寫：
<br> <hr>
注釋
1.詳盡注釋。解釋代碼解決問題、解決思路、是否為新方案等。
2.模塊注釋。建議不使用模塊結(jié)束注釋。
html文件中的注釋：
<div class="news"> 建議不使用結(jié)束模塊的注釋，因?yàn)檫@樣太丑，并且加重文件負(fù)荷
jsp文件中的注釋：
<%-- --%>
3.待辦注釋。
<%-- TODO:待辦事項(xiàng) --%>
文檔
1.文檔類型使用html5標(biāo)準(zhǔn)文檔類型，文檔類型聲明之前，不允許出現(xiàn)任何非空字符。不允許添加<meta>強(qiáng)制改變文檔模式。
推薦使用 HTML5 的文檔類型聲明 <!DOCTYPE html> （建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如application/xhtml+xml 在瀏覽器中的應(yīng)用支持與優(yōu)化空間都十分有限）
2.html元素上指定lang屬性。顯示頁面語言，有助于語言合成工具來確定怎樣發(fā)音，以及翻譯工具決定使用的規(guī)則，等等。
3.指定明確的字符編碼。讓瀏覽器輕松、快速的確定適合網(wǎng)頁內(nèi)容的渲染方式。
4.IE兼容模式。Internet Explorer支持使用兼容性<meta>標(biāo)簽來指定使用什么版本的IE來渲染頁面。如果不是特殊需要，通常通過edge mode來通知IE使用最新的兼容模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
5.head部分的順序：a.<meta>元素，b.<title>元素，c.樣式表。
6.可以使用IE條件注釋的方式兼容IE，但是不要添加額外的樣式表。
錯(cuò)誤的書寫：`
`
正確的書寫：
<html class="ie8" lang="zh-cn"> <![endif] --> <html class="ie7" lang="zh-cn"> <![endif] -->
7.現(xiàn)在雙核瀏覽器：360、搜狗、QQ等瀏覽器可以讓網(wǎng)頁默認(rèn)使用webkit內(nèi)核渲染，代碼如下：
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> //使用chrome內(nèi)核渲染。沒有則以最高版本IE渲染
屬性
1.雙引號(hào)屬性值，不要使用單引號(hào)。
2.省略type屬性。使用style、link、script，不用指定type屬性，因?yàn)閠ext/css和text/javascript分別是他們的默認(rèn)值。
3.省略Boolean屬性值。Boolean屬性不用添加取值，disabled,checked,selected等。
4.省略u(píng)rl類屬性資源協(xié)議頭。
5.屬性順序。html屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。class->id,name,自定義屬性->data-->src,for,type,href->title,alt->aria-,role。
6.自定義屬性。自定義屬性格式為hyphone-開頭，后跟原生屬性，如：
<div hyphone-id="id" hyphone-name="name" hyphone-width="width"></div>
7.多媒體元素添加替代屬性。圖像增加alt屬性，音視頻增加替代文字。
元素
1.避免冗余標(biāo)簽。
2.段落文字用<p>，避免使用<br>。
3.列表項(xiàng)放在<ul>、<ol>、<dl>，不要使用一系列的<div>或<p>。
4.form button應(yīng)制定type類型，使用type="submit"、type="reset"或type="button"。
5.table布局中有效使用<thead>、<tbody>、<th>?？梢园?code><tfoot>放在<tbody>前提高加載速度。
格式
1.soft tab【2個(gè)英文格式的空格】。
2.嵌套縮進(jìn)。
3.刪除行位空格。
4.塊元素、列表元素、表格元素都放在新行。
5.inline元素視情況換行。
6.努力保持每行長度小于120列，如果太長可換行。
如果由于換行的空格引發(fā)了不可預(yù)計(jì)的問題，那將所有元素并入一行也是可以接受的，格式警告總好過錯(cuò)誤警告。
錯(cuò)誤書寫:`
<img class="block-element" id="unicorn"
src="http://hyphoneit.com/images/img.jpg" alt="unicron,
rainbows, poop and stuff"`
正確書寫:
`
<img
class="block-element"
id="unicorn"
src="http://hyphoneit.com/images/img.jpg"
alt="unicron, rainbows, poop and stuff"`
腳本加載
出于性能考慮,腳本異步加載很關(guān)鍵。
一段腳本放置在<head>內(nèi)，比如<script src="hyphone.js"></script>，其加載會(huì)一直阻塞DOM解析，直至它完全地加載和執(zhí)行完畢。這會(huì)造成頁面顯示的延遲。特別是一些重量級(jí)的腳本，對于用戶體驗(yàn)來說是一個(gè)巨大的影響。
異步加載腳本可緩解這種性能影響。
如果只需兼容IE10+，可將html5的async屬性加至腳本中，它可防止阻塞DOM的解析，甚至可以將腳本引用寫在<head>里也沒有影響。
如需兼容老舊的瀏覽器，實(shí)踐表明可使用動(dòng)態(tài)注入的腳本加載器?？梢钥紤]使用yepnope或labjs。注入腳本的一個(gè)問題是:一直要等到CSS對象文檔已就緒，它們才開始加載（短暫滴再CSS加載完畢之后），這就對需要及時(shí)觸發(fā)的JS造成一定的延遲，多少也影響了用戶體驗(yàn)。
綜上所述，兼容老舊瀏覽器（IE9-）時(shí)，應(yīng)遵循以下規(guī)則：
腳本引用寫在body結(jié)束標(biāo)簽之前，并帶上async屬性。
title,alt->aria-*,role。
>6.自定義屬性。自定義屬性格式為hyphone-開頭，后跟原生屬性，如：
>>>> <div hyphone-id="id" hyphone-name="name" hyphone-width="width"></div> >>
>7.多媒體元素添加替代屬性。圖像增加alt屬性，音視頻增加替代文字。
#元素
>1.避免冗余標(biāo)簽。
>2.段落文字用<p>，避免使用<br>。
>3.列表項(xiàng)放在<ul>、<ol>、<dl>，不要使用一系列的<div>或<p>。
>4.form button應(yīng)制定type類型，使用type="submit"、type="reset"或type="button"。
>5.table布局中有效使用<thead>、<tbody>、<th>。可以把<tfoot>放在<tbody>前提高加載速度。
#格式
>1.soft tab【2個(gè)英文格式的空格】。
>2.嵌套縮進(jìn)。
>3.刪除行位空格。
>4.塊元素、列表元素、表格元素都放在新行。
>5.inline元素視情況換行。
>6.努力保持每行長度小于120列，如果太長可換行。
>如果由于換行的空格引發(fā)了不可預(yù)計(jì)的問題，那將所有元素并入一行也是可以接受的，格式警告總好過錯(cuò)誤警告。
>錯(cuò)誤書寫:
>>>> <img class="block-element" id="unicorn" >> src="http://hyphoneit.com/images/img.jpg" alt="unicron, >> rainbows, poop and stuff" >> > >>
>正確書寫:
>>>> <img >> class="block-element" >> id="unicorn" >> src="http://hyphoneit.com/images/img.jpg" >> alt="unicron, rainbows, poop and stuff" >> > >>
#腳本加載
>出于性能考慮,腳本異步加載很關(guān)鍵。
>>一段腳本放置在<head>內(nèi)，比如<script src="hyphone.js"></script>，其加載會(huì)一直阻塞DOM解析，直至它完全地加載和執(zhí)行完畢。這會(huì)造成頁面顯示的延遲。特別是一些重量級(jí)的腳本，對于用戶體驗(yàn)來說是一個(gè)巨大的影響。
>異步加載腳本可緩解這種性能影響。
>>如果只需兼容IE10+，可將html5的async屬性加至腳本中，它可防止阻塞DOM的解析，甚至可以將腳本引用寫在<head>里也沒有影響。
如需兼容老舊的瀏覽器，實(shí)踐表明可使用動(dòng)態(tài)注入的腳本加載器。可以考慮使用yepnope或labjs。注入腳本的一個(gè)問題是:一直要等到CSS對象文檔已就緒，它們才開始加載（短暫滴再CSS加載完畢之后），這就對需要及時(shí)觸發(fā)的JS造成一定的延遲，多少也影響了用戶體驗(yàn)。
>綜上所述，兼容老舊瀏覽器（IE9-）時(shí)，應(yīng)遵循以下規(guī)則：
>>腳本引用寫在body結(jié)束標(biāo)簽之前，并帶上async屬性。
這雖然在老舊瀏覽器中不會(huì)異步加載腳本，單它只阻塞了body結(jié)束標(biāo)簽之后的DOM解析，這就大大降低了其阻塞影響。而在現(xiàn)代瀏覽器中，腳本將在DOM解析器發(fā)現(xiàn)body尾部的script標(biāo)簽才進(jìn)行加載，此時(shí)加載屬于異步加載，不會(huì)阻塞DOM解析。
推薦書寫方法：
<!DOCTYPE html> <head> <link rel="stylesheet" href="hyphone.css"> </head> <body> <script src="hyphone.js" async></script> </body> </html>
關(guān)注點(diǎn)分離
理解web中如何和為何區(qū)分不同的關(guān)注點(diǎn)，這很重要。這里的關(guān)注點(diǎn)主要指的是：信息（HTML結(jié)構(gòu)）、外觀（CSS）和行為（JavaScript）。為了使它們成為可維護(hù)的干凈整潔的代碼，我們要盡可能的將它們分離開來。
嚴(yán)格地保證結(jié)構(gòu)、表現(xiàn)、行為三者分離，并盡量使三者之間沒有太多的交互和聯(lián)系。即，盡量在文檔和模板中只包含結(jié)構(gòu)性的HTML；而將所有表現(xiàn)代碼，移入樣式表中；將所有動(dòng)作行為，移入腳本中。在此之外，為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。
清晰的分層意味著：
1.不使用超過一到兩張樣式表（common.css, self.css）
2.不使用超過一到兩個(gè)腳本（學(xué)會(huì)用合并腳本）
3.不使用行內(nèi)樣式（<style>.no-good{}</style>）
4.不在元素上使用style屬性（<hr style="border-top:5px solid black">）
5.不使用行內(nèi)腳本（<script>alert('no good')</script>）
不使用表象元素（<b>、<u>、<center>、<font>）
不使用表象class名（red，left，center）
錯(cuò)誤書寫：
<!DOCTYPE html> <head> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="grid.css"> <link rel="stylesheet" href="type.css"> <link rel="stylesheet" href="modules/user.css"> </head> <body> <h1 style="font-size:3rem"></h1> <b>海楓科技</b> <center>海楓科技</center> <script> alert('海楓科技'); </script> <div class="red">海楓科技</div> </body> </html>
正確書寫:
<!DOCTYPE html> <head> <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="modules/user.css"> </head> <body> <h1 class="title"></h1> <div class="sub-title">海楓科技</div> <span class="comment">海楓科技</span> <div class="important">海楓科技</div> <script src="hyphone.js" async><script> </body> </html>
HTML內(nèi)容至上
不要讓非內(nèi)容信息污染了你的HTML?，F(xiàn)在貌似有一種傾向：通過HTML來解決設(shè)計(jì)問題，這是顯然不對的。HTML就應(yīng)該只關(guān)注內(nèi)容。
HTML標(biāo)簽的目的，就是為了不斷地展示內(nèi)容信息。不要引入一些特定的HTML結(jié)構(gòu)來解決一些視覺設(shè)計(jì)問題
不要講img元素當(dāng)做專門用來做視覺設(shè)計(jì)的元素
不推薦的書寫：
<span class="text-box"> <span class="square"></span> Hellow Hyphone! </span> .text-box > .square{ display: inline-block; width: 1rem; height: 1rem; background-color: red; }
推薦書寫：
<span class="text-box"> Hellow Hyphone! </span> .text-box:before{ content: ""; display: inline-block; width: 1rem; height: 1rem; background-color: red; }
圖片和SVG圖形能被引入到HTML中的唯一理由是它們呈現(xiàn)出了與內(nèi)容相關(guān)的一些信息。
不推薦的書寫：
<span class="text-box">  Hellow Hyphone! </span>
推薦書寫：
<span class="text-box"> Hellow Hyphone! </span> .text-box:before{ content: ""; display: inline-block; width: 1rem; height: 1rem; background: url(square.svg) no-repeat; background-size: 100%; }
命名規(guī)范
文件名稱命名統(tǒng)一用小寫的英文字母，不得包含漢字空格數(shù)字和特殊符號(hào)等，遵循兩個(gè)原則：1.方便理解；2.方便查找。
不推薦
產(chǎn)品.html index_%.html about-us.html 1.html
推薦
product.html index.html about.html
