html簡史
HTML 是 Web 統一語言，這些容納在尖括號裏的簡單標籤，構成了如今的 Web。1991 年，Tim Berners-Lee編寫了一份叫做 “HTML 標籤”的文檔，裏面包含了大約20個用來標記網頁的 HTML 標籤。他直接借用SGML的標記格式，也就是後來我們看到的 HTML 標記的格式。本文講述了 HTML 這門 Web 標記語言的發展簡史。
從 IETF 到 W3C: HTML 4 之路
-
HTML 1並不曾存在， -
HTML的第一個官方版本就是由IETF （互聯網工程任務組）推出的HTML 2.0。問世之前，這個版本中的很多細則已經被實現，比如，1994年的Mosaic 瀏覽器已經實現了在文檔中嵌入圖片的方法，後來HTML 2.0便吸納了img這個標籤。 - 後來，
W3C取代IETF的角色，成爲 HTML 的標準組織， -
90年代的後半葉，HTML 的版本被頻繁修改，直到1999年的HTML 4.01，至此，HTML 到達了它的第一個拐點。
HTML4之後，出現了一些分歧。
XHTML 1: XML 風格的 HTML
HTML 在 HTML 4.01 之後的第一個修訂版本就是 XHTML 1.0，其中 X 代表 “eXtensible” ，擴展，當然也有人將之解讀爲 “eXtreme”，極端。XHTML 1.0 是基於 HTML 4.01 的，並沒有引入任何新標籤或屬性，唯一的區別是語法，HTML 對語法比較隨便，而 XHTML 則要求 XML 般的嚴格語法。
使用嚴格的語法規範並非壞事，要求開發者使用單一的代碼風格，比如，HTML 4.01 允許你使用大寫或小寫字母標識標記元素和屬性，XHTML 則只允許小寫字母。XHTML 1.0 的推出剛好碰上了 CSS 的崛起，Web 開發設計者們開始意識到 Web 標準問題，基於 XHTML 的嚴格語法規範被視爲編寫 HTML 代碼的最佳實踐。
於是，W3C 推出 XHTML 1.1。
如果說 XHTML 1.0 是 XML 風格的 HTML，XHTML 1.1 則是貨真價實的 XML。這意味着 XHTML 1.1 無法使用 text/html mime-type 直接輸出，然而，如果 Web 開發者使用 XML mime-type，則當時的主流瀏覽器，IE 則壓根不支持。看上去，W3C 似乎正在與當時的 Web 脫節。
出力不討好的 XHTML 2
對 W3C 而言，到了 HTML 4 已經是功德圓滿，他們的下一步工作是 XHTML 2，希望將 Web 帶向 XML 的光明未來。雖然 XHTML 2 聽上去和 XHTML 1 類似，它們卻有很多差別，XHTML 2 不向前兼容，甚至不兼容之前的 HTML。它是一種全新的語言，赤條條來去無牽掛。這實在是一場災難。
WHATWG：與 W3C 決裂
W3C 閉門造車的作風引起了一些人的不滿，來自 Opera, Apple, 以及 Mozilla 的代表開始表達反對聲音。2004年，Opera 的 Ian Hickson 提議在 HTML 基礎上進行擴展以適應新的 Web 應用，該提議遭到 W3C 的拒絕。於是，他們自發組織成立了超文本應用技術工作組，就是 WHATWG。
從 Web Apps 1.0 到 HTML5
從一開始，WHATWG 就和 W3C 走不同的路線，W3C 對問題的討論是集體投票，而 WHATWG 則由主筆 Ian Hickson 定度。表面上看，W3C 更民主，然而事實上，各種內部紛爭會使一些決議限於泥潭，在 WHATWG，事情的進展會更容易，不過，主筆的權力並非無限大，他們的委員會可以對那些過於偏執的主筆進行彈劾。
一開始，WHATWG 的主要工作包括兩部分，Web Forms 2.0 和 Web Apps 1.0，它們都是 HTML 的擴展，後來，他們合併到一起成爲現在的 HTML5 規範。
言歸於好
在 WHATWG 致力於 HTML5 的同時，W3C 繼續他們的 XHTML 2.0，然而，他們慢慢地陷入困境。
2006年10月，Web 之父 Tim Berners-Lee 發表了一篇博客文章，表示，從 HTML 走向 XML 的路是行不通的，幾個月後，W3C 組建了一個新的 HTML 工作組，他們非常明智地選擇了 WHATWG 的成果作爲基礎。這一轉變帶來一些困惑，W3C 同時進行這兩套規範，XHTML 2 和 HTML 5 （注意，W3C 的 HTTML 5 在 5 之前有個空格，而 WHATWG 的 HTML5 則沒有空格），而 WHATWG 也在進行着同樣的工作。
XHTML 已死: XHTML 語法永存
這一混亂局面到了 2009 年開始變得清晰，W3C 宣佈終止 XHTML 2 的工作，這是一份關於 XHTML 2 的遲到的訃告。這一消息被那些 XML 的反對者視爲珍寶，他們藉此嘲笑那些使用 XHTML 1 規範的人，然而他們似乎忘記了，XHTML 1 和 XHTML 2 是截然不同的東西。於此同時，XHTML 1 規範的制定者擔心，XHTML 1 中的嚴格語法規範會被 HTML5 棄用，這種擔心後來證明是多餘的，HTML5 既支持鬆散語法，也支持 XHTML 1 般的嚴格語法。
HTML5 路線圖
HTML5 的現狀是，它不再象以前那樣讓人困惑，然而仍不夠明朗。有兩個組織在同時制定它的規範，這兩個組織有着完全不同的行事風格，WHATWG 是先買後嘗，W3C 是先嚐後買，他們形成了一個不太靠譜的聯姻，最終人們必將面臨一個 HTML5 還是 HTML 5 的問題。html5和其他的不一致的地方，可以查看：查看HTML5的區別
<!DOCTYPE> 聲明
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。 HTML4的三種模式：HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
同樣XHTML1也有三種模式：XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
不過目前而言，在 HTML5 中只有一種聲明：<!DOCTYPE html>，
目前的標準已經到了HTML5的第二版，查看HTML5.3；
自閉和標籤正確書寫
一般標籤由於有開始符號和結束符號，可以在標籤內部插入其他標籤或文字；自閉合標籤由於沒有結束符號，沒辦法在內部插入其他標籤或文字，只能定義自身的一些屬性。
常見自閉和標籤：
1、<meta/>
定義頁面的說明信息，供搜索引擎查看。
2、<link/>
用於連接外部的CSS文件或腳本文件。
3、<base/>
定義頁面所有鏈接的基礎定位。
4、<br/>
用於換行。
5、<hr/>
水平線。
6、<input/>
用於定義表單元素
7、<img/>
圖片目前的HTML都是準守html5的標準，所以自閉和標籤也是需要準守html5的標準寫法，也就是推翻了xhtml中的嚴格模式，自閉和標籤不需要加斜槓結束。
圖片實例：
<img src="" ><img /> // 不規範
<img src="" > // html規範寫法
僞元素 ::placeholder
僞元素添加到選擇器，但不是描述特殊狀態，它們允許您爲元素的某些部分設置樣式；最爲常見的就是::before-::after，
- ::after
- ::before
- ::first-letter
- ::first-line
- ::selection
試驗性_內嵌
- ::backdrop
- ::placeholder
- ::marker
- ::spelling-error
- ::grammar-error
對於很多自閉和標籤，其實應該是不支持僞元素，不過input元素有一個特殊的僞元素，可以設置佔位符的樣式；
::-webkit-input-placeholder
::-moz-placeholder
:-ms-input-placeholder
::placeholderios的彈性滾動和滾動條的問題
-webkit-overflow-scrolling: touch; 是用在移動端 webkit 內核瀏覽器的一個滾動條效果，通常我們的頁面滾動（body 會默認採用這種方案無需代碼聲明）當手指觸摸滑動時，它是不會以一種慣性，帶回彈效果的滾動，而這段代碼即是讓它擁有這種像 App 一樣的效果
使用這段代碼的時候它隨即帶來了一個問題，-webkit-overflow-scrolling: touch; 所帶來的滾動條在未滾動的時候是隱藏狀態，而當手指嘗試去滑動滾動條就會顯示出來，然而這個控件的樣式並非像桌面瀏覽器可以自定義，也就是說無法隱藏。
也就是這兩個屬性展不兼容。
-webkit-scrollbar{ display: none;}
-webkit-overflow-scrolling: touch;目前的解決方案：父容器設置固定高度h,並overflow：hidden，滾動容器高出父容器h+10px；滾動容器的子內容高度和父容器一樣，比滾動容器小10px，然後滾動條就會被父容器隱藏。
<div class="father">
<div class="scroller">
<div class="son">子元素</div>
<div class="son">子元素</div>
<div class="son">子元素</div>
</div>
</div>