HTML 是 Web 統一語言,這些容納在尖括號裏的簡單標籤,構成了現在的 Web。1991 年,Tim Berners-Lee
編寫了一份叫作 「HTML 標籤」的文檔,裏面包含了大約20個用來標記網頁的 HTML 標籤。他直接借用SGML
的標記格式,也就是後來咱們看到的 HTML 標記的格式。本文講述了 HTML 這門 Web 標記語言的發展簡史。
HTML 1
並未曾存在,HTML
的第一個官方版本就是由 IETF (互聯網工程任務組)
推出的 HTML 2.0
。問世以前,這個版本中的不少細則已經被實現,好比,1994年的 Mosaic 瀏覽器
已經實現了在文檔中嵌入圖片的方法,後來 HTML 2.0
便吸納了 img
這個標籤。W3C
取代 IETF
的角色,成爲 HTML 的標準組織,90年代的後半葉
,HTML 的版本被頻繁修改,直到1999年的 HTML 4.01
,至此,HTML 到達了它的第一個拐點。HTML4
以後,出現了一些分歧。html
HTML
在 HTML 4.01
以後的第一個修訂版本就是 XHTML 1.0
,其中 X 表明 「eXtensible」
,擴展,固然也有人將之解讀爲 「eXtreme」
,極端。XHTML 1.0
是基於 HTML 4.01
的,並無引入任何新標籤或屬性,惟一的區別是語法,HTML
對語法比較隨便,而 XHTML
則要求 XML
般的嚴格語法。html5
使用嚴格的語法規範並不是壞事,要求開發者使用單一的代碼風格,好比,HTML 4.01
容許你使用大寫或小寫字母標識標記元素和屬性,XHTML
則只容許小寫字母。XHTML 1.0
的推出恰好碰上了 CSS
的崛起,Web 開發設計者們開始意識到 Web 標準問題,基於 XHTML
的嚴格語法規範被視爲編寫 HTML
代碼的最佳實踐。ios
因而,W3C 推出 XHTML 1.1
。web
若是說 XHTML 1.0
是 XML 風格的 HTML,XHTML 1.1
則是貨真價實的 XML
。這意味着 XHTML 1.1
沒法使用 text/html mime-type
直接輸出,然而,若是 Web 開發者使用 XML mime-type
,則當時的主流瀏覽器,IE 則壓根不支持。看上去,W3C 彷佛正在與當時的 Web 脫節。瀏覽器
對 W3C 而言,到了 HTML 4
已是功德圓滿,他們的下一步工做是 XHTML 2
,但願將 Web 帶向 XML 的光明將來。雖然 XHTML 2
聽上去和 XHTML 1
相似,它們卻有不少差異,XHTML 2
不向前兼容,甚至不兼容以前的 HTML。它是一種全新的語言,赤條條來去無牽掛。這實在是一場災難。搜索引擎
W3C 閉門造車的做風引發了一些人的不滿,來自 Opera, Apple, 以及 Mozilla
的表明開始表達反對聲音。2004年,Opera 的 Ian Hickson
提議在 HTML 基礎上進行擴展以適應新的 Web 應用,該提議遭到 W3C 的拒絕。因而,他們自發組織成立了超文本應用技術工做組,就是 WHATWG
。設計
從一開始,WHATWG
就和 W3C
走不一樣的路線,W3C 對問題的討論是集體投票,而 WHATWG
則由主筆 Ian Hickson
定度。表面上看,W3C 更民主,然而事實上,各類內部紛爭會使一些決議限於泥潭,在 WHATWG
,事情的進展會更容易,不過,主筆的權力並不是無限大,他們的委員會能夠對那些過於偏執的主筆進行彈劾。code
一開始,WHATWG
的主要工做包括兩部分,Web Forms 2.0
和 Web Apps 1.0
,它們都是 HTML 的擴展,後來,他們合併到一塊兒成爲如今的 HTML5
規範。orm
在 WHATWG
致力於 HTML5
的同時,W3C 繼續他們的 XHTML 2.0
,然而,他們慢慢地陷入困境。htm
2006年10月,Web 之父 Tim Berners-Lee
發表了一篇博客文章,表示,從 HTML 走向 XML 的路是行不通的,幾個月後,W3C 組建了一個新的 HTML
工做組,他們很是明智地選擇了 WHATWG
的成果做爲基礎。這一轉變帶來一些困惑,W3C 同時進行這兩套規範,XHTML 2
和 HTML 5
(注意,W3C 的 HTTML 5 在 5 以前有個空格,而 WHATWG 的 HTML5 則沒有空格
),而 WHATWG 也在進行着一樣的工做。
這一混亂局面到了 2009 年開始變得清晰,W3C 宣佈終止 XHTML 2
的工做,這是一份關於 XHTML 2
的遲到的訃告。這一消息被那些 XML 的反對者視爲珍寶,他們藉此嘲笑那些使用 XHTML 1 規範的人,然而他們彷佛忘記了,XHTML 1
和 XHTML 2
是大相徑庭的東西。於此同時,XHTML 1
規範的制定者擔憂,XHTML 1
中的嚴格語法規範會被 HTML5
棄用,這種擔憂後來證實是多餘的,HTML5
既支持鬆散語法,也支持 XHTML 1
般的嚴格語法。
HTML5
的現狀是,它再也不象之前那樣讓人困惑,然而仍不夠明朗。有兩個組織在同時制定它的規範,這兩個組織有着徹底不一樣的行事風格,WHATWG
是先買後嘗,W3C 是先嚐後買,他們造成了一個不太靠譜的聯姻,最終人們必將面臨一個 HTML5
仍是 HTML 5
的問題。html5
和其餘的不一致的地方,能夠查看:查看HTML5的區別
<!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;
通常標籤因爲有開始符號和結束符號,能夠在標籤內部插入其餘標籤或文字;自閉合標籤因爲沒有結束符號,沒辦法在內部插入其餘標籤或文字,只能定義自身的一些屬性。
常見自閉和標籤:
一、<meta/> 定義頁面的說明信息,供搜索引擎查看。 二、<link/> 用於鏈接外部的CSS文件或腳本文件。 三、<base/> 定義頁面全部連接的基礎定位。 四、<br/> 用於換行。 五、<hr/> 水平線。 六、<input/> 用於定義表單元素 七、<img/> 圖片
目前的HTML都是準守html5
的標準,因此自閉和標籤也是須要準守html5
的標準寫法,也就是推翻了xhtml
中的嚴格模式,自閉和標籤不須要加斜槓結束。
圖片實例:
<img src="" ><img /> // 不規範 <img src="" > // html規範寫法
::placeholder
僞元素添加到選擇器,但不是描述特殊狀態,它們容許您爲元素的某些部分設置樣式;最爲常見的就是::before
-::after
,
試驗性_內嵌
對於不少自閉和標籤,其實應該是不支持僞元素,不過input
元素有一個特殊的僞元素,能夠設置佔位符的樣式;
::-webkit-input-placeholder ::-moz-placeholder :-ms-input-placeholder ::placeholder
-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>