第 1 章 HTML5 概述

来源:http://www.cnblogs.com/zfc2201/archive/2016/04/24/5428912.html
-Advertisement-
Play Games

學習要點: 1.HTML5 的歷史 2.HTML5 的功能 3.HTML5 的特點 4.課程學習問題 主講教師:李炎恢 HTML5 是繼 HTML4.01 和 XHTML1.0 之後的超文本標記語言的最新版本。 它是由一群自由思想者組成的團隊設計出來,並最終實現多媒體支持、交互性、更加智能的表單,以 ...


學習要點:

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 不會用、郵件不會發送、迅雷不會下載的學員。這些學員是初學者之前的、負基礎的學員,所以,如果是初學者一般問題不大。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 協議 WebSocket是一種基於TCP之上的客戶端與伺服器全雙工通訊的協議,它在HTML5中被定義,也是新一代webapp的基礎規範之一。 它突破了早先的AJAX的限制,關鍵在於實時性,伺服器可以主動推送內容 到客戶端!可能的應用有:多人線上游戲,即時聊天,實時監控,遠程桌面,新聞伺服器等等。 對 ...
  • 最近在項目中使用jQuery.query.js這個插件進行頁面間URL傳值,遇到如下兩點問題: 1. 參數中存在空格時取到的值中空格被替換為加號:+ 2. 當參數某個key的value不存在時,獲取到的value並不是空/null 而是true。 在網上找到了個解決方案,可以參考下(是否有其他副作用 ...
  • 一、顯示信息的命令 console.log(); //控制台輸入 網頁中不會輸出 console.info(); //一般信息 console.debug(); //除錯信息 console.warn(); //警告提示 console.error(); //錯誤提示 “console.log(); ...
  • 註冊頁面是大多數網站必備的頁面,所以很有必要對自己的註冊頁面做些精心的設計。下麵三張圖,第一張是註冊的展示頁面,第二張思維導圖就一個簡單的邏輯,第三張是通過firebug查看調用的JS文件。 註冊的展示頁面 簡單的邏輯 通過firebug查看調用的JS文件 一、給每個輸入框寫下說明 在用戶看到這個輸 ...
  • 數據共用和數據傳遞是相輔相成的,我們一起來討論這個問題。首先要說的是共用和傳遞都是有作用域的。作用域就是起作用的區域,在同一個作用域數據可以共用,超過這個作用域就是跨作用域,就得用到數據傳遞了。 作用域 ui作用域每一個ui文件預設都有對應的ui.js。他們作為一個閉合的作用域。ui.js里根據ui ...
  • 學習要點: 1.HTML5 文檔結構 2.文檔結構解析 3.元素標簽探討 主講教師:李炎恢 本章主要先從 HTML5 的文檔結構談起。 這些基礎元素確定了 HTML 文檔的輪廓以及瀏覽器的初始環境。幾乎所有頁面都必須首先鍵入這些元素。 一.HTML5 文檔結構 1.第一步:打開 Sublime Te ...
  • 我們來個例子,一個HTML里包含一段文本和一個無序的列表。 上面例子里,我們使用getElementById DOM方法來訪問p段落,在SCRIPT里添加如下代碼: 變數introParagraph現在已經引用到該DOM節點上了,我們可以對該節點做很多事情,比如查詢內容和屬性,或者其它任何操作,甚至 ...
  • DOM
    DOM對象**1.屬性** docment.title 返回當前文檔的標題docment.URL 返迴文檔完整的URLdocument.bgColor 背景色document.fgColor 前景色 **2.方法** 2.1 document.getElementById(“elementID”); ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...