HTML5

1. HTML5

2. Contents • HTML 5待解决问题与优势 • HTML5与HTML4区别 • Canvas元素 • Audio与Video • 本地存储 • 离线应用程序 • 通讯API

3. HTML5待解决问题与优势 待解决问题 • Web浏览器之间的兼容性很低，规范不统一，没有标准化 • 文档结构不够明确 • Web程序功能受到限制 优势 • 开发WEB程序更简单，提供更多API • 开发HTML更简洁，提供更多新的属性和元素，提供了大量可以替代脚本语言的属性标签

4. HTML5与HTML4的区别 • 语法的改变 • 新增元素和废除元素 • 新增属性和废除属性 • 全局属性 • 新增主体结构元素 article、aside、nav、time、pubdate • 新增非主体结构元素 address、footer、hgroup、header • 表单与文件

5. HTML5中的标记方法 • 确保兼容性

6. 表单与文件 • 表单输入类型 email 、url、number 、range 、Date pickers (date, month, week, time, datetime, datetime- local) 、search 、color • 增强的页面元素 datalist：输入域的选项列表 keygen：提供一种验证用户的可靠方法 output ：用于不同类型的输出 • 新增属性 新的 form 属性…… 新的 input 属性……

7. 拖放API • HTML5之前，mousedown、mouseup、mousemove支持在浏览器内部进行拖放 • HTML5支持浏览器与其他应用程序之间的数据相互拖动 • 实现拖放操作的两个步骤 • 将拖放元素的draggable属性设置为true • 编写与拖放有关的事件代码 • 代码实例：

9. Canvas元素 • Canvas元素，一块无色透明的区域 • 利用JavaScript编写在其中进行绘画

10. 绘图工具 线条、矩形、圆弧、曲线、圆等 • 效果 填充和描边、线性和径向的渐变 • 转换 缩放、旋转、平移 • 图像裁剪 • 动画和多重画布

11. 多媒体播放 • HTML5 之前，视频、音频与动画，使用第三方播放器、flash，在浏览器上安装从插件。 • HTML5提供了Video与Audio接口，不需要插件， 只需浏览器 • 属性 src、autoplay、preload、controls、error…… • 方法 play、pause、load、canPlayType • 事件 监听方式、用javaScript脚本捕捉事件

12. Vedio type

13. Audio type

14. 对比：一段播放视频的代码

15. 本地存储 • Web storage Cookies：大小、带宽、复杂性 sessionStorage（保存用户从进入网站到离开网站 这段时间内所要求保存的任何数据）临时保存localStorage（将数据保存在客户端本地的硬件设备） 永久保存 • 本地数据库 在客户端本地建立一个数据库，SQLLite数据库 减轻服务器负担，加快数据访问速度

16. 对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据 • HTML5 使用 JavaScript 来存储和访问数据 <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>

17. 离线的应用程序 • 离线web应用 本地缓存机制，提供离线开发可能性 Manifest文件：存储页面的资源文件名称及路径 当没有网络时可通过本地缓存正常运行Web应用 • 浏览器与服务器交互 只要页面上的资源文件被本地缓存过，下次打开时， 先使用本地存储中的资源，然后请求manifest文件 • 注意：页面不会立即启用更新后的manifest文件， 只有在下次打开页面时才用新的manifest文件内容

18. 通信API • 跨文档消息传输 不同网页文档、不同端口、不同域之间传递 首先，接受其他窗口发过来的消息，要对窗口对象的message事件进行监视： Window.addEventListener(); 其次，向其他窗口发送消息： otherWindow.postMessage(message,targetOrigin) message：发送个消息文本 targetOrigin：接收消息对象的窗口的URL地址

19. 跨域通信事例

20. 通信API • Socket传输数据 在服务器与客户端之间建立一个非HTTP的双向连接，这个链接是实时的，也是永久的，直到客户端显式关闭这个连接。 服务器不再被动等待客户端发出的请求，只要客户端和服务器端建立一次连接之后，服务器端就可以在需要的时候，主动将数据推送到客户端，无需重新连接

21. Socket事例 Function connect（） { VarwebSocket= new WebSocket(“ws://localhost:8005/socket”); Wensocket.open() { //监听socket打开事件 //获取WebSocket对象状态（正在连接、建立连接……） readyState[webSocket.readyState] } webSocket.onMessage() { //接收服务器传过来的数据} webSocket.onClose() = function() { //监听socket关闭事件 } } Function send() { //向服务器发送数据 webSocket.send(“data”) } Function disconnect() { //切断通讯连接 webSocket.close() } 建立连接 发送数据 断开连接

22. Thanks