Html5
Download
1 / 22

HTML5 - PowerPoint PPT Presentation


  • 200 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' HTML5' - dagmar


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Contents
Contents

  • HTML 5待解决问题与优势

  • HTML5与HTML4区别

  • Canvas元素

  • Audio与Video

  • 本地存储

  • 离线应用程序

  • 通讯API


Html51
HTML5待解决问题与优势

待解决问题

  • Web浏览器之间的兼容性很低,规范不统一,没有标准化

  • 文档结构不够明确

  • Web程序功能受到限制

    优势

  • 开发WEB程序更简单,提供更多API

  • 开发HTML更简洁,提供更多新的属性和元素,提供了大量可以替代脚本语言的属性标签


Html5 html4
HTML5与HTML4的区别

  • 语法的改变

  • 新增元素和废除元素

  • 新增属性和废除属性

  • 全局属性

  • 新增主体结构元素

    article、aside、nav、time、pubdate

  • 新增非主体结构元素

    address、footer、hgroup、header

  • 表单与文件


  • HTML5中的标记方法

  • 确保兼容性


表单与文件

  • 表单输入类型

    email 、url、number 、range 、Date pickers

    (date, month, week, time, datetime, datetime-

    local) 、search 、color

  • 增强的页面元素

    datalist:输入域的选项列表

    keygen:提供一种验证用户的可靠方法

    output :用于不同类型的输出

  • 新增属性

    新的 form 属性……

    新的 input 属性……


拖放API

  • HTML5之前,mousedown、mouseup、mousemove支持在浏览器内部进行拖放

  • HTML5支持浏览器与其他应用程序之间的数据相互拖动

  • 实现拖放操作的两个步骤

    • 将拖放元素的draggable属性设置为true

    • 编写与拖放有关的事件代码

  • 代码实例:


Canvas
Canvas元素

  • Canvas元素,一块无色透明的区域

  • 利用JavaScript编写在其中进行绘画


  • 绘图工具

    线条、矩形、圆弧、曲线、圆等

  • 效果

    填充和描边、线性和径向的渐变

  • 转换

    缩放、旋转、平移

  • 图像裁剪

  • 动画和多重画布


多媒体播放

  • HTML5 之前,视频、音频与动画,使用第三方播放器、flash,在浏览器上安装从插件。

  • HTML5提供了Video与Audio接口,不需要插件,

    只需浏览器

  • 属性

    src、autoplay、preload、controls、error……

  • 方法

    play、pause、load、canPlayType

  • 事件

    监听方式、用javaScript脚本捕捉事件


Vedio type




本地存储

  • Web storage

    Cookies:大小、带宽、复杂性

    sessionStorage(保存用户从进入网站到离开网站

    这段时间内所要求保存的任何数据)临时保存localStorage(将数据保存在客户端本地的硬件设备)

    永久保存

  • 本地数据库

    在客户端本地建立一个数据库,SQLLite数据库

    减轻服务器负担,加快数据访问速度



离线的应用程序对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据

  • 离线web应用

    本地缓存机制,提供离线开发可能性

    Manifest文件:存储页面的资源文件名称及路径

    当没有网络时可通过本地缓存正常运行Web应用

  • 浏览器与服务器交互

    只要页面上的资源文件被本地缓存过,下次打开时,

    先使用本地存储中的资源,然后请求manifest文件

  • 注意:页面不会立即启用更新后的manifest文件,

    只有在下次打开页面时才用新的manifest文件内容


通信对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据API

  • 跨文档消息传输

    不同网页文档、不同端口、不同域之间传递

    首先,接受其他窗口发过来的消息,要对窗口对象的message事件进行监视:

    Window.addEventListener();

    其次,向其他窗口发送消息:

    otherWindow.postMessage(message,targetOrigin)

    message:发送个消息文本

    targetOrigin:接收消息对象的窗口的URL地址


跨域通信事例对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据


通信对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据API

  • Socket传输数据

    在服务器与客户端之间建立一个非HTTP的双向连接,这个链接是实时的,也是永久的,直到客户端显式关闭这个连接。

    服务器不再被动等待客户端发出的请求,只要客户端和服务器端建立一次连接之后,服务器端就可以在需要的时候,主动将数据推送到客户端,无需重新连接


Socket
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()

}

建立连接

发送数据

断开连接


Thanks
Thanks对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据


ad