HTML5 学习总结

发表于 更新于 分类于 ， Valine：

HTML5 作为目前已经广泛使用的新版本 HTML，具有很多新的特性，在这一篇中进行总结。

0. 概述

HTML5 是下一代的 HTML，它是 W3C 与 WHATWG 合作的结果。HTML 的一些建立的原则包括：

  • 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
  • 减少对外部插件的需求（比如 Flash）
  • 更优秀的错误处理
  • 更多取代脚本的标记
  • HTML5 应该独立于设备
  • 开发进程应对公众透明

HTML5 中一些有趣的新特性包括：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素，比如 article、footer、header、nav、section
  • 新的表单控件，比如 calendar、date、time、email、url、search

1. 多媒体

1.1 视频

HTML5 通过使用 video 元素的方式提供对视频的支持，一共支持如下三种视频格式：

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

使用方法非常简单：

1
2
3
<video src="/i/movie.ogg"  width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

其中， controls 属性供 添加播放、暂停和音量控件。 两个 video 标签 之间的内容用于浏览器不支持 video 元素时显示。

HTML5 video 元素拥有 方法、属性和事件。

其中的方法用于播放、暂停以及加载等(如下述代码中的 play(), pause() 等函数）。其中的属性（比如时长、音量等）可以被读取或设置 (例如下方代码中的 myVideo.paused)。 DOM 事件能够进行通知，比方说，<video> 元素开始播放、已暂停，已停止，等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html> 
<html> 
<body> 
<div style="text-align:center;">
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br /> 
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
</div> 

<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause(){ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
function makeBig(){ 
myVideo.width=560; 
} 
function makeSmall(){ 
myVideo.width=320; 
} 
function makeNormal(){ 
myVideo.width=420; 
} 
</script> 
</body> 
</html>

1.2 音频

HTML5 使用 audio 元素来提供对音频的支持，能够播放声音文件或者音频流。

audio 元素所支持的音频格式如下（也 depends on 浏览器的类型）：

  1. Ogg Vorbis
  2. MP3
  3. Wav

使用方法(与video 非常类似)：

1
2
3
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

2. 拖放

拖放（Drag 和 drop）是 HTML5 标准的组成部分，任何元素都可以实现拖放。

参考如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>

<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>

<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

分析上述代码，具体实现步骤如下：

  • 设置元素为可拖放：draggable="true"
  • 拖动什么：ondragstart属性调用了 drag(event) 函数，它规定了被拖动的数据，dataTransfer.setData() 方法设置被拖数据的数据类型和值。 在本例子中，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。
  • 放到何处：ondragover, ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，因此 preventDefault() 后则允许元素放入。上述代码中，通过调用 ondragover 事件的 event.preventDefault() 方法实现。
  • 进行放置：ondrop,当放置被拖数据时，会发生 drop 事件。 代码中 dataTransfer.getData("Text") 获取的是 前面 setData() 方法设定的元素对象。

3. 画布与 SVG

3.1 Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

创建 Canvas元素 <canvas id="myCanvas" width="200" height="100"></canvas>

通过JavaScript代码绘制图像

1
2
3
4
5
6
7
8
// 通过 id 获取画布
var c=document.getElementById("myCanvas");
// 创建 context 对象，getContext("2d") 对象是内建的 HTML5 对象
var cxt=c.getContext("2d");
// 设置颜色-红色
cxt.fillStyle="#FF0000";
// 绘制矩形
cxt.fillRect(0,0,150,75);

3.2 SVG

SVG 指 可伸缩矢量图形 (Scalable Vector Graphics - 缩放不会失真)，它使用 XML 格式定义图形。HTML5 支持内联 SVG。

下面的例子为一个 .svg 文件的代码，绘制了一个红色的圆形图案。

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。 standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件 (文档类型定义-Document Type Definition, 相当于一个 XML 元素的模板，里面定义 XML 文件中的元素，元素的属性等)。

第二和第三行引用了这个外部的 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 命名空间。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

将SVG 插入到 HTML中的3种方法

1- 使用 <embed> 标签, 语法如下：

1
2
3
<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

pluginspage 属性指向下载插件的 URL。

需要注意的是，虽然 <embed> 标签被浏览器广泛的支持，但是HTML 规范中并没有该标签。

2- 使用 <object> 标签，它是 HTML4 的标准标签，被大多数浏览器支持。但它的缺点是不允许使用脚本。

1
2
3
<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

codebase 属性指向下载插件的 URL。

3- 使用 <iframe> 标签， 如下：

1
2
<iframe src="rect.svg" width="300" height="100">
</iframe>

3.3 对比

Canvas

  • 依赖分辨率
  • 不支持事件处理器 - Canvas 一旦绘制完成，就不会继续得到浏览器的关注
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率
  • 支持事件处理器- 每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

4. Web 存储与应用缓存

4.1 Web客户端存储

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

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

之前，数据的存储通常使用 cookie 完成，但 cookie 不适合存储大量的数据（因为他们由每个对服务器的请求来传递）。

具体地，HTML5 使用 JavaScript 来存储和访问数据。常用的包括：

localStorage() 方法（存储的数据没有时间限制），例子：

1
2
3
4
<script type="text/javascript">
  localStorage.lastname="Smith";
  document.write(localStorage.lastname);
</script>

sessionStorage() 方法（存储的数据只对一个 session 进行存储- 浏览器重启后，数据就会被删除）。使用方法与 localStorage() 类似：

1
2
3
4
<script type="text/javascript">
  sessionStorage.lastname="Smith";
  document.write(sessionStorage.lastname);
</script>

4.2 应用缓存

HTML5 通过创建 cache manifest 文件，可以创建 web 应用的离线版本。

缓存的好处有如下三个方面：

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

使用时，需要在网页的头部添加属性 manifest, 如下：

1
2
3
4
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

指定了 manifest 属性的页面在用户访问时都会被缓存，否则，也不不会被缓存。

manifest 文件的建议的文件扩展名是：”.appcache”。

Manifest文件 指定了具体需要被缓存的内容，它主要包括3个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

例如：

1
2
3
4
5
6
7
8
9
10
11
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

# 开头的为注释行。

5. 其他

Web workers: 正常情况下， HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。而 web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的正常运行。

服务器发送事件：Server-Sent event，指的是网页自动获取来自服务器的更新（例如 Facebook 的消息更新）。在 JavaScript 中使用 EventSource 对象来接收来自服务器的事件通知。

参考: w3cSchool_HTML5_tutorial