1 / 22

HTML5

HTML5. Contents. HTML 5 待解决问题与优势 HTML5 与 HTML4 区别 Canvas 元素 Audio 与 Video 本地存储 离线应用程序 通讯 API. HTML5 待 解决问题 与优势. 待解决问题 Web 浏览器之间的兼容性很低，规范不统一，没有标准化 文档结构不够明确 Web 程序功能受到限制 优势 开发 WEB 程序更简单，提供更多 API 开发 HTML 更简洁，提供更多新的属性和元素，提供了大量可以替代脚本语言的属性标签. HTML5 与 HTML4 的区别. 语法的改变 新增元素和废除元素

dagmar
Télécharger la présentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • 编写与拖放有关的事件代码 • 代码实例：

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

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

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

  11. Vedio type

  12. Audio type

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

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

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

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

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

  18. 跨域通信事例

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

  20. 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() } 建立连接 发送数据 断开连接

  21. Thanks

More Related