HTML5总结

1.HTML5 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：

1
2
3

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

载入后，初始化新标签的CSS：

1 2	/html5/ article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

2.HTML5 视频

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

1
2
3

<video src="movie.ogg" controls="controls">
Your browser does not support the video tag.  // 供不支持video元素的浏览器显示
</video>

当前，video 元素支持三种视频格式，如下表所示：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	/	3.5+	10.5+	5.0+	/
MPEG4	9.0+	/	/	5.0+	3.0+
WebM	/	4.0+	10.6+	6.0+	/

video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

video标签的属性:

autoplay=”autoplay” 视频在就绪后马上播放。
controls=”controls” 向用户显示控件，比如播放按钮。
loop=”loop” 则循环播放。
preload=”load” 当页面加载后载入整个视频,如果使用 “autoplay”，则忽略该属性。

3.HTML5 音频

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag. // 是供不支持audio元素的浏览器显示
</audio>

当前，audio 元素支持三种音频格式：

\	IE9	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg Vorbis	-	o	o	o	-
MP3	o	-	-	o	o
Wav	-	o	o	-	o

audio标签的属性：

autoplay=”autoplay” 视频在就绪后马上播放。
controls=”controls” 向用户显示控件，比如播放按钮。
loop=”loop” 则循环播放。
preload=”load” 当页面加载后载入整个视频,如果使用 “autoplay”，则忽略该属性。

4.HTML5 拖放

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。（在 Safari 5.1.2 中不支持拖放。）

5.HTML5 画布

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
向 HTML5 页面添加 canvas 元素：

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

W3C上的例子：

<script type="text/javascript">  
var c=document.getElementById("myCanvas");  // 使用id寻找canvas元素 
var cxt=c.getContext("2d");  // 创建context对象
cxt.fillStyle="#FF0000";  // 绘制对象为红色
cxt.fillRect(0,0,150,75);  // 绘制一个矩形
</script>

6.HTML5 SVG

SVG指可伸缩矢量图形,SVG用于定义用于网络的基于矢量的图形，SVG图像在放大或改变尺寸的情况下其图形质量不会有损失。
将 SVG 元素直接嵌入 HTML 页面中：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

结果将在页面上绘制一个五角星，详细看W3C教程。

7.HTML5 表单

HTML5新的input类型

email
url
number
range
Date pickers (data,month,week,time,datetime,datetime-local)
search
color
Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
示例：
1
2
3
E-mail: <input type="email" name="user_email" />
Homepage: <input type="url" name="user_url" />
Points: <input type="number" name="points" min="1" max="10" />

HTML5 的新的表单元素：

datalist
keygen

output
datalist元素规定输入域的选项列表。列表是通过datalist内的option元素创建的。

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

keygen 元素的作用是提供一种验证用户的可靠方法,但是浏览器支持不好。
output 元素用于不同类型的输出，比如计算或脚本输出。

HTML5 的新的表单属性
新的 form 属性：

autocomplete
novalidate
新的 input 属性：
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max, step
multiple
pattern (regexp)
placeholder
required

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
autocomplete 适用于form标签，以及以下类型的input标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
示例：

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

参考网页：
W3school-HTML5教程