Html 5 学习-开启H5时代

Getting started with html5.

什么是HTML5？

HTML5是HTML的最新版本，最近才获得部分支持的网络浏览器的制造商。
它包含了从早期版本的HTML的所有功能，包括更严格的XHTML。
它为网络开发人员使用了多种多样的新工具。
它仍然是一个进展中的工作。没有浏览器完全支持HTML5。这将是很多年——也许直到2018年或更晚才得到充分的定义和支持。

HTML5是一个新的网络标准，仍处于发展阶段,为了取代现有的HTML 4.0.1和XHTML 1.0标准。他希望能够减少互联网富应用（RIA）对Flash，Silverlight，JavaFX等的依赖，并且提供更多能有效增强网络应用的API。

HTML5时间表

HTML5的八大新特性

语义
多媒体
离线储存
三维、图形与特效
设备通用
性能与集成
连接
css3

HTML5的八大新特性

First Look at HTML5

XHTML中DOCTYPE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5中DOCTYPE：

<!DOCTYPE html>

XHTML中<html>：

HTML5中<html>：

语义化标签

HTML 5 引入新的HTML元素，通过这些元素，开发者可以更细致的描述文档结构，让文档更加易懂，搜索引擎也能更好的理解页面中各部分间的关系，我们也可以更快更准确的搜索到信息。

HTML 4与 HTML 5

十个新入HTML标签

HTML 5提供的一些新的标签以及和HTML 4的区别。

HTML 4	HTML 5	说明
div	article	标签定义外部的内容
div	aside	article 以外的内容，内容应该与 article 的内容相关
--	figcaption	定义 figure 元素的标题
dl&h1	figure	figure与figcaption：figcaption元素为元素组添加标题
div	header	定义 section 或 document 的页眉
div	footer	定义 section 或 document 的页脚
div	hgroup	用于对网页或区段（section）的标题进行组合
div	nav	定义导航链接的部分
div	section	定义文档中的节（section、区段）
div	time	定义日期或时间，或者两者

其他新入标签和废弃标签

其他新入标签：

html5废弃的一些元素：

basefont、big、center、font、s、strike、tt、u

移除了对框架的支持，以下元素不会再出现在规范中：

frame、frameset、noframes、acronym（被abbr取代）、applet（被object取代）、dir（被ul取代）

第一个简单的HTML5页面

                <!DOCTYPE html>
                <html lang="zh-CN">
                <head>
                    <title>The frist HTML 5 page</title>
                    <meta charset="UTF-8">
                </head>
                <body>
                Enter text here.
                </body>
                </html>

Like this! 简洁Like this!

多媒体

音频（Audio）和视频（Video）

Audio和Video是首批添加到HTML规范中的标签，他们的加入使得我们可以像插入一张图片那样处理音视频。 Like this!

当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

本地存储-Web存储

HTML 5提供了两种在客户端存储数据的新方法：

localStorage - 用于持久化本地储存，除非主动删除，否则永不过期。
sessionStorage - 用于存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，当会话结束，数据也随之销毁。

之前这些数据都是由Cookie完成，但Cookie有4k大小的限制，而且会随HTTP请求一起被传递，无形中拖慢网速、效率不高。

HTML5 增强的表单

input标签type属性被赋予更多的类型：

<input type=email >
<input type=url >
<input type=number >
<input type=tel >
<input type=range min=20 max=100 step=2 >
<input type=color value=#ff0000 >
<input type=date >
<input type=time >
<input type=datetime >
<input type=datetime-local >
<input type=month >
<input type=week >
<input type=time >
<input type=datetime >
<input type=datetime-local >
<input type=month >
<input type=week >
<input type=search results=s >
<input type=text required >
<input type=email required pattern=\w+@[a-z0-9]+\.[a-z]+/g >
... Like this!

设备通用

拖拽与拖放（Drap&Drop）与文件处理(File Processing)

过去我们想实现网页中的拖拽效果，基本上都是使用DOM事件中的mousedown、mousemove、mouseup的鼠标事件监听模拟拖拽效果，为了实现实时拖拽，就要不停地获取鼠标坐标、不停地修改元素的位置，代码一大堆，性能却很差。现在有了HTML5原生的Drap&Drop拖拽事件，再结合FileAPI中的FileReader，实现这样的效果就会变得很容易。

Like this!

连接

WebSocket

现在很多网站为实现即时通讯，所用技术都是轮询。这种模式需要浏览器不断地向服务器发出请求，然而HTTP请求的header信息非常长，这样会占用很多的带宽和服务器资源。
WebSockets是在一个（TCP）接口进行双向通信技术，能更好地节省服务器资源和带宽。
在WebSocket API中，浏览器和服务器只需要做一个握手动作，然后，浏览器和服务器之间就形成一条快速通道，两者之间直接就可以传送数据。

三维、图形与特效

Canvas画布元素

传统网页，总是使用GIF或JPEG来显示图片，这种图形需要实现画好的“静态”图像，而Canvas则是利用JavaScript的一种会话手段，可以用它画图合成图像或做简单的动画。

Like this!
HTML5样例页面-ball-pool HTML5样例页面-Curcumin HTML5样例页面-3D HTML5样例页面-canvascycle HTML5样例页面-ribbon2

性能与集成

XMLHttpRequest 2

作为XMLHttpRequest的改进版，XMLHttpRequest level 2 在更能上有了很大的改进，支持跨源 XMLHttpRequest和进度事件（Progress Events）。

发展前景

在HTML 5未成熟应用的时候，流媒体播放等一些精彩应用必须借助第三方软件才可以实现，比如Flash等
现在HTML 5已经将其超过，它不但可以播放视频和音频
可以开发出各种网络在线应用程序，如标识的地理位置、离线存储、拖放、图片处理等。
W3C的HTML5社区领袖Shelley宣布，HTML5的开发工作已经接近完成，最后一次聆讯工作已经开始，那么该标准就将在2012年成为国际标准
HTML5应用越来越多

THE END

Thanks for listening!