新特性
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
新增标签
格式类
mark
定义有记号的文本
meter
度量给定范围（gauge）内的数据
<meter value="3" min="0" max="10">十</meter>
| 属性 | 值 | 描述 |
|---|---|---|
| form | form_id | 规定 |
| high | number | 规定被视作高的值的范围。 |
| low | number | 规定被视作低的值的范围。 |
| max | number | 规定范围的最大值。 |
| min | number | 规定范围的最小值。 |
| optimum | number | 规定度量的优化值。 |
| value | number | 必需。规定度量的当前值。 |
progress
标示任务的进度
<progress value="22" max="100"></progress>
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定任务一共需要多少工作。 |
| value | number | 规定已经完成多少任务。 |
图像类-canvas
- 创建canvas元素
<canvas id="myCanvas" width="200" height="100"></canvas>
- 通过 JavaScript 来绘制
<script type="text/javascript">
//创建context对象
var cxt=document.getElementById("myCanvas").getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
//直线
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.stroke();
//圆形
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fillStyle="#FF0000";
cxt.fill();
//渐变
cxt.fillRect(0,0,175,50);
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
音频/视频类
audio视频
<audio src="someaudio.wav"></audio>
- 格式
| 格式 | IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
|---|---|---|---|---|---|
| Ogg Vorbis | YES | YES | YES | ||
| MP3 | YES | YES | YES | ||
| Wav | YES | YES | YES |
- 属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 显示控件 |
| loop | loop | 循环播放 |
| muted | muted | 规定视频输出应该被静音 |
| preload | preload | 音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性 |
| src | url | 音频的 URL |
sourse
允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
| 属性 | 值 | 描述 |
|---|---|---|
| media | media query | 媒体资源的类型 |
| src | url | 媒体文件的 URL |
| type | numeric value | 资源的 MIME 类型 |
track
用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
| 属性 | 值 | 描述 |
|---|---|---|
| kind | caption chapters descroptions metadata subtitles | 轨道类型 |
| label | label | 轨道的标签或标题 |
| srclang | language_code | 轨道的语言，若 kind 属性值是 "subtitles"，则该属性必需的 |
video音频
<video src="movie.ogg" controls="controls"></video>
- 格式
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | No | |||
| MPEG 4 | No | No | No | ||
| WebM | No | No |
- 属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 自动播放 |
| controls | controls | 显示控件 |
| height | pixels | 视频播放器的高度 |
| loop | loop | 循环播放 |
| muted | muted | 视频的音频输出被静音 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 |
| preload | preload | 规视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性 |
| src | url | 视频 URL |
| width | pixels | 视频播放器的宽度 |
语义化类
header、footer、nav、section、article、aside、detail、 dialog、summary
表单类
input新增类型
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| No | 4.0 | 9.0 | 10.0 | No | |
| url | No | 4.0 | 9.0 | 10.0 | No |
| number | No | No | 9.0 | 7.0 | No |
| range | No | No | 9.0 | 4.0 | 4.0 |
| Date pickers | No | No | 9.0 | 10.0 | No |
| search | No | 4.0 | 11.0 | 10.0 | No |
| color | No | No | 11.0 | No | No |
- number
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | number | 规定默认值 |
- range
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 规定允许的最大值 |
| min | number | 规定允许的最小值 |
| step | number | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | number | 规定默认值 |
- Date Pickers
<input type="date" name="user_date" />
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间（小时和分钟）
- datetime - 选取时间、日、月、年（UTC 时间）
- datetime-local - 选取时间、日、月、年（本地时间）
input新增属性
autofocus
//自动获取焦点
<input type="text" autofocus="autofocus" />
form
//规定输入域所属的一个或多个表单,必须引用所属表单的 id
<form id="user_form">
First name:<input type="text"/>
<input type="submit" />
</form>
Last name: <input type="text" form="user_form" />
height & width
//规定用于 image 类型的 input 标签的图像高度和宽度
<input type="image" src="img_submit.gif" width="99" height="99" />
list
//规定输入域的 datalist
<input type="url" list="url_list"/>
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
</datalist>
multiple
//规定输入域中可选择多个值.email 和 file
<input type="file" name="img" multiple="multiple" />
placeholder
required
<input type="text" name="usr_name" required="required" />
datalist
定义下拉列表
//与input配合使用；list属性绑定
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
output
定义输出一些类型
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
| 属性 | 值 | 描述 |
|---|---|---|
| for | element_id | 定义输出域相关的一个或多个元素。 |
| form | form_id | 定义输入字段所属的一个或多个表单。 |
| name | name | 定义对象的唯一名称。（表单提交时使用） |
fieldset
//打包表单内容生成一组字段
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
| 属性 | 值 | 描述 |
|---|---|---|
| form | form_id | 规定 fieldset 所属的一个或多个表单。 |
| name | value | 规定 fieldset 的名称。 |
SVG
什么是SVG
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG的优势
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
画布与SVG
-
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 -
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。 -
比较
Canvas - 依赖分辨率 - 不支持事件处理器 - 弱的文本渲染能力 - 能够以 .png 或 .jpg 格式保存结果图像 - 最适合图像密集型的游戏，其中的许多对象会被频繁重绘SVG - 不依赖分辨率 - 支持事件处理器 - 最适合带有大型渲染区域的应用程序（比如谷歌地图） - 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） - 不适合游戏应用
地理定位
实例
<script>
var x=document.getElementById("demo");
//如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息
//如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
//showPosition() 函数获得并显示经度和纬度
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
处理错误和拒绝
//getCurrentPosition() 方法的第二个参数用于处理错误
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
在地图中显示结果
//如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}
getCurrentPosition()
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
Web储存
在客户端存储数据
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
-
localStorage
localStorage——没有时间限制的数据存储
<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script> -
sessionStorage
sessionStorage——针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
什么是应用程序缓存（Application Cache）——用户可在应用离线时使用它们
Cache Manifest 实例
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
Cache Manifest 基础
如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）
manifest 文件可分为三个部分:
1.CACHE MANIFEST
【必要】在此标题下列出的文件将在首次下载后进行缓存
//列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
2.NETWORK
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
//规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的.*表示所有文件
NETWORK:
login.asp
3.FALLBACK
在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
//规定如果无法建立因特网连接，则用 "offline.html" 替代
FALLBACK:
/html5/ /404.html
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况
- 用户清空浏览器缓存
- manifest 文件被修改
- 由程序来更新应用缓存
[实例]
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）
快捷方式
多个标签
div*3
父子标签
ul>li
并列标签
div+p
类名标签
div.nav
其他
inout:text