第 1 章 HTML5 概述

學習要點:

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

主講教師:李炎恢

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

一.HTML5 的歷史
  1993 年 HTML 首次以因特網(wǎng)草案的形式發(fā)布恭朗, 然后經(jīng)歷了 2.0、 3.2 和 4.0依疼, 直到 1999年的 HTML4.01 版本穩(wěn)定下來痰腮。由于發(fā)展緩慢,逐漸的被更加嚴格的 XHTML 取代律罢。

  XHTML 的興衰史
  自從 HTML4.01 版本之后膀值,掌握著 HTML 規(guī)范的萬維網(wǎng)聯(lián)盟(W3C)組織沒有再發(fā)布新的標準,而是圍繞著 XHTML1.0 以及之后的 XHTML2.0 展開工作误辑。XHTML 是基于 XML沧踏、致力于實現(xiàn)更加嚴格并且統(tǒng)一的編碼規(guī)范的 HTML 版本,解決之前 HTML4.01 版本時稀余,由于編碼不規(guī)范導致瀏覽器的各種古怪行為悦冀。所以趋翻,Web 開發(fā)者對 XHTML 非常的擁護睛琳。XHTML 極大的好處,就是強迫開發(fā)者養(yǎng)成良好的編碼習慣踏烙,放棄 HTML 的凌亂寫法师骗,最終降低了瀏覽器解析頁面的難度,方便移植到更多平臺讨惩。
  可是辟癌,越是想往好的方面發(fā)展,往往可能是帶來的卻是毀滅性的災難荐捻,世間萬物就是如此黍少。XHTML2.0 規(guī)范了更嚴格的錯誤處理規(guī)則,強制要求瀏覽器拒絕無效的 XHTML2 頁面处面,強制 Web 開發(fā)者寫出絕對正確規(guī)范的代碼厂置,同時不得向下兼容,摒棄 HTML 遺留的怪異行為和編碼習慣魂角。按理說昵济,取其精華、舍其糟粕應該是好事野揪。但是访忿,這樣的話,數(shù)億的頁面將無法兼容斯稳,Web 開發(fā)者的難度又被加大海铆,并且制定這個標準又太過久遠,最終被拋棄挣惰。

  HTML5 的回歸
  2008 年 W3C 發(fā)布了 HTML5 的工作草案卧斟,2009 年停止了 XHTML2 計劃系草。又過去大概一年, HTML5 規(guī)范進一步解決了諸多非常實際的問題唆涝, 各大瀏覽器廠商開始對旗下的產(chǎn)品進行升級找都,以便支持 HTML5。這樣廊酣,得益于瀏覽器的實驗反饋能耻,HTML5 規(guī)范得到了持續(xù)的進步和完善藏研,從而迅速融入到 Web 平臺的實質(zhì)性改進中愚争。
  和 XHTML2.0 不同, 制定 HTML5 規(guī)范的一群人并不想挑出以往 HTML 的各種毛病為其改正险领,而是盡可能的補全 Web 開發(fā)者急需的各種功能凡辱。這些功能包括更強大的 CSS3戒职、表單驗證、音頻視頻透乾、本地存儲洪燥、地理定位、繪畫(Canvas)乳乌、Web 通信等等捧韵。

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

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

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

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

  2.用戶至上
  HTML5 遵循“用戶至上”的原則球榆,在出現(xiàn)具體問題時,會把用戶放在第一位店量,其次是開發(fā)者芜果,然后是瀏覽器廠商,最后才是規(guī)范制定者融师。比如,開發(fā)者在編碼時不嚴謹導致本該出現(xiàn)警告或錯誤時蚁吝,卻正常顯示了頁面旱爆。

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

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

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

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

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

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

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

  1.瀏覽器選擇

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

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

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

  3.學習方式
  本課程原則上是零基礎搀继、初學者可學窘面,但如果你已經(jīng)有 XHTML 課程基礎,那么學習起來將非常輕松叽躯。當然财边,雖然我們已經(jīng)錄制了 XHTML 基礎,在錄制 HTML5 課程時点骑,還是將所有學員當作剛接觸的初學者來對待酣难。 再當然, 這里所說的零基礎和初學者也是需要一定經(jīng)驗黑滴,因為長期的教學工作憨募,我們接觸到很多連 QQ 不會用、郵件不會發(fā)送跷跪、迅雷不會下載的學員馋嗜。這些學員是初學者之前的、負基礎的學員吵瞻,所以葛菇,如果是初學者一般問題不大甘磨。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市眯停,隨后出現(xiàn)的幾起案子济舆,更是在濱河造成了極大的恐慌,老刑警劉巖莺债,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件滋觉,死亡現(xiàn)場離奇詭異,居然都是意外死亡齐邦,警方通過查閱死者的電腦和手機椎侠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來措拇,“玉大人我纪,你說我怎么就攤上這事∝は牛” “怎么了浅悉?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長券犁。 經(jīng)常有香客問我术健,道長,這世上最難降的妖魔是什么粘衬? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任荞估,我火速辦了婚禮,結(jié)果婚禮上色难,老公的妹妹穿的比我還像新娘泼舱。我一直安慰自己,他們只是感情好枷莉,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著尺迂,像睡著了一般笤妙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上噪裕,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天蹲盘,我揣著相機與錄音,去河邊找鬼膳音。 笑死召衔,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的祭陷。 我是一名探鬼主播苍凛,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼趣席,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了醇蝴?” 一聲冷哼從身側(cè)響起宣肚,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎悠栓,沒想到半個月后霉涨,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡惭适,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年笙瑟,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片癞志。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡往枷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出今阳,到底是詐尸還是另有隱情师溅,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布盾舌,位于F島的核電站墓臭,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏妖谴。R本人自食惡果不足惜窿锉,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望膝舅。 院中可真熱鬧嗡载,春花似錦、人聲如沸仍稀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽技潘。三九已至遥巴,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間享幽,已是汗流浹背铲掐。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留值桩,地道東北人摆霉。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親携栋。 傳聞我的和親對象是個殘疾皇子搭盾,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 格式后期處理。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,133評論 0 17
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,325評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理刻两,服務發(fā)現(xiàn)增蹭,斷路器,智...
    卡卡羅2017閱讀 134,716評論 18 139
  • 問答題1 /72瀏覽器頁面有哪三層構(gòu)成磅摹,分別是什么滋迈,作用是什么?參考答案構(gòu)成:結(jié)構(gòu)層、表示層户誓、行為層分別是:HTM...
    _Yfling閱讀 1,220評論 0 23
  • 在十幾歲的年歲里帝美,對西藏就有一種莫名的情愫碍彭,不單單是簡單的喜歡,更多的是敬仰悼潭,是向往庇忌。 想去西藏的念頭最強烈的時期...
    哀而不傷的憶閱讀 1,434評論 1 0