HTML簡史

TML，是Hyper Text Markup Language的縮寫，即“超文本標記語言”的縮寫。

1、HTML的面世

介紹HTML之前，先介紹一下SGML。

SGML，是Standard Generalized Markup Language的縮寫，中文一般譯為“標準通用標記語言”，SGML是一個標準，定義了如何對文檔進行注釋的規范，讓我們了解文檔的指定片段的含義。

HTML由CERN(歐洲粒子物理研究所)的科學家Tim Berners-Lee(中文一般直譯為“提姆.伯納斯李”)和他的同事根據SGML創建，HTML可以說是SGML的一個應用。

1991年，Tim Berners-Lee開發出了萬維網(World Wide Web)，開發出了簡單的瀏覽器，用于展示HTML(瀏覽軟件)，這是HTML第一次展示在大眾的面前。

2、HTML與常見的計算機編程語言的差別

和我們常見的計算機編程語言，例如C語言、Java語言、Python語言相比，HTML本身只是一個標記語言，也就是說，HTML是一個帶有HTML標記的文本文件，HTML標記告訴瀏覽器如何進行展示，文本則是展示的內容。

3、HTML1.0、HTML2.0、HTML3.2、HTML4.0標準

早在上個世紀60年代末，互聯網的雛形APARNET就已經出現。互聯網出現后，出現了大量的應用，例如文件服務器、遠程登錄、電子郵件、新聞組，但互聯網的使用者僅限于大學的計算機專業學生和專業技術人員，普通的使用者基本上是望而卻步。

但萬維網和HTML的橫空出世，使得互聯網的使用界面煥然一新，讓普通的電腦使用者可以輕松使用互聯網，互聯網用戶開始急劇增長。

HTML出現后，各種瀏覽器軟件不斷出現，為了規范各種瀏覽器軟件對HTML的支持，IETF（互聯網工程工作組）和W3C（萬維網聯盟）開始制定HTML規范：

1993年6月，IETF發布HTML草案，該草案被稱為HTML1.0規范；

1995年11月，IETF發布HTML的RFC，編號為RFC1866，該RFC被稱為HTML2.0規范；

1996年1月，W3C發布HTML3.2標準，該標準被各瀏覽器廠商廣泛支持；

1997年12月，W3C發布HTML4.0標準。

4、HTML4.01和XHTML標準推出

HTML出現后，受到了大量非計算機專業開發者的歡迎，為了迎合廣大HTML開發者，瀏覽器對開發者提供的HTML文檔非常寬容，以至于我們很難寫出一個“錯誤的HTML文檔”。

例如，我們編寫了一個沒有任何HTML標簽的文檔：

This is my html.

There is no tag.

我們將這個文檔保存為welcome.html文件，鼠標雙擊這個文件，瀏覽器可以顯示該文件：

對HTML開發者的迎合，導致HTML開發者越來越隨意，由此出現了兩個嚴重的問題：

（1）HTML的發展越來越混亂；

（2）各瀏覽器軟件的兼容性越來越差。

為了讓開發者編寫更嚴格的HTML代碼，W3C在1999年12月份發布了HTML4.01規范，接著在2000年1月份發布XHTML規范，這兩者差別不大。

XHTML，即可擴展HTML。XHTML這個名詞，是XML和HTML的混合體，表示制定HTML規范時，參考XML標準：

（1）一個HTML文檔有且僅有一個根元素，即<html>元素；

（2）每個元素都有開始標簽和結束標簽；

（3）標簽之間可以嵌套，但是不能出現交叉的情況，即不能出現如下的嵌套關系：

<p>
<div>
hello, everyone.
</p>
</div>

（4）元素的屬性必須有屬性值，而且屬性值要求用引號括起來。例如下面的屬性值是不可接受的：

<input type="checkbox" checked />

5、HTML4.01和XHTML標準的尷尬

從我們軟件開發者的角度來看，HTML4.01和XHTML是一份非常優秀的標準。但是，這兩個標準發布后，直接被開發者和瀏覽器廠商無視。

根據統計，全球互聯網500強的網站，只有不到8%的網站滿足HTML4.01和XHTML標準。大廠網站尚且如此，普通網站就更加不用說了。

這個結果，無疑給W3C組織潑了一盆冷水，W3C再也沒有興趣對HTML制定新的標準。從此，HTML標準好像進入了一個黑暗的中世紀，下一個標準HTML5的推出，已經是14年零9個月之后的事了。

6、HTML5的發布

考慮到前面的HTML系列標準推出后，無論是對瀏覽器廠商，還是對HTML開發者，影響都不大。于是，一個叫WHATWG的組織，也就是Web Hypertext Application Technology Working Group（Web超文本應用技術工作組）開始制定一種新的規范，認為現存的HTML網頁都是合法的。

WHATWG的努力，得到了廣大開發者和瀏覽器廠商的支持，W3C最終認可了WHATWG的努力，并根據這個理念推出了HTML5標準。

HTML5標準推出后，大部分瀏覽器廠商第一時間宣布支持，廣大前端開發者也專門花時間學習HTML5標準，如此熱烈的支持，對于HTML系列標準來說，是前所未有的事情！

瀏覽器占有率第一的微軟IE，略顯傲慢，沒有支持HTML5，竟然被大量前端開發者拋棄，面對市場份額的急劇下滑，微軟公司連忙宣布，新的瀏覽器Edge將會支持HTML5。

法

用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
嵌套元素應當縮進一次（即兩個空格）。
對于屬性的定義，確保全部使用雙引號，絕不要使用單引號。
不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規范中明確說明這是可選的。
不要省略可選的結束標簽（closing tag）（例如，</li> 或 </body>）。

實例：

<!DOCTYPE html><html>

HTML5 doctype

為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的展現。

實例：

<!DOCTYPE html><html>

語言屬性

根據 HTML5 規范：

強烈建議為 html 根元素指定 lang 屬性，從而為文檔設置正確的語言。這將有助于語音合成工具確定其所應該采用的發音，有助于翻譯工具確定其翻譯時所應遵守的規則等等。

lang 屬性的知識可以從此規范中了解。

這里列出了語言代碼表。

<html lang="zh-CN">

IE 兼容模式

IE 支持通過特定的 <meta> 標簽來確定繪制當前頁面所應該采用的 IE 版本。除非有強烈的特殊需求，否則最好是設置為 edge mode，從而通知 IE 采用其所支持的最新的模式。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

字符編碼

通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。

<head>

引入 CSS 和 JavaScript 文件

根據 HTML5 規范，在引入 CSS 和 JavaScript 文件時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分別是它們的默認值。

HTML5 spec links

Using link
Using style
Using script

<!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- In-document CSS --><style>

實用為王

盡量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的標簽并保持最小的復雜度。

屬性順序

HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。

<a class="..." id="..." data-modal="toggle" href="#">

布爾（boolean）型屬性

布爾型屬性可以在聲明時不賦值。XHTML 規范要求為其賦值，但是 HTML5 規范不需要。

更多信息請參考 WhatWG section on boolean attributes：

元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。

如果一定要為其賦值的話，請參考 WhatWG 規范：

如果屬性存在，其值必須是空字符串或 [...] 屬性的規范名稱，并且不要在首尾添加空白符。

簡單來說，就是不用賦值。

<input type="text" disabled><input type="checkbox" value="1" checked><select>

減少標簽的數量

編寫 HTML 代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。請看下面的案例：

<!-- Not so great --><span class="avatar">

JavaScript 生成的標簽

通過 JavaScript 生成的標簽讓內容變得不易查找、編輯，并且降低性能。能避免時盡量避免。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

TML配置

文件應以“”首行頂格開始，推薦使用“”。
必須申明文檔的編碼charset，并且使用UTF-8編碼。
移動端必須使用 viewport 適配
頁面title是極為重要的不可缺少的一項。

以下是一個標準的html結構

html復制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- 頁面標題不能為空 -->
    <title>京東商城:商家后臺</title>
    <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     
    <!-- 樣式文件 以外鏈形式在此處引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
  </head>
  <body>
    <!-- 頁面主體 -->
    <div class="warp">
      <header>頂部內容區域，比如：菜單頭</header>
      <div class="content">主內容區域</div>
      <footer>頂部頁尾區域，比如：備案號</footer>
    </div>
     
    <!-- js文件 在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

主框架(jQuery,vue,react,angular等) 避免混合使用

避免多個框架混合使用，在同一個工程里面要保持主框架的一致性，多框架同時使用會造成代碼混亂，后期會變得越來越難維護。

Css開發規范

1、全局樣式禁止使用!important

2、避免使用導入式引入css樣式文件；

css復制代碼<style type="text/css">
  @import url(./demo.css);
</style>

未使用的js/css禁止引用

歷史頁面會有一些功能下線，在去除頁面初始化的js語句的同時，也要將依賴的js文件刪除，避免資源加載浪費

文件必須使用gzip壓縮

開啟Gzip壓縮功能，可以使網站的css、js 、xml、html 文件在傳輸時進行壓縮，提高訪問速度

api接口中，無用字段占傳輸比例30%以上時，刪除無用字段

在開發過程中，發現無用字段占傳輸比例30%以上時，請進行返回數據的刪減，加快數據請求速度

關于圖片壓縮

上傳圖片之前一定要做圖片的無損壓縮，節省網絡流量,推薦網站tinypng

HTML的標準結構

html復制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- keywords 關鍵詞 和 Description 頁面描述 便于搜索引擎檢索，不強制使用 -->
    <meta name="Keywords" Content=”關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>
    <meta name="Description" Content=”頁面描述″>
    <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <!-- 推薦手動引入指定路徑 favicon  -->
    <link rel="shortcut icon" href="path/to/favicon.ico">
    <!-- 樣式文件必須以外鏈形式在此處引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
    <!-- 內聯樣式 -->
    <style type="text/css">
      .warp {
        margin: 0;
        padding: 0;
      }
    </style> -->
    <!-- 頁面標題不能為空 -->
    <title>頁面標題</title>
  </head>
  <body>
  <!-- 頁面主體 -->
    <div class="warp">
    <header>頂部內容區域，比如：菜單頭</header>
    <div class="content">主內容區域</div>
    <footer>頂部頁尾區域，比如：備案號</footer>
    </div>
 
    <!-- JavaScript 文件在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

不同模塊區域可使用簡要備注標識模塊內容
HTML 標簽語義化使結構清晰，比如：
CSS 外鏈引入必須放在中
JS 外鏈引入必須放在中
省略圖像、媒體文件、樣式表和腳本等嵌入式資源 URL 協議頭部聲明 ( http:// , https:// )，用//代替。
favicon 在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免404，必須遵循以下兩種方法之一：1。在 Web Server 根目錄放置 favicon.ico 文件，2。使用 link 指定 favicon

HTML標簽使用守則

標簽小寫

原生 HTML 標簽元素小寫使用，自定義組件使用小駝峰命名（自定義標簽避免和原生標簽同名）

html復制代碼<!-- 錯誤 ? -->
<DIV></DIV>
<SPAN></SPAN>  
 
<!-- 正確 ? -->
<div></div>  
<p></p> 
 
<!-- 自定義組件 -->
<shareDialog><shareDialog/>

套用規則

禁止在行內元素中嵌套塊級元素??

html復制代碼<!-- 錯誤的嵌套 ? -->
<span><div></div></span>  
<i><p></p></i>     
 
<!-- 正確的嵌套 ? -->
<div><span></span></div>  
<p><i></i></p>

更多標簽使用規則介紹請查看尾部附錄

屬性定義

定義屬性賦值時，使用雙引號，禁止單雙引號混用

html復制代碼<!-- 錯誤的定義 ? -->
<input id="formTitle" type='text' placeholder="請輸入標題">   
 
<!-- 正確的定義 ? -->
<input id="formTitle" type="text" placeholder="請輸入標題" data="formTitle">

正確閉合

除自閉合標簽外，所有標簽都需正確的編寫閉合標簽

常用自閉合標簽： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

ID、Class 命名使用規范

ID 和 Class 取通用且有意義的名字；

使用連字符 - 作為 ID、Class 名稱界定符，不要駝峰命名法和下劃線；

避免選擇器嵌套層級過多，盡量少于 3 級；

使用命名空間防止命名沖突，利于維護；

css復制代碼/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
 
/* 推薦: 明確詳細 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}

避免選擇器和 Class、ID 疊加使用
聲明順序，相關屬性應為一組，建議遵循：定位布局屬性 -> 盒模型屬性 -> 文本屬性 -> 視覺屬性 -> 其他屬性
對于 JS 操作相關選擇器前面需加上特殊應用標識前綴

css復制代碼/* 標準的聲明順序 */
.declaration-order {
  /* 布局屬性 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* 盒模型屬性 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
 
  /* 文本屬性 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;
 
  /* 視覺屬性 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
 
  /* 其他屬性 */
  cursor: pointer;
}

圖片相關使用規范

<img/>標簽守則

src 屬性不能為空，需添加默認值（托底圖片路徑）
為重要圖片添加 alt 屬性，當無法顯示圖像時，瀏覽器將顯示替代文本，便于 SEO 及用戶閱讀
為圖片標簽增加 width 和 height 屬性，避免圖片加載從無到有，導致頁面抖動
大量圖片流資源，使用懶加載技術按需加載

html復制代碼<!-- 禁止 src 取值為空 -->
<img src="" />
 
<!-- 推薦 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />

圖片資源守則

大小

尺寸小于 50 ×?50 的請使用字體圖標（iconfont）或者將多個圖標合成一張大圖使用（雪碧圖）尺寸大于 50 ×?50 的圖片，引入前先使用在線壓縮對其進行壓縮，圖片大小盡量控制在 300kb 以內

倍率

PC端、移動端推薦使用 2倍圖 (@2x），避免設備分辨率過高，圖片顯示失真模糊如有兼容 iPad 場景等特殊場景，可使用 3倍圖（@3x）

html復制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>

2倍圖：圖片展示區域大小 : 圖片實際尺寸=1 ：2

無論使用幾倍圖，圖片大小都需遵守上條限制

如遇圖片倍圖問題，可咨詢 @UI童鞋

性能守則

避免不必要的 DOM 操作瀏覽器遍歷 DOM 元素的代價是昂貴的。最簡單優化 DOM 樹查詢的方案是，當一個元素出現多次時，將它保存在一個變量中，來避免多次查詢 DOM 樹。

js復制代碼/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul=document.getElementsByTagName('ul')[0],
  lis=document.getElementsByTagName('ul')[0].getElementsByTagName('p')
   
/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul=document.getElementsByTagName('ul')[0],
  lis=ul.getElementsByTagName('li')

異步加載第三方內容當你無法保證嵌入第三方內容比如埋點、調研等資源正常工作的時候，你需要考慮用異步加載這些代碼，避免阻塞整個頁面加載。
減少標簽的數量編寫 HTML 代碼時，盡量避免多余的標簽嵌套，避免 DOM樹的冗余
控制靜態資源數量

1個頁面中建議CSS文件不要超過3個（1個組件庫樣式文件、1個項目公共樣式、1個頁面樣式）； JS文件不要超過5個（1個框架文件、1個組件庫文件、1個項目公共庫文件、1個頁面腳本文件、1個埋點文件）。

編碼建議

縮進使用 2個空格樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義使用 '' 單引號

其他建議

保持一定的代碼潔癖，尤其在大型項目中

代碼邏輯應當直截了當，清晰易讀，保持與業務邏輯與代碼一一對應關系，減少邏輯錯誤的可能性，降低二次開發成本；
刪除過期無用代碼，減少代碼過大，造成不必要的維護成本
代碼盡量復用，擁有組件化思想
代碼命名合理化，即使不寫注釋情況下，也可以讓其他開發人員一眼明白意思
性能調至最優，降低耦合度，避免別人做不合理的優化時而造成的混亂
整潔的模塊邊界，明確的劃分模塊之間的邏輯邊界，盡量保證職責單一，避免功能交叉混雜
讓代碼沒有改進的余地，在開發時把各種情況都想到了，如果有人企圖改進它，總是會回到原點

性能檢測工具 - Lighthouse簡介 Lighthouse是一個Google開源的自動化工具，主要用于改進網絡應用的質量。Lighthouse會對各個測試項的結果打分，并給出優化建議，這些打分標準和優化建議可以視為Google的網頁最佳實踐。

Chrome拓展程序谷歌商店安裝lighthouse后，在右上角或者菜單里點擊圖中圖標，Options可以配置測試項目，點擊Generate report即可測試。

命令行

js復制代碼<!-- 安裝 lighthouse 組件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 啟動測試 （測試過程中會自動打開 Chrome 完成后會在當前目錄生成一個靜態HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help

檢測結果

【附錄】常用的標簽規范

標簽	語義	嵌套常見錯誤	常用屬性
<a></a>	超鏈接/錨	a不可嵌套a	href,name,title,rel,target
<div></div>	塊級容器
<p></p>	段落	不能嵌套塊級元素
<span></span>	內聯容器（行內元素）	不可嵌套塊級容器
<form></form>	表單		action,target,method,name
<input />	輸入框	不可嵌套元素	type,name,value,checked,disabled,maxlength,readonly,accesskey
<textarea></textarea>	多行文本輸入控件		name,accesskey,disabled,readonly,rows,cols
<img />	圖像	不可嵌套元素	alt,src,width,height
<label></label>	標簽（常用input元素定義標注）	不可嵌套塊級容器	for
<table></table>	表格	只可嵌套表格子元素	width,align,background,cellpadding,cellspacing,summary,border
<tbody></tbody>	表格主體	只能嵌套在table內
<thead></thead>	表頭	只能嵌套在table內
<tr></tr>	表格行	嵌套于table或thead、tbody、tfoot
<td></td>	表格中的單元格	只用于tr	colspan,rowspan
<th></th>	表格中的標題單元格	只用于tr	colspan,rowspan
<tfoot></tfoot>	表格表尾	只用于table
<button></button>	按鈕	不可嵌套表單、表格等塊級元素	type,disabled
<select></select>	列表框或下拉框	只能嵌套option或optgroup	name,disabled,multiple
<option></option>	select中的一個選項	只能嵌套在select內	value,selected,disabled
<ol></ol>	有序列表	只能嵌套li
<ul></ul>	無序列表	只能嵌套li
<li></li>	無序列表項	只能嵌套在 ul 或 ol 內
<iframe></iframe>	內嵌一個網頁		frameborder,width,height,src,scrolling,name
<br />	換行
<link />	引用樣式或icon	不可嵌套任何元素	type,rel,href
<meta />	文檔信息	只用于head內	content,http-equiv,name
<script></script>	引用腳本	不可嵌套任何元素	type,src
<style></style>	引用樣式	不可嵌套任何元素	type,media
<title></title>	文檔標題	只用于head內

點贊收藏支持、手留余香、與有榮焉，動動你發財的小手喲，感謝各位大佬能留下您的足跡。

作者：StriveToY
鏈接：https://juejin.cn/post/7262378982255394873

在線咨詢

上一篇：成為HTML5大神必備的利器
下一篇：Excel文件打不開怎么辦？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商