第 1 章 HTML5 概述

學習要點:

1.HTML5 的歷史
2.HTML5 的功能
3.HTML5 的特點
4.課程學習問題

主講教師:李炎恢

  HTML5 是繼 HTML4.01 和 XHTML1.0 之后的超文本標記語言的最新版本。 它是由一群自由思想者組成的團隊設計出來,并最終實現多媒體支持、交互性、更加智能的表單,以及更好的語義化標記。
  HTML5 并不僅僅是 HTML 規范的最新版本,而是一系列用來制作現代富 Web 內容的相關技術的總稱,其中最重要的三項技術分別為:HTML5 核心規范(標簽元素)、CSS(層疊樣式表第三代)、和 JavaScript。

一.HTML5 的歷史
  1993 年 HTML 首次以因特網草案的形式發布, 然后經歷了 2.0、 3.2 和 4.0, 直到 1999年的 HTML4.01 版本穩定下來。由于發展緩慢,逐漸的被更加嚴格的 XHTML 取代。

  XHTML 的興衰史
  自從 HTML4.01 版本之后,掌握著 HTML 規范的萬維網聯盟(W3C)組織沒有再發布新的標準,而是圍繞著 XHTML1.0 以及之后的 XHTML2.0 展開工作。XHTML 是基于 XML、致力于實現更加嚴格并且統一的編碼規范的 HTML 版本,解決之前 HTML4.01 版本時,由于編碼不規范導致瀏覽器的各種古怪行為。所以,Web 開發者對 XHTML 非常的擁護。XHTML 極大的好處,就是強迫開發者養成良好的編碼習慣,放棄 HTML 的凌亂寫法,最終降低了瀏覽器解析頁面的難度,方便移植到更多平臺。
  可是,越是想往好的方面發展,往往可能是帶來的卻是毀滅性的災難,世間萬物就是如此。XHTML2.0 規范了更嚴格的錯誤處理規則,強制要求瀏覽器拒絕無效的 XHTML2 頁面,強制 Web 開發者寫出絕對正確規范的代碼,同時不得向下兼容,摒棄 HTML 遺留的怪異行為和編碼習慣。按理說,取其精華、舍其糟粕應該是好事。但是,這樣的話,數億的頁面將無法兼容,Web 開發者的難度又被加大,并且制定這個標準又太過久遠,最終被拋棄。

  HTML5 的回歸
  2008 年 W3C 發布了 HTML5 的工作草案,2009 年停止了 XHTML2 計劃。又過去大概一年, HTML5 規范進一步解決了諸多非常實際的問題, 各大瀏覽器廠商開始對旗下的產品進行升級,以便支持 HTML5。這樣,得益于瀏覽器的實驗反饋,HTML5 規范得到了持續的進步和完善,從而迅速融入到 Web 平臺的實質性改進中。
  和 XHTML2.0 不同, 制定 HTML5 規范的一群人并不想挑出以往 HTML 的各種毛病為其改正,而是盡可能的補全 Web 開發者急需的各種功能。這些功能包括更強大的 CSS3、表單驗證、音頻視頻、本地存儲、地理定位、繪畫(Canvas)、Web 通信等等。

二.HTML5 的功能
  HTML5 到底涵蓋了哪些功能?這些功能到底在主流的瀏覽器支持情況如何?
  1.HTML5 核心:這部分主要由 W3C 官方的規范組成,涉及新的語義元素、新的增強的Web 表單、音頻和視頻、以及通過 JavaScript 繪圖的 Canvas。這部分大多數主流瀏覽器均得到很好的支持;
  2.曾經的 HTML5 標準:這部分主要來自于最初制定的 HTML5 規范,其中大多數功能需要 JavaScript 且支持富 Web 應用開發。比如:本地數據存儲、離線應用和消息傳遞;3.非 HTML5 標準:這部分通常指下一代功能,雖然從未進入 HTML5 標準,但人們還是會把它認做 HTML5 的一部分。這些包括最為常見的 CSS3,以及很熱門的地理定位。

  對于最為常用且實用的部分, 基本上主流的瀏覽器都支持的比較好。 而那些特殊需求的部分,則需要根據不同的瀏覽器檢測才能知道是否支持自己想要的功能。

三.HTML5 的特點
  在 HTML5 發展的同時,XHTML2.0 也在不斷發展,那么到底是哪些特點導致 HTML5 取得最終的勝利呢?

  1.向下兼容
  對于 XHTML2.0 要求遵循規則,否則不予顯示的方式,HTML5 卻實行“不破壞 Web” 的原則。也就是說,以往已存在的 Web 頁面,還可以保持正確的顯示。
  當然,面對開發者,HTML5 規范要求摒棄過去那些編碼壞習慣和廢棄的標簽元素;而面對瀏覽器廠商,要求它們兼容 HTML 遺留的一切,以做到向下兼容。

  2.用戶至上
  HTML5 遵循“用戶至上”的原則,在出現具體問題時,會把用戶放在第一位,其次是開發者,然后是瀏覽器廠商,最后才是規范制定者。比如,開發者在編碼時不嚴謹導致本該出現警告或錯誤時,卻正常顯示了頁面。

  3.化繁為簡
  HTML5 對比之前的 XHTML,做了大量的簡化工作。具體如下:
  (1).以瀏覽器的原生能力代替復雜的 JavaScript;
  (2).DOCTYPE 被簡化到極致;
  (3).字符集聲明被簡化;
  (4).簡單強大的 API。

  4.無插件范式
  在 HTML5 出現之前,很多功能只能通過插件或 hack(如繪圖 API)來實現,但 HTML5原生提供了這些支持。使用插件有很多問題,具體如下:
  (1).插件安裝容易失敗;
  (2).插件被瀏覽器或軟件禁用屏蔽(如 Flash 插件);
  (3).插件經常會被爆出漏洞被利用攻擊;
  (4).插件不容易與 HTML 文檔其他部分集成(比如整體透明化等)。?

  5.訪問通用性
  這個原則分為三個概念:
  (1).可訪問性:比如更加利于殘障人士的閱讀方案;
  (2).媒體中立:比如 HTML5 的媒體播放在不同設備或平臺均能正常運行;
  (3).支持所有語種:比如新元素<ruby>。

  6.引入語義
  HTML5 引入了一些用來區分不同含義和內容的標記元素。 這種方式極大的提供的編碼人員的可讀性和代碼區域查詢的便利性。

  7.引入原生媒體支持
  HTML5 的一次大改進救生衣支持在瀏覽器中直接播放視頻和音頻文件, 以前都需要借助插件才能實現此類功能。

  8.引入可編程內容
  HTML5 最大的變化就是引入了需要通過 JavaScript 編程才能完全的各種效果, 而這些很多都是 HTML5 原生的。那么現在 HTML5 可以理解為 HTML + CSS + JavaScript 的總稱。

四.課程學習問題
  學習 HTML5 需要一些測試用的瀏覽器、編碼用的開發工具、以及建議推薦的學習方法。

  1.瀏覽器選擇

    IE9+
    Firefox 3.5+
    Chrome 3.0+
    Safari 3.0+
    Opera 10.5+

  這里重點要說明一下 IE 瀏覽器。由于歷史和系統綁定原因,還有相當一部分電腦殘留IE9 以下版本的瀏覽器。雖然微軟已經開始發表聲明逐步不再維護 IE8,但這部分群體還占有一定的份額。所以,是否要迎合這部分用戶,取決于個人對市場的判斷和成本的考量。

  2.開發工具
  本課程我們使用 Sublime Text3 作為 HTML5 課程的編碼工具。使用了 Soda Dark 3作為軟件界面的主題。

  3.學習方式
  本課程原則上是零基礎、初學者可學,但如果你已經有 XHTML 課程基礎,那么學習起來將非常輕松。當然,雖然我們已經錄制了 XHTML 基礎,在錄制 HTML5 課程時,還是將所有學員當作剛接觸的初學者來對待。 再當然, 這里所說的零基礎和初學者也是需要一定經驗,因為長期的教學工作,我們接觸到很多連 QQ 不會用、郵件不會發送、迅雷不會下載的學員。這些學員是初學者之前的、負基礎的學員,所以,如果是初學者一般問題不大。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,505評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,556評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,463評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,009評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,778評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,218評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,281評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,436評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,969評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,795評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,993評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,537評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,229評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,990評論 2 374

推薦閱讀更多精彩內容

  • 格式后期處理。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,145評論 0 17
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,660評論 25 708
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,785評論 18 139
  • 問答題1 /72瀏覽器頁面有哪三層構成,分別是什么,作用是什么?參考答案構成:結構層、表示層、行為層分別是:HTM...
    _Yfling閱讀 1,223評論 0 23
  • 在十幾歲的年歲里,對西藏就有一種莫名的情愫,不單單是簡單的喜歡,更多的是敬仰,是向往。 想去西藏的念頭最強烈的時期...
    哀而不傷的憶閱讀 1,443評論 1 0