HTML5學習-day01【悟空教程】

HTML5學習-day01【悟空教程】

公衆號演示無法呈現建議在pc上打代碼實現

概述

HTML5 ?

Web Development to the next level

Web 技術發展時間線

• 1991 HTML
• 1994 HTML2
• 1996 CSS1 + JavaScript
• 1997 HTML4
• 1998 CSS2
• 2000 XHTML1
• 2002 Tableless Web Design
• 2005 AJAX
• 2009 HTML5
• 2014 HTML5 Finalized

Review of HTML

什麼是HTML？

Hyper Text Markup Language

什麼是超文本標記？

用標記表示比普通文本牛X一點的文本

e.g.

SO ~

HTML5是HTML的最新一代版本

HTML5是用來表示更NB一點的文本 ？

NO ！！！

這個僅僅可以理解爲H5的狹義概念

What is HTML5

H5草案前身

Web Application

提出 by WHATWG @2004

接納 by W3C @2007

發佈HTML5第一個草案 by W3C @2008-01-22

HTML5 ≠ HTML next version

WHATWG

網頁超文本應用技術工作小組是一個以推動網絡HTML 5 標準爲目的而成立的組織。在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。

WHATWG成立的原因是W3C意圖放棄HTML，而力圖發展XML（可擴展標記記語言下的一個子集）技術。WHATWG郵件列表公佈於2004-6-4 , 在Opera–Mozilla宣佈加入後的2天 便否決了由萬維網聯盟（W3C）成員在W3C工作室的Web標準

2007-7-10 , Mozilla Foundation, Apple, Opera Software 建議 W3C跟隨WHATWG’的HTML5，將新的HTML（標準通用標記語言下的一個應用）命名爲"HTML5".2007-4-7, 新的HTML工作組採納了他們的建議。

W3C

萬維網聯盟創建於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。到目前爲止，W3C已發佈了200多項影響深遠的Web技術標準及實施指南，

如廣爲業界採用的超文本標記語言（標準通用標記語言下的一個應用）、可擴展標記語言（標準通用標記語言下的一個子集）以及幫助殘障人士有效獲得Web內容的信息無障礙指南（WCAG）等，

有效促進了Web技術的互相兼容，對互聯網技術的發展和應用起到了基礎性和根本性的支撐作用。

主要工作

W3C 最重要的工作是發展 Web 規範（稱爲推薦，

Recommendations），這些規範描述了 Web 的通信協議（比如 HTML 和 XHTML）和其他的構建模塊。

每項 W3C 推薦的發展是通過由會員和受邀專家組成的工作組來完成的。工作組的經費來自公司和其他組織，並會創建一個工作草案，最後是一份提議推薦。一般來說，爲了獲得正式的批准，推薦都會被提交給 W3C 會員和主任。

HTML5規範

萬維網聯盟宣佈，HTML5和Canvas 2D規範的制定已經完成，儘管還不能算是W3C標準，但是這些規範已經功能完整，企業和開發人員有了一個穩定的執行和規劃目標。

W3C首席執行官Jeff Jaffe表示：“從今天起，企業用戶可以清楚地知道，他們能夠在未來依賴HTML5。”

HTML5是開放Web標準的基石，它是一個完整的編程環境，適用於跨平臺應用程序、視頻和動畫、圖形、風格、排版和其它數字內容發佈工具、廣泛的網絡功能等等。

爲了減少瀏覽器碎片、實現在所有HTML工具的應用，W3C開始着手W3C標準化的互操作性和測試。和之前宣佈的規劃一樣，W3C計劃在2014年完成HTML5標準。

HTML工作組還發布了HTML5.1、HTML Canvas 2D Context、Level 2以及主要元素的草案，讓開發人員能提前預覽下一輪標準。

What is HTML5

HTML5 ≈ HTML↑ + CSS↑ + JavaScript API↑

廣義上：新一代開發Web富客戶端應用程序整體解決方案

Structure → Style → Interactive

全包了！！！

What is Rich Client

指具有很強交互性和體驗的客戶端程序

十年之前網頁

just for 內容，沒有交互

想要交互、絢麗的效果

Flash

e.g. Moodstream、 Waterlife、 monoface、 etc.

被封殺 and 孤芳自賞

link: 關於H5和Flash

Moodstream：https://www.gettyimages.cn/ Waterlife：http://waterlife.nfb.ca/#/

monoface：https://mono-1.com/

When HTML5

讓Web開發重新迴歸富客戶端的時代

HTML5 的應用場景

• 極具表現力的網頁
  • 案例非常多
• 網頁應用程序
  • PC端：iCloud、百度腦圖、Office 365···
  • APP端：淘寶、京東、美團···
  • WeChat端：淘寶、京東、美團···
• 混合式本地應用
  • PC端：網易雲音樂、有道詞典···
  • APP端：淘寶、京東、美團···
• 簡單的遊戲

HTML5 到底多了點啥？

複製鏈接查看https://www.w3.org/TR/html5-diff/

我個人將這些變化大體分爲三類：

• HTML
• JavaScript
• CSS

HTML

• 標籤
  • 更語義化標籤
  • 應用程序標籤
• 屬性
  • 鏈接關係描述
  • 結構數據標記
  • ARIA
  • 自定義屬性
• 智能表單
  • 新的表單類型
  • 虛擬鍵盤適配
• 網頁多媒體
  • 音頻
  • 視頻
  • 字幕
• Canvas
  • 2D
  • 3D (WebGL)
• SVG

JavaScript API

• 核心平臺提升
  • 新的選擇器
  • Element.classList
  • 訪問歷史API
  • 全屏API
• 網頁存儲
  • Application Cache
  • localStorage
  • sessionStorage
  • WebSQL
  • IndexedDB
• 設備信息訪問
  • 網絡狀態
  • 硬件訪問
  • 設備方向
  • 地理圍欄
• 拖放操作
  • 網頁內拖放
  • 桌面拖入
  • 桌面拖出
• 文件
  • 文件系統API
  • FileReader
• 網絡訪問
  • XMLHttpRequest
  • fetch
  • WebSocket
• 多線程
• 桌面通知

CSS

• New Selector
• Web Fonts
• Text Styles
• Opacity
• HSL Color
• Rounded Corners
• Gradients
• Shadows
• Background Enhancements
• Border Image
• Flexible Box Model
• Transforms
• Transitions
• Animations
• etc. 後面詳細討論

HTML

標籤

更具有語義化的標籤

就讓HTML代碼符合內容的結構化，標籤語義化

以前我們可能是這樣的：

以後我們一定是這樣的：

爲什麼要有語義化標籤

能夠便於開發者閱讀和寫出更優雅的代碼，代碼如詩

同時讓瀏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容

更好地搜索引擎優化

切記

• HTML的職責是描述一塊內容是什麼（或其意義）
• 而不是它長的什麼樣子，它的外觀應該由CSS來決定。

應用程序標籤

• DataList(數據列表)
• Progress(進度條)
• Meter(數值顯示器)
• Menu(右鍵菜單)
• Details(明細)
• View Demo

語義化標籤 學習目標

• 掌握語義化標籤的重要性
• 可以正確使用語義化標籤

屬性

鏈接關係

rel

用來描述指定鏈接與當前文檔的關係，便於機器理解文檔結構

常見的鏈接關係表

alternate	文檔的可選版本（例如打印頁、翻譯頁或鏡像）
stylesheet	文檔的外部樣式表
start	集合中的第一個文檔
next	集合中的下一個文檔
prev	集合中的前一個文檔
contents	文檔目錄
index	文檔索引
glossary	文檔中所用字詞的術語表或解釋
copyright	包含版權信息的文檔
chapter	文檔的章
section	文檔的節
subsection	文檔的子段
appendix	文檔附錄
help	幫助文檔
bookmark	相關文檔
nofollow	用於指定 Google 搜索引擎不要跟蹤鏈接
licence	一般用於文獻，表示許可證的含義
tag	標籤集合
friend	友情鏈接

結構數據標記 *

https://developers.google.com/structured-data/testing-tool/

很高級的東西，只有Google支持

ARIA 屬性 *

Accessible Rich Internet Application (無障礙富互聯網應用程序)

主要針對於屏幕閱讀設備(e.g. NVDA)，更快更好地理解網頁

不僅僅是爲了盲人用戶，更多語義化

• WAI-ARIA無障礙網頁應用屬性完全展示

https://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/

• ARIA讓視障人士更瞭解你的頁面

http://fitdesign.tencent.com/

自定義屬性 data-*

通過DOM存儲與DOM對象強相關的數據

DEMO：

新屬性 學習目標

• 瞭解而已，以後在國內普及開過後，迅速上手

智能表單

新的表單類型

DEMO：

虛擬鍵盤適配

智能表單 學習目標

• 網頁開發過程中可以針對需求使用特定的智能表單類型

網頁多媒體

在此之前需要依賴於第三方插件（e.g. flash）

音頻

視頻

DEMO：

視頻已經加載，點擊播放按鈕即可播放

屬性

字幕

http://www.w3schools.com/tags/tag_track.asp

多媒體 學習目標

• 掌握網頁多媒體的意義
• 對Video標籤和Audio標籤熟練使用
• 瞭解字幕標籤

SVG

SVG *

Scalable Vector Graphics 可縮放矢量圖形

基於可擴展標記語言

優勢：體積小，質量高，效果好，可控程度高

擴展連接： HTML5中的SVG

https://www.w3cschool.cn/html5/html5-svg.html

Inline SVG Demo

SVG File

使用 SVG File 的方式

• 使用 <embed> 標籤
• 使用 <object> 標籤
• 使用 <iframe> 標籤
• Ajax方式加載

SVG 學習目標

• 瞭解SVG是什麼東西
• 可以在網頁中使用別人做好的SVG
• 並可以對SVG文件作出基本調整
• 會用樣式修飾SVG

Canvas

提供網頁級畫布（GDI+）的實現

後面課程詳細來說

Canvas Demo

Moderizer

一個JavaScript針對H5特性兼容的探針

About IE

爲了儘可能讓IE更好地支持HTML5，你可以使用以下兩種方式：

Client side:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Server side:

X-UA-Compatible: chrome=1

What is HTML5

最新一代的WEB技術，用於構建現代Web應用程序！

HTML5 的能力已經覆蓋

• Offline / Storage
• Realtime / Communication
• File / Hardware Access
• Semantics & Markup
• Graphics / Multimedia
• CSS3
• Nuts & Bolts