Html新特性

新特性

• 用于绘画的 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
email	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