首頁 > 網頁教程 > HTML > HTML30年進化史:從前端框架戰爭到小程序爆發

HTML30年進化史:從前端框架戰爭到小程序爆發

時間:2019-08-26    作者:司徒正美   來源:CSDN公眾號

黑客 代碼 安全漏洞 程序員

隨著近年來,前端框架戰爭的白熱化,戰斗溢出到后端、移動端、小程序端等層面……大家似乎不像以前那么關注底層,HTML、JavaScript、CSS 被一些更高級的語言所轉譯,成為了前端的匯編語言。

或許在許多年后,培訓公司將會教授新人:TypeScript 怎么寫,Sass 怎么寫,JSX 怎么寫,這時可能會出現 jQuery 時代的荒誕問題——jQuery 與JavaScript 哪一個更快?這是一種悲哀,也是時代的進步吧。正如我們開心敲著電腦,不用關心底層的芯片是如何運作的。這是文明建立在極度脆弱的生態下的至高產品。

而我們瀏覽的復雜頁面的底層是 HTML+CSS+JavaScript 構建的,其中HTML 是基礎中的基礎,但它經常被人所忽視。要不想頁面文明輕易湮滅,我們需認真封存這部分知識,就像亞述人把他們的知識楔入到泥板中一樣。

HTML 的前身 SGML

戰爭驅動文明發展,互聯網是美國軍隊為了快速傳送情報而發明的。如果單純傳送文字,當時的電報就可以實現,但顯然像地圖上的圖像信息,電服就不行了。這時候需要一種語言來組織這些文字與影像,最好還能存在交互性。交互雖然不能實時,但總好過沒有。于是學者們找到當時最流行的文檔描述語言 SGML。

SGML 是國際上定義電子文檔和內容描述的標準。它源于 1969 年 IBM 公司開發的文檔描述語言 GML,GML 主要用來解決不同系統中文檔格式不同的問題。后經過多年發展,1986 年經 ISO 批準為國際標準 ISO8897,并被稱為 SGML。

它有許多 HTML 的特征,如內容與樣式分離。在 SGML 中,標記分兩種:一種用來描述文檔顯示的樣式,稱為程序標記;另一種用來描述文檔中語句的用途,稱為描述標記。一個 SGML 文件通常分三個層次:結構、內容和樣式。結構為組織文檔的元素提供框架,內容是信息本身,樣式控制內容的顯示。正因為如此,它的使用范圍很廣,被許多大型公司用來創建和發布信息。諸如布告、技術手冊、章節目錄、設計規范、各種信函等,都可以用它來設計描述。

但是 SGML 有致命的缺憾,并且它的優點成為了它的缺點。SGML 設計精良,規范嚴謹,導致了其復雜性也高,在軍情緊急的情況下,需要快速交換情報,不能慢吞吞寫好每個標簽,因為當時每秒幾個比特的網速也是一個問題。

因此它需要裁減,于是有了HTML。

http://info.cern.ch/ 世界第一個網站,非常簡潔。

瀏覽器大戰對 HTML 的影響

當時大家原本要的是一個精簡版的 SGML,但最終他們得到的一個完全不同的東西。

這要從解析網頁的瀏覽器說起,Web 之父 Tim Berners Lee 設計的瀏覽器WorldWidWeb 過于簡單,于是讓商業瀏覽器有可乘之機。

在剛開始時,瀏覽器商還是按照 W3C 的制定的規則,如 Mosia、Netscape,但微軟介入之后就發生改變。微軟制定自己的瀏覽器語法與標準,于是導致了兩套標準的出現。

在規劃中,HTML 也是一門嚴謹的語言,是高度有組織性、規范化、模塊化。例如,規范化是有一個文檔類型聲明 DOCTYPE 來指明它怎么解析的。模塊化,是說各種標簽其實也是有組強性的,幾個幾個地劃分地不同的族群,合起來實現一個功能,最著名的是表單與表格。

但是后來出現了一些意外,一些用來裝飾用的標簽(s、b、i、u、font)因為 CSS 的出現,被人們訴之敗作,漸漸被邊緣化與廢棄。一些用來模擬 Excel 功能的標簽(table、tbody、tr)被人們用來布局,弄得頁面難以維護。

在 CSS 標準化時代,又矯枉過正,硬生生地用 DIV 來模擬表格。一些用來實現廣告功能的標簽,導致會有滿屏飄動、不讓用戶關閉的亂象。在這幾個大事故中,許多標簽就是被胡亂使用或邊緣化。

我個人認為最大原因是 W3C 沒能自己開發一個瀏覽器,一直倚重某一個方,導致造成 HTML 的失控。

HTML 在語法上設計得非常簡單易學。

HTML 標簽是包在小括號里面,沒有人規定標簽名是大寫還是小寫。開標簽中,標簽名旁邊有一些屬性,這些屬性的屬性值沒有人規定它是否能引號,引號是單引號還是雙引號,沒有規定標簽是否一定要閉合。

可能當初是有規定的,但無法遵循。瀏覽器需要最快地將內容呈現給用戶,但當時的網速不太可能,于是瀏覽器大廠允許用戶可以不用閉合標簽,不用嚴格括起屬性值,也能跑起頁面。這種縱容在當時成了優勢,被其他瀏覽器爭相模仿。

此外,還有更厲害的傳輸優化,比如頁面源碼是這樣的:

<p title='aaa'><input readonly="true" /></p>

實際在 IE6~8 的控制臺下看到的源碼是這樣,通過大寫化與對布爾屬性的特殊處理,一點點地減少傳輸內容。

<P title=aaa><INPUT READONLY >

在 Google 早期的首頁中,html、head、body 標簽是刻意省略掉,因為它知道瀏覽器會支持這樣殘缺的頁面。在自然界中,這是不可想象的,殘缺的東西會被淘汰。

對于 HTML 的失控,W3C 決定開發另一種標簽語言,于是 XML 誕生了。但 XML 出現得太晚了,無力回天。它一直作為數據的傳輸載體而存在,而不是描繪界面用。它其實是能描繪界面的,兩個明證是 SVG 語言,及安卓里面的 XML 模板。

HTML 的版本

HTML 發布以來,迭代過許多版本,現在是小步快跑的第 5 版,但 HTML5 已經不是 W3C 所規范的了,是由一個瀏覽器大廠們組成的俱樂部 WHATWG 發布的。

下面是一個簡單的路線圖:

  1. 不存在 HTML1.0, 各自為戰

  2. HTML2.0,從 1995 年 11 月到 2000 年;

  3. HTML3.2,  從 1996 年 1 月到現在;

  4. HTML4.0,從 1997 年 12 月到現在;

  5. HTML4.01,從 1999 年 12 月到現在;

  6. XHTML 1.0,從 2000 年 1 月 20 日到現在;

  7. HTML5.0,從 2014 年 10 月 29 日到現在。

可以看出幾個斷層,HTML1.0 還沒有準備好時,大家就爭先搶后地開始做,于是當時相當地混亂。

早期的瀏覽器包括了:Tim Berners 的 WorldWideWeb 瀏覽器,兼具瀏覽器和編輯器功能,但只能運行在NeXTStep操作系統上;CERN的一位數學實習生 Nicola Pellow 開發出 Line-mode 瀏覽器,能運行在 UNIX 和 MS-DOS 上;Erwise 是第一個帶圖形界面的瀏覽器,支持搜索網頁中的單詞,由四名芬蘭大學生開發,在 1992 年發布;加州伯克利的 Pei-Yuan Wei 在1992 年4 月發布了 ViolaWWW,這個瀏覽器受到了 Mac 程序 HyperCard 的啟發,但他沒有 Mac 只能接觸到 UNIX 機器,1992 年夏天,斯坦福線性加速器中心物理學家 Tony Johnson 為斯坦福的物理學家發布了圖形瀏覽器 Midas;與此同時,CERN 的 Nicola Pellow 和 Robert Cailliau 發布了第一個Mac瀏覽器 Samba;基于 Viola和 Midas 的 Mosaic 在 1993 年發布;堪薩斯大學發布了 Lynx;康奈爾大學法學院學生 Tom Bruce 發布了 Cello。——節選自《被遺忘的早期瀏覽器》

HTML3. 0 時,改了又改,那時五大瀏覽器的四個玩家已經全場(IE、Netscape、Opera、Safari),要滿足四家的喜好非常難。這也是目前還在支持的早期標準。

XHTML 是 W3C 最后一次賭博,想用 XML 的規范來修正 HTML 一直以來松散的編寫形式,即要來閉合的地方必須閉合,屬性值必須要括起來,廢棄的標簽不能再使用,還要求對 script 標簽的內容使用 CDATA 包裹起來,DOCTYPE 變得很長……它們還專門編寫一個網站給大家做校正:

https://validator.w3.org/

下面這段 XHTML 標準模式代碼,符合 W3C XHTML 語法,能夠執行(保存為 itworks.xhtml 文件,用 Firefox 打開):

image.png

俗話說,由儉入奢易,由奢入儉難。用戶不習慣,如果寫的頁面不合格,瀏覽器不解析,意味著用戶會跑去競爭對手中。因此這鬧劇草草收場了。瀏覽器商也看到自己的能量所在,把 HTML 的規范制定收歸手中。

HTML的模塊介紹

在語義化時代,人家過于關注于單個標簽所表示的意思,而忽略了組件是分群體的。只不過有的群體是弱聯連,可以混雜其他標簽,加之瀏覽器的自動糾錯功能導致人們對它們的誤解。這些群體我稱之為模塊。

我稍微歸納一下,當然在 W3C 的 HTML5.2 中它們也有另一套劃分。那套劃分很奇怪,某一種標簽可能歸類到多個類別中。

https://www.w3.org/TR/html52/dom.html#content-models

文檔模塊

文檔模塊就是<html>、<body>、<head>、<title>這幾個標簽,我們可以在 document 上訪問到它,document.documentElement、document.body、document.head、document.title。它們可以省略不寫,瀏覽器魔術般地補全它們。這些標簽只是提供一個框架,告訴人們一些內容性的東西應該放在 body 中,功能性的東西應該放在 head 中。

功能模塊

它是用來設置文檔整體的功能或一些元信息,涉及的標簽有<link>、<meta>、<base>、<script>與<style>。除了后兩個,由于頁面功能的膨脹,需要多人協作一個頁面,于是出現一個頁面存在多個<script>與<style>標簽,它們可以分散到其他位置。<link>、<meta>、<base> 都集中在head 標簽內。我也嘗試過將 div 放在 head 中, head標簽會自動將它趕回body里面。

<link> 標簽有兩個作用:1. 定義文檔與外部資源的關系;2. 是鏈接樣式表。HTML5 新加的預加載,預渲染等功能就在這標簽上添加。

<meta> 標簽可提供有關頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關鍵詞。最有用的就是設置頁面的字符集。

下面是簡書的 meta 標簽使用情況,它可以做許多事情,如百度 SEO、360 SEO、移動端的水滴屏設置、縮放設置,還有外國的一些社交網站的設置,需要有一些專門的知識才能玩得轉。

image.png

<base>標簽為頁面上的所有鏈接規定默認地址或默認目標。

通常情況下,瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。

使用 <base> 標簽可以改變這一點。瀏覽器隨后將不再使用當前文檔的 URL,而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標簽中的 URL。在 IE6-8 中這標簽有一個可怕的 Bug,會將整個頁面裝進它的 innerHTML 中,導致你的選擇器失靈。

相關推薦
能讓IE支持HTML5的解決方案
實用HTML標簽語法大全
何為微格式? 附實例演示
正確理解XHTML標簽的語義 有助適當使用標簽
在網頁中使用H1標記的須注意的事項
HTML網頁的META標簽常用寫法與功能介紹
正確理解HTML的語義有助于搜索引擎優化
谷歌棄Gears瀏覽器插件 轉重點開發HTML5
HTML的不同標簽在SEO優化中的權重分數
采用HTML5搭建的多個網站嘗鮮試用
體驗HTML5 Canvas對象的強大 五款在線繪圖應用示例
HTML語言中alt屬性和title屬性的作用與區別
HTML5新特性:用鏈接預取功能給網站提速
HTML標簽的語義化概念、意義和實踐
如何用HTML5制作網頁?
神奇的HTML5動畫效果演示網站
重視HTML和CSS中的視覺語義
網頁設計師必收藏的十五個HTML5資源
十三個網站案例讓你提前體驗HTML5和CSS3的魅力
基于HTML5的繪圖程序Muro,支持Wacom手寫繪圖板
HTML5的一些的趣味小應用
HTML5、CSS和JavaScript與Web移動應用的未來趨勢
十款基于HTML5開發的精彩WEB應用(HTML5網站演示)
學好HTML5必備的七個在線資源推薦
HTML5教程之表單功能詳解
四個HTML 5標簽、屬性、事件及瀏覽器兼容性速查表分享
15個采用HTML5實現的網站界面設計欣賞
HTML5的革新:語義更明確簡潔的結構
21款效果驚艷基于HTML5的應用程序欣賞
16個頗具創意的HTML5網站設計
能讓IE瀏覽器也支持HTML5標準的辦法
25個超炫的HTML5+CSS3網頁應用案例欣賞
2012年Web開發有關HTML5的14個預測
新手入門:HTML5是什么?
35個WEB開發必備的實用HTML5教程
10個web開發常用的HTML虛擬Dummy內容生成器推薦

精彩推薦

熱門教程

忍者法宝试玩
管家婆精品二十四码中特 宁波麻将七百搭 捕鱼来了手游 新加坡幸运28开奖结果 贵阳捉鸡什么叫做叫嘴 快3福彩开奖结果 球探比分网直播 雪豹水果机中文免费版 重庆时时生肖彩三星走势图 排球比分制 东华软件股票分析 申城棋牌官方手机版 广西友乐麻将一元一分 浙江快乐十二开奖结果走势图 11选五5开奖结果 qq麻将刷分器