HTML5 基础

HTML5媒体标签

视频格式

当前,video 元素支持三种视频格式:

  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
  • MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

chrome 仅支持H.264编码格式的视频


拖放

被拖拽的元素

需要拖拽属性 draggable="true"

并且设置id 和拖拽触发事件 ondragstart="drag(event)"

接受被拖拽元素的div

需要设置允许放置 在被拖拽元素经过该区域的事件被触发时 ondragover="allowDrop(event)"

设置被拖拽元素放置(拖放动作)时的触发事件ondrop="drop(event)"


Canvas(画布)

<canvas id="myCanvas" width="200" height="100"></canvas>

创建画布元素,并规定宽度及高度

Canvas 元素本身没有绘制能力,所有的绘制动作都由js控制完成。

在画布上绘制线条 (相对画布左上角(0,0)的坐标)

画线效果

在画布上绘制渐变颜色效果


内联 SVG

什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

*注释

  • standalone 该属性规定此 SVG 文件是否是“独立的”,或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里,是 DTD 文件。DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C,含有所有允许的 SVG 元素。
  • SVG 代码以 <svg>元素开始,包括开启标签 <svg> 和关闭标签 </svg>。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 SVG 命名空间。
  • <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性,那么圆点会被设置为 (0, 0)。r 属性定义圆的半径
  • strokestroke-width 属性控制如何显示形状的轮廓。这里圆的轮廓设置为 2px 宽,黑边框。
  • fill 属性设置形状内的颜色。
  • 开启标签必须有关闭标签

svg1

HTML内嵌SVG的三种形式

  1. <embed>

注释:当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法,但并不是HTML规范中规定的标签,如果需要创建合法的 XHTML,就不能使用 <embed>

  1. <object>

注释: <object> 标签是 HTML 4 的标准标签,被所有较新的浏览器支持。但是不允许使用脚本。

在最新的Adobe SVG Viewer中 <object>无法正常工作。

  1. <iframe>

注释:<iframe>可以工作在大部分场合

SVG预定义形状

SVG 有一些预定义的形状元素,可被开发者使用和操作:

形状 标签
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

Canvas与SVG的比较

  • Canvas
    • 依赖分辨率
    • 不支持事件处理器
    • 弱的文本渲染能力
    • 能够以 .png 或 .jpg 格式保存结果图像
    • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
  • SVG
    • 不依赖分辨率
    • 支持事件处理器
    • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
    • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
    • 不适合游戏应用

地理定位

HTML5 Geolocation API 用于获得用户的地理位置。
Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
注释:对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。

getCurrentPosition() 方法 - 返回数据
若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的纬度
coords.accuracy 位置精度
coords.altitude 海拔,海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向,从正北开始以度计
coords.speed 速度,以米/每秒计
timestamp 响应的日期/时间

Web存储

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储


应用程序缓存

HTML5 引入了应用程序缓存,并可在没有因特网连接时进行访问。
所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。

应用程序缓存为应用带来三个优势:

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

Cache Manifest 基础
如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性:

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议的文件扩展名是:”.appcache”。
注:manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置。

Apache服务器配置mainfest

  1. 在服务器上添加MIME TYPE:
    在Apache服务器中注册新的MIME类型时,需要修改mime.types文件(Apache的设置文件,与httpd.conf在同一目录下)
    具体做法为,在其中追加如下的行。
    text/cache-manifest manifest
  2. 创建mainfest文件
  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

demo.appcache文件


Web Workers

web worker 是运行在后台的 JavaScript,不会影响页面的性能。
所有主流浏览器均支持 web worker,除了 Internet Explorer。

由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:

  • window 对象
  • document 对象
  • parent 对象


服务器发送事件

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

EventSource 对象用于接收服务器发送事件通知:

  • 建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 “demo_sse.php”)
  • 每接收到一次更新,就会发生 onmessage 事件
  • 当 onmessage 事件发生时,把已接收的数据推入 id 为 “result” 的元素中
  • onopen 当通往服务器的连接被打开
  • onmessage 当接收到消息
  • onerror 当错误发生

服务器端代码示例
服务器端事件流中,需要把 “Content-Type” 报头设置为 “text/event-stream”。

PHP 代码 (demo_sse.php):

ASP 代码 (VB) (demo_sse.asp):

  • 把报头 “Content-Type” 设置为 “text/event-stream”
  • 规定不对页面进行缓存
  • 输出发送日期(始终以 “data: “ 开头)
  • 向网页刷新输出数据

发表评论

电子邮件地址不会被公开。 必填项已用*标注