SlideShare a Scribd company logo
1 of 41
Download to read offline
HTML5 最重要的部分及
   其他特性概览
范圣刚,princetoad@gmail.com, www.tfan.org
议题
• W3C HTML5和“HTML5”
• W3C HTML5的重要性所在
• 更快的JS引擎
• 实时Web
• 本地存储和⼆二进制数据⽀支持
• 离线Web应⽤用和File APIs
• ...
W3C HTML5 和
     “HTML5”
从技术上来讲,HTML5只是来源于W3C的⼀一个规范。
但是今天我们⼤大多数⼈人谈到HTML5的时候,其实是在
描述现在正在发⽣生的针对Web平台的巨⼤大变化。对于
正式的标准,我们可以称其为”W3C HTML5”。⽐比
如W3C HTML5把video,audio这些标记升级为
Web的“⼀一等公民”。
我们⼤大家平常所说的HTML5,通常指的是⼀一个更⼤大的
概念。包括并不是Web本⾝身的部分,例如硬件设备访
问,⼆二进制数据,⽂文件系统,多线程并发处理等。

简⽽而⾔言之,W3C HTML5规范是在其上⾯面发⽣生的所有
有趣的HTML5开发的基础和框架。
W3C HTML5的重要性所
       在
虽然HTML5规范的实际内容只是对最近三四年
Web平台上最先进技术的⼀一个正式描述。但是他
的重要性在于把多年来的经验进⾏行了⽂文档化,同
时也试图移除⼤大部分现在被认为是错误的东⻄西。

他也为各种DOM API和HTML元素带来了很⼤大的
⼀一致性和完整性。

并且有可能最重要的是,它使各种浏览器⼚厂商达
成⼀一致。这意味着Web开发者针对W3C HTML5
规范开发的程序应该可以在所有的现代浏览器上
⼯工作正常,⽽而⽆无需浏览器特定的功能。
HTML5的一些重要特性
HTML5 ~= HTML + CSS
       + JS
  HTML5 = 现代Web开发的下⼀一代特性
更快的JS引擎

作为应⽤用平台的Web是建⽴立在JavaScript基础之
上的,JavaScript在HTML5中是最重要的部分。

新的Javascript引擎是Web的强⼤大驱动⼒力。如果
没有Javascript性能的⼤大⼤大加强,我们可能还在
谈论Web⻚页⾯面⽽而不是Web应⽤用。
Web Sockets

Web Sockets允许我们在Web中构建持久连接。

这个特性把浏览器直接带到了⾼高度交互的⺴⽹网络应
⽤用空间。继快速Javascript引擎之后,低延迟⺴⽹网
络具有允许Web征服新的应⽤用领域的最⼤大潜⼒力。
二进制数据类型
Javascript最初是作为⼀一个验证⽂文本形式表单数
据的⽅方法存在的。

然⽽而,HTML5包含的很多⼀一级元素,接收并
(或)输出⼆二进制数据,使本地的Javascript⼆二
进制数据变得必不可少。

许多年来,开发者使⽤用各中hack⽅方法在⽼老的JS数
据类型上编码成⼆二进制数据。但是使⽤用这种hack
⽅方法是⼀一个重⼤大的阻碍,并且如果没有本地⼆二进
制数据⽀支持的话HTML5的完整能⼒力就不会被释
放。
Web Audio API
这⾥里指的并不仅仅是<audio>标记,更多的是说从
Javascript中可以进⾏行低延迟,直接性的⾳音频操作的APIs/
规范。
<audio>(是W3C HTML5的⼀一部分)允许⾳音频⽂文件被直接
嵌⼊入到Web⻚页⾯面,并且它提供了⼀一个播放和同步的API。
Web Audio API规范允许直接进⾏行⾳音频波形的⽣生成和操
作,并且解决了当前存在的audio标记实现中的⾼高延迟问
题。这些规范仍然⾮非常年轻,并且最终⽅方案可能会和
<audio>合并。但是这些Web Audio API建议涉及的问题
在未来的浏览器中仍然会以这样或者那样的形式存在。
Canvas 2D Context
http://dev.w3.org/html5/2dcontext/

为HTML的canvas元素定义了⼀一个2D的上下⽂文环
境。

允许直接像素操作,“它是依赖分辨率的位图画
布,你可以在canvas上⾯面绘制任意图形,甚⾄至加
载照⽚片”。

在⺴⽹网⻚页中,⼀一个canvas就是⼀一个矩形区域。你可
以在这个区域内通过JavaScript任意地绘制图
形。
CSS3和WOFF

CSS3(Cascading Style Sheet 3)和WOFF(Web
Open Font Format)⼀一起给Web上的设计,书
写,布局以及视觉变换带来了强⼤大⼒力量。

此外,使⽤用CSS3(尤其是Flexible Box
Model),Web应⽤用最终具有了简单⽽而强⼤大的⽅方
法实现⽤用户界⾯面布局,⽽而没有在CSS2中的那种混
乱的元素定位。
本地存储,离线应用和
   文件API
有很多应⽤用领域,如果没有快速的,本地化和持
久化的存储是不⾏行的。

⼀一些形式的本地存储对Web应⽤用来说当在没有有
效的互联⺴⽹网连接的时候也是有⽤用的。

在这个领域⾥里有相当数量的APIs/规范正在开发,
但是他们都是解决pre-HTML5浏览器同样的的基
本局限性的不同⽅方⾯面。
Web Workers
新的软件模型必须最⼤大限度的发挥设备的多核特性。虽然
JS⼀一直是单线程的语⾔言,但是因为其事件驱动特性,这意
味着虽然不能同时在⼀一个⺴⽹网⻚页同时运⾏行多个JS,但是浏览
器可以根据正在运⾏行的JS代码同时做多件事情(异步处
理)。作为事件驱动的话只能达到这种程度。

Web Workers规范被制定出来允许⼀一个单独的⺴⽹网⻚页可以同
时有多个线程运⾏行Javascript。为了避免通常多线程编程
带来的⼤大量复杂性(锁,特殊数据结构等),Web
Workers是独⽴立的Javascript上下⽂文,并且它们只可以互
相之间以及跟Javascript主线程之间使⽤用事件驱动消息进
⾏行交互。
SVG 1.1/2.0
SVG(Scalable Vector
Graphic)格式已经存在了⼀一个
很⻓长的时间,并且有些浏览器
已经能够在Web⻚页中嵌⼊入SVG
图⽚片。

SVG最终开始被所有的浏览器
⼚厂商采⽤用,增加了功能强⼤大的
API,并允许完全访问和操作所
包含的元素(即⼀一个真正的⼀一
级元素)。
WebGL
  http://www.chromeexperiments.com/webgl/
WebGL是Canvas 3D
Context,并且它基本上是⼀一
个基于Web的硬件加速
OpenGL API。

WebGL可以给Web带来更多
的适⽤用领域,包括Web的3D游
戏。
HTML5新的语法标记和
      表单
简化的DOCTYPE声明
简化的JavaScript嵌入
简化的嵌入式样式
简化的样式表链接
新的语义化标记
<header>

<footer>

<article>

<section>

<hgroup>

<aside>

......
有帮助的属性
<header>

<footer>

<article>

<section>

<hgroup>

......
新的表单元素
tel, search, email, url, date,
range, color, number

autofocus, required,
placeholder, min, max
被移除的元素
acronym    dir

applet     font       strike

basefont   frame      tt

big        frameset

center     noframes
HTML5的
Specifications/APIs
WebRTC/Stream API
            http://www.webrtc.org/


WebRTC是⼀一个免费的,开放项
⺫⽬目,致⼒力于通过简单的
Javascript API为Web浏览器提
供实时通讯能⼒力。(P2P视频会
议)

基于HTML5的WebRTC特性可以
通过浏览器启⽤用⾳音频,视频通讯
功能⽽而⽆无需额外的插件。
Geolocation



地理位置API
Web Notification
浏览器可以在web page的上
下⽂文之外向⽤用户显⽰示简单的通
知功能。
Web Timing API


包含⻚页⾯面的所有度量信息,可以记录各种时间
值。通过这种时间值,可以全⾯面了解⻚页⾯面在被加
载到浏览器的过程中都经历了哪些阶段,⽽而哪些
阶段可能是影响性能的瓶颈。
Page Visibility


为⺴⽹网站开发者定义了⼀一种可以编程判断⻚页⾯面的当
前可⻅见状态的⽅方法,以开发有效使⽤用power和
CPU的web application。

(界⾯面上不可⻅见的动画和视频都不要渲染)
Microdata

微数据,使⽤用来⾃自⾃自定义词汇
表的,带作⽤用域的名/值对来给
DOM做标记。本质上是给那些
已经在⻚页⾯面上可⻅见的数据再施
加额外的语义。
Pick Contacts
Intent(Contacts API)


定义了从Web application内访问⽤用户的地址簿
服务的Web Intent。同时还定义了由实现了这个
规范的服务返回的联系⼈人数据的格式。
DeviceOrientation
      Event
定义了⼏几个新的可以提供主机
设备物理朝向和移动的DOM事
件。
Timing control for script-
   based animations


 开发者可以编写脚本限制
 animation的更新频率。可以
 根据当前标签是否活动,CPU
 负载等来决定animation
 rate。
Calendar API
Calendar API 定义了从⽤用户的
calendar服务获得读取访问的
⾼高层接⼝口。
Touch Events


Touch Events 规范通过定义接
⼝口允许web application直接
处理触控事件。
Media Capture
Device API Working
      Group
   http://www.w3.org/2009/dap/
CSS3
•   新的选择符

•   动画

•   变形,转换...

•   ⽂文字效果(阴影,换⾏行)

•   边框效果(圆⾓角...)

•   多⾏行

•   透明度的引⼊入

•   渐变

•   Flexible Box Model
<Thank you!>

More Related Content

Viewers also liked

Where'd all my memory go? SCALE 12x SCALE12x
Where'd all my memory go? SCALE 12x SCALE12xWhere'd all my memory go? SCALE 12x SCALE12x
Where'd all my memory go? SCALE 12x SCALE12xJoshua Miller
 
03 Managing Memory with ARC
03 Managing Memory with ARC03 Managing Memory with ARC
03 Managing Memory with ARCTom Fan
 
Android 平台 HTML5 应用开发
Android 平台 HTML5 应用开发Android 平台 HTML5 应用开发
Android 平台 HTML5 应用开发Tom Fan
 
Automatic Reference Counting
Automatic Reference CountingAutomatic Reference Counting
Automatic Reference CountingGiuseppe Arici
 
Deviceaccess
DeviceaccessDeviceaccess
DeviceaccessTom Fan
 
Html5 history
Html5 historyHtml5 history
Html5 historyTom Fan
 

Viewers also liked (6)

Where'd all my memory go? SCALE 12x SCALE12x
Where'd all my memory go? SCALE 12x SCALE12xWhere'd all my memory go? SCALE 12x SCALE12x
Where'd all my memory go? SCALE 12x SCALE12x
 
03 Managing Memory with ARC
03 Managing Memory with ARC03 Managing Memory with ARC
03 Managing Memory with ARC
 
Android 平台 HTML5 应用开发
Android 平台 HTML5 应用开发Android 平台 HTML5 应用开发
Android 平台 HTML5 应用开发
 
Automatic Reference Counting
Automatic Reference CountingAutomatic Reference Counting
Automatic Reference Counting
 
Deviceaccess
DeviceaccessDeviceaccess
Deviceaccess
 
Html5 history
Html5 historyHtml5 history
Html5 history
 

Similar to Html5 最重要的部分

HTML5 历史、现状及未来
HTML5 历史、现状及未来HTML5 历史、现状及未来
HTML5 历史、现状及未来Yongbin Tian
 
Web开发基础
Web开发基础Web开发基础
Web开发基础dynaturtle
 
Re Introduce Web Development
Re Introduce Web DevelopmentRe Introduce Web Development
Re Introduce Web Developmentfinian lau
 
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)Will Huang
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介peterju
 
Koubei banquet 27
Koubei banquet 27Koubei banquet 27
Koubei banquet 27Koubei UED
 
introduction of web 2.0
introduction of web 2.0introduction of web 2.0
introduction of web 2.0soboring
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-applydiafly
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5 Tony Deng
 
陈子舜-Html5 based web app
陈子舜-Html5 based web app陈子舜-Html5 based web app
陈子舜-Html5 based web appWebrebuild
 
跨浏览器客户端技术预研
跨浏览器客户端技术预研跨浏览器客户端技术预研
跨浏览器客户端技术预研Henry Lee
 
Web development overview
Web development overviewWeb development overview
Web development overviewWei Sun
 
Web development introduced history and future
Web development introduced history and futureWeb development introduced history and future
Web development introduced history and futurejarryli
 
Web storage&web socket&canvas
Web storage&web socket&canvasWeb storage&web socket&canvas
Web storage&web socket&canvasmolice
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型Tom Fan
 

Similar to Html5 最重要的部分 (20)

HTML5 历史、现状及未来
HTML5 历史、现状及未来HTML5 历史、现状及未来
HTML5 历史、现状及未来
 
HTML5
HTML5HTML5
HTML5
 
Web开发基础
Web开发基础Web开发基础
Web开发基础
 
Re Introduce Web Development
Re Introduce Web DevelopmentRe Introduce Web Development
Re Introduce Web Development
 
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
 
Webrtc
WebrtcWebrtc
Webrtc
 
Html5
Html5Html5
Html5
 
漫谈web前端
漫谈web前端漫谈web前端
漫谈web前端
 
前端開發學習簡介
前端開發學習簡介前端開發學習簡介
前端開發學習簡介
 
Koubei banquet 27
Koubei banquet 27Koubei banquet 27
Koubei banquet 27
 
introduction of web 2.0
introduction of web 2.0introduction of web 2.0
introduction of web 2.0
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-app
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5
 
陈子舜-Html5 based web app
陈子舜-Html5 based web app陈子舜-Html5 based web app
陈子舜-Html5 based web app
 
跨浏览器客户端技术预研
跨浏览器客户端技术预研跨浏览器客户端技术预研
跨浏览器客户端技术预研
 
Web development overview
Web development overviewWeb development overview
Web development overview
 
Web development introduced history and future
Web development introduced history and futureWeb development introduced history and future
Web development introduced history and future
 
Web storage&web socket&canvas
Web storage&web socket&canvasWeb storage&web socket&canvas
Web storage&web socket&canvas
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型HTML5 生态系统和应用架构模型
HTML5 生态系统和应用架构模型
 

More from Tom Fan

Semantics
SemanticsSemantics
SemanticsTom Fan
 
Multimedia
MultimediaMultimedia
MultimediaTom Fan
 
Intro to-html5
Intro to-html5Intro to-html5
Intro to-html5Tom Fan
 
Geolocation
GeolocationGeolocation
GeolocationTom Fan
 
File api
File apiFile api
File apiTom Fan
 
Webstorage
WebstorageWebstorage
WebstorageTom Fan
 
18 NSUserDefaults
18 NSUserDefaults18 NSUserDefaults
18 NSUserDefaultsTom Fan
 
17 Localization
17 Localization17 Localization
17 LocalizationTom Fan
 
16 CoreData
16 CoreData16 CoreData
16 CoreDataTom Fan
 
15 Subclassing UITableViewCell
15 Subclassing UITableViewCell15 Subclassing UITableViewCell
15 Subclassing UITableViewCellTom Fan
 
14 Saving Loading and Application States
14 Saving Loading and Application States14 Saving Loading and Application States
14 Saving Loading and Application StatesTom Fan
 
13 UIPopoverController and Modal View Controller
13 UIPopoverController and Modal View Controller13 UIPopoverController and Modal View Controller
13 UIPopoverController and Modal View ControllerTom Fan
 
12 Camera
12 Camera12 Camera
12 CameraTom Fan
 
11 UINavigationController
11 UINavigationController11 UINavigationController
11 UINavigationControllerTom Fan
 
10 Editing UITableView
10 Editing UITableView10 Editing UITableView
10 Editing UITableViewTom Fan
 
09 UITableView and UITableViewController
09 UITableView and UITableViewController09 UITableView and UITableViewController
09 UITableView and UITableViewControllerTom Fan
 
08 Notification and Rotation
08 Notification and Rotation08 Notification and Rotation
08 Notification and RotationTom Fan
 
07 View Controllers
07 View Controllers07 View Controllers
07 View ControllersTom Fan
 
06 Subclassing UIView and UIScrollView
06 Subclassing UIView and UIScrollView06 Subclassing UIView and UIScrollView
06 Subclassing UIView and UIScrollViewTom Fan
 

More from Tom Fan (20)

Semantics
SemanticsSemantics
Semantics
 
Multimedia
MultimediaMultimedia
Multimedia
 
Intro to-html5
Intro to-html5Intro to-html5
Intro to-html5
 
Geolocation
GeolocationGeolocation
Geolocation
 
File api
File apiFile api
File api
 
Css3
Css3Css3
Css3
 
Webstorage
WebstorageWebstorage
Webstorage
 
18 NSUserDefaults
18 NSUserDefaults18 NSUserDefaults
18 NSUserDefaults
 
17 Localization
17 Localization17 Localization
17 Localization
 
16 CoreData
16 CoreData16 CoreData
16 CoreData
 
15 Subclassing UITableViewCell
15 Subclassing UITableViewCell15 Subclassing UITableViewCell
15 Subclassing UITableViewCell
 
14 Saving Loading and Application States
14 Saving Loading and Application States14 Saving Loading and Application States
14 Saving Loading and Application States
 
13 UIPopoverController and Modal View Controller
13 UIPopoverController and Modal View Controller13 UIPopoverController and Modal View Controller
13 UIPopoverController and Modal View Controller
 
12 Camera
12 Camera12 Camera
12 Camera
 
11 UINavigationController
11 UINavigationController11 UINavigationController
11 UINavigationController
 
10 Editing UITableView
10 Editing UITableView10 Editing UITableView
10 Editing UITableView
 
09 UITableView and UITableViewController
09 UITableView and UITableViewController09 UITableView and UITableViewController
09 UITableView and UITableViewController
 
08 Notification and Rotation
08 Notification and Rotation08 Notification and Rotation
08 Notification and Rotation
 
07 View Controllers
07 View Controllers07 View Controllers
07 View Controllers
 
06 Subclassing UIView and UIScrollView
06 Subclassing UIView and UIScrollView06 Subclassing UIView and UIScrollView
06 Subclassing UIView and UIScrollView
 

Html5 最重要的部分