緣起
HTML（HyperText Markup Language超文本標記語言）是用于構(gòu)建web頁面的標記語言和通用標準。它并不是一項新的發(fā)明，因為超文本（具有超鏈接的文本）和標記語言（用于電子文檔的定義和描述）在HTML問世以前都早已存在多年。作為一項劃時代的創(chuàng)造，它再次印證了喬布斯的名言：創(chuàng)新即整合（Creativity is just connecting things）。
HTML的創(chuàng)造者，被后人稱為互聯(lián)網(wǎng)之父的Tim Berners-Lee曾經(jīng)是CERN（歐洲核子研究組織）的一位科學家。1990年，他受命開發(fā)一套軟件系統(tǒng)用于組織內(nèi)部成員分享和查閱研究報告，于是他把超文本和標記語言合成了HTML，然后寫了一個瀏覽器和一個服務器，這就是萬維網(wǎng)（World Wide Web）的起源。是的，一群科學家，只是為了方便看報告，結(jié)果順手搞出了互聯(lián)網(wǎng)。
Tim Berners-Lee并不是一個廣為人知的名字，原因是他完全放棄了萬維網(wǎng)所能帶給他的數(shù)不勝數(shù)的財富，和他類似的人還有很多，比如Linux的創(chuàng)始人Linus。正是這些具備非凡理念的人物奠定了互聯(lián)網(wǎng)的精神基調(diào)：平等、共享、開源和創(chuàng)造。
1994年Tim創(chuàng)建了W3C，這是一個非盈利性的國際化組織，致力于維護和制定web相關(guān)的標準。
Tim Berners-Lee
語義（semantic）
語義化標記，是指每種標記表示一種特定的內(nèi)容形態(tài)，例如標題、列表、表格等。與之對應的概念，是樣式標記（presentational markup）。Tim最初設(shè)想HTML應該是一種純語義化的標記語言，然而在混沌無序的初始階段，各家瀏覽器廠商多少受到另一種通行多年的標記語言SGML的影響，由于該語言同時存在語義化標記和樣式標記，于是早期的HTML也被設(shè)計成了兩類標記的雜合體。不過隨著90年代末CSS的逐步應用以及隨之而起的“內(nèi)容與表現(xiàn)分離”理念，樣式標記在新的HTML版本中被逐漸廢除，但出于向后兼容的考慮，仍然有部分樣式標記被保留，例如：i（樣式）/ em（語義）；b（樣式）/ strong（語義）。
為什么需要使用語義化標記？
1、HTML本身就是語義化標記語言，使用符合語義的標記，才談得上正確使用HTML
2、使用合適的標記，可以合理應用瀏覽器默認樣式
3、有利于SEO
4、使用合適的標記是確?？稍L問性的一個前提
5、更好的可維護性
版本與規(guī)格
HTML歷經(jīng)多個版本迭代，早期版本由瀏覽器廠商主導，直到1999年W3C發(fā)布第四代標準。
第四代標準分化為兩類，一類是SGML-based HTML，即HTML4.01，另一類是XML-based HTML，即XHTML1.0。其中每一類下又分為三種規(guī)格：Strict、Transitional和Frameset。
XHTMl是W3C為了規(guī)束HTML所做的一廂情愿的徒勞，它試圖以嚴格的語法和極低的容錯率來矯正早期HTML市場上業(yè)已存在的種種不規(guī)范行為。然而互聯(lián)網(wǎng)世界沒有誰可以成為上令下行的權(quán)威，并且標準必然是滯后于現(xiàn)實的，因此W3C后來放棄了XHTML2.0，轉(zhuǎn)而投入向后兼容的HTML5。
2014年第五代標準HTML5發(fā)布（Recommendation）。它最早是由一個由瀏覽器廠商代表組成的叫WHATWG的組織提出的，后來學院派的W3C在放棄XHTML的制定后，與實務派的WHATWG聯(lián)合，共同制定了H5標準。歷經(jīng)十五年的換代升級，HTML5新增了大量的內(nèi)容，包括新的標記（新的語義標簽、多媒體支持、新的屬性）和新的API（canvas、svg、webstorage、websocket……），其中許多內(nèi)容模塊至今仍在完善中。
HTML使用<!DOCTYPE >來聲明其版本及規(guī)格。
DTD是通用標記語言SGML用于定義文檔遵循何種標準的一套語法規(guī)則，HTML4.01基于SGML，因此HTML4.01也引入了DTD的聲明方式，一共有三種模式：
Strict：嚴格模式，不允許樣式標記和框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional：松散（混合、過渡）模式，允許樣式標記，不允許框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset：框架集模式，允許樣式標記和框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML5不基于SGML，因此沒有引入DTD，也只有一種聲明：
<!DOCTYPE html>
標簽（tags）
圖例：H5元素；替換元素*；行內(nèi)元素
注：僅包含所有H5支持的標簽。
全局標準屬性
class、id、title、lang、style、tabindex
dir：設(shè)置內(nèi)容的文本方向
accesskey：設(shè)置激活元素的快捷鍵
/* H5新增 */
contenteditable：規(guī)定內(nèi)容是否可編輯，值為布爾值
contextmenu：與menu標簽配合使用，用于自定義右鍵菜單，目前僅火狐實現(xiàn)
data-*：用于嵌入自定義數(shù)據(jù)
draggable：用于規(guī)定元素是否可拖動，值為布爾值
dropzone：目前不支持。copy | move | link
hidden：沒有值，單獨使用。IE不支持
spellcheck：規(guī)定是否對元素內(nèi)容進行拼寫檢查，值為布爾值
translate：規(guī)定是否翻譯元素內(nèi)容。支持較差。yes | no
ARIA Role Attributes
Accessible Rich Internet Applications (ARIA),是一個補充性的標準，用于進一步提高HTML的語義，以便于輔助性設(shè)備的識別。
例如：
<div role="slider" aria-labelledby="volume-label" aria-valuemin="1" aria-valuemax="100" aria-valuenow="67" ></div>
替換元素（replaced element）
從CSS的角度看，替換元素是一種內(nèi)容樣式在CSS控制范圍之外的元素，它的內(nèi)容是一個獨立的外部對象。典型的替換元素有<img>, <object>, <video>，以及某些表單元素如<textarea>和<input>。有的元素如<audio>和<canvas>僅在某些情況下是替換元素。使用偽元素content屬性插入的對象屬于匿名替換元素。
In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.
——from MDN
可見大部分替換元素都是單標簽，但也有少部分是標簽對，如textarea和canvas。
行內(nèi)元素（inline）與塊級元素（block-level）
區(qū)別：
1、在正常流中是否另起一行
2、盒模型規(guī)則不同
meta
meta標簽有四種屬性：
name用于指定文檔的元數(shù)據(jù)信息，例如application-name | description | keywords | author | viewport ……
http-equiv指定預編譯指令（pragma directive），用于設(shè)置響應頭，但僅當服務器未設(shè)置相應響應頭時才起作用。
content用于描述前兩者的內(nèi)容。
charset用于指定字符集，可單獨使用。
兼容性（compatibility）
H5新標簽的兼容性問題主要存在于IE9以下的瀏覽器。
方法一：在head中引入處理兼容性問題的js
< ! - - [ if lt IE9 ] >
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ! [ endif ] - - >
然后需顯示的將H5標簽設(shè)置為block
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
方法二：document.createElement()
可用性（usability）、可訪問性（accessibility）
可訪問性主要是指Web內(nèi)容對于殘障用戶的可閱讀和可理解性。
廣義的可訪問性/可用性包含四個方面：
可感知perceivable、可操作operable、可理解understandable、健壯性robust
具體參見：https://www.w3.org/TR/WCAG20/
可維護性（maintainability）
可維護性的首要前提是可讀性?？勺x性越強，維護成本越低。
確保HTML可維護性的基本方法：
1、使用正確的標簽；
2、詳細的注釋；
3、合理的縮進與換行；
4、結(jié)構(gòu)與樣式分離/解耦
漸進增強（progressive enhancement）與優(yōu)雅降級（graceful degradation）
漸進增強和優(yōu)雅降級是兩種相對的開發(fā)模式，目的是實現(xiàn)應用的兼容性、健壯性。它們的區(qū)別僅在于方向不同：漸進增強首先照顧老版本瀏覽器，然后在最低可用版本基礎(chǔ)上增加新特性；優(yōu)雅降級則率先針對最新的瀏覽器，使用最新的技術(shù)，實現(xiàn)最好的效果，然后再向下兼容低端瀏覽器。
