Intro to-html5

HTML5 开发
Web,MobileWeb & Apps
范圣刚
安博中程在线

HTML5 和他的朋友们
Intro to HTML5

Agenda
安博中程在线
什么是 HTML5 ?
为什么要使用 HTML5？（或者说 HTML5 的重要性在哪里）
HTML5 都包含哪些内容？
HTML5 给 Web 开发带来哪些影响？它的发展趋势是怎样的？
HTML 标准简史和现状
·
·
·
·
·
3/30

什么是 HTML5 ?
HTML5 是定义了 HTML 的标准的最新演进版本。这个术语代表了两个不同的概念：
安博中程在线
它是 HTML 语言的一个新的版本，具有新的元素，属性和行为；
以及可以使 Web 站点和应用更加多样化和功能更强大的更丰富的一套技术。这套
技术有时被称作 HTML5 & Friends 而且往往被缩减到仅是 HTML5。
·
·
4/30

W3C HTML5 和 "HTML5"
从技术上来讲，HTML5 只是来源于 W3C 的一个规范。但是今天我们大多数人谈到
HTML5 的时候，其实是在描述现在正在发生的针对 Web 平台的巨大变化。对于正式
的标准，我们可以称其为 W3C HTML5。比如 W3C HTML5 把 video，audio 这些标
记升级为 Web 的“一等公民”。
我们大家平常所说的 HTML5，通常指的是一个更大的概念。包括并不是 Web 本身的
部分，例如硬件设备访问，二进制数据，文件系统，多线程并发处理等。
简而言之，W3C HTML5 规范是在其上面发生的所有有趣的 HTML5 开发的基础和框
架。
安博中程在线 5/30

W3C HTML5 的重要性所在
虽然HTML5规范的实际内容只是对最近三四年Web平台上最先进技术的一个正式描
述。但是他的重要性在于把多年来的经验进行了文档化，同时也试图移除大部分现在
被认为是错误的东西。
他也为各种DOM API和HTML元素带来了很大的一致性和完整性。
并且有可能最重要的是，它使各种浏览器厂商达成一致。这意味着Web开发者针对
W3C HTML5规范开发的程序应该可以在所有的现代浏览器上工作正常，而无需浏览器
特定的功能。

W3C HTML5 的主要内容
安博中程在线
SEMANTICS
OFFLINE & STORAGE
DEVICE ACCESS
CONNECTIVITY
MULTIMEDIA
3D, GRAPHICS & EFFECTS
PERFORMANCE & INTEGRATION
CSS3
·
·
·
·
·
·
·
·
7/30

SEMANTICS
能够让你更恰当地描述你的内容是什么:
安博中程在线
简洁的语法
新的 outline 元素
HTML5 的表单
供应用程序使用的元素和属性
其他语义元素
·
·
·
·
·
9/30

OFFLINE & STORAGE
能够让网页在客户端本地存储数据以及更高效地离线运行
安博中程在线
在线和离线事件
离线 Web 应用
sessionStorage 和 localStorage
IndexedDB
File API（Web中使用文件）
·
·
·
·
·
11/30

DEVICE ACCESS
能够处理各种输入和输出设备
安博中程在线
Camera API
触控事件
地理位置服务
检测设备方向
指针锁定 API
·
·
·
·
·
13/30

CONNECTIVITY / REALTIME
能够让你和服务器之间通过创新的新技术方法进行通信
安博中程在线
Web Sockets
Server-sent events
WebRTC
·
·
·
15/30

WebRTC
WebRTC 是一个免费的开放项目，致力于通过简单的 Javascript API 为 Web 浏览器提
供实时通讯能力。（P2P视频会议）
基于 HTML5 的 WebRTC 特性可以通过浏览器启用音频，视频通讯功能而无需额外的
插件。
安博中程在线
http://livesino.net/archives/4342.live
16/30

MULTIMEDIA
使 video 和 audio 成为了 Web 中的"一等公民"
安博中程在线
HTML5 音视频
WebRTC
Camera API
Track & WebVTT
·
·
·
·
18/30

GRAPHICS, 3D & EFFECTS
渲染的更多选择
安博中程在线
Canvas 2D
SVG
WebGL
·
·
·
20/30

SVG
SVG(Scalable Vector Graphic)格式已经存在了一个很长的时间，并且有些浏览器已经
能够在Web页中嵌入SVG图片。SVG最终开始被所有的浏览器厂商采用，增加了功能
强大的API，并允许完全访问和操作所包含的元素（即一个真正的一级元素）。
安博中程在线
http://caniuse.com/#search=svg
21/30

WebGL
WebGL是Canvas 3D Context，并且它基本上是一个基于Web的硬件加速OpenGL
API。WebGL可以给Web带来更多的适用领域，包括Web的3D游戏。
安博中程在线
http://www.chromeexperiments.com/detail/euphony/?f=
22/30

PERFORMANCE & INTEGRATION
提供了非常显著的性能优化和更有效的计算机硬件使用
安博中程在线
Web Workers
XMLHttpRequest Level2
更快的 JavaScript 引擎
History API
全屏 API
Drag & Drop
requestAnimationFrame
·
·
·
·
·
·
·
24/30

更快的 JS 引擎
作为应用平台的Web是建立在JavaScript基础之上的，JavaScript在HTML5中是最重要
的部分。
新的Javascript引擎是Web的强大驱动力。如果没有Javascript性能的大大加强，我们
可能还在谈论Web页面而不是Web应用。

CSS3 / STYLING
安博中程在线
Border
Transform
Transition
Animation
New Selector
Multi-columns
Typography
Flexible boxes
...
·
·
·
·
·
·
·
·
·
27/30

对 Web 开发的影响和 Web 开发的趋势
安博中程在线
响应式设计(RWD - Responsive Web Design)
Mobile First
Mobile Webs, Apps, or Hybrid?
Web 应用的新领域
新的工具和技术
...
·
·
·
·
·
·
28/30

然后看一下
安博中程在线
HTML 标准的历史和现状·
29/30

<Thank you!>
Feel free to contact me if you have any question.
微博 @范圣刚
博客 www.tfan.org
github github.com/princetoad

Intro to-html5

More Related Content

Viewers also liked (10)

Similar to Intro to-html5 (20)

More from Tom Fan (20)

Intro to-html5