Html5
什么是Html5
1.HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
2.HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
3.HTML5 是 W3C 与 WHATWG 合作的结果：
（1）W3C 指 World Wide Web Consortium，万维网联盟。
（2）WHATWG 指 Web Hypertext Application Technology Working Group。
（3）WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。
新特性
1.用于绘画的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
3.新的特殊内容元素，比如 article、footer、header、nav、section
4.新的表单控件，比如 calendar、date、time、email、url、search。
Html视频
1.HTML5 规定了一种通过 video 元素来包含视频的标准方法。
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。
2.如何工作：
<video src="movie.ogg" controls="controls">
video>
3.controls 属性供添加播放、暂停和音量控件。
4. 标签的属性：
4.HTML5 元素同样拥有方法、属性和事件。
HTML 5 音频
1.支持音频格式：
2.如何工作：
<audio src="song.ogg" controls="controls">
audio>
实例：
<html>
<body>
<audio src="/i/song.ogg" controls="controls">
Your browser does not support the audio element.
audio>
body>
html>
3. 标签的属性：
HTML 5 拖放
1.拖放（Drag 和 drop）是 HTML5 标准的组成部分。任何元素都能够拖放。
2.方法：
（1）设置元素为可拖放：
（2）拖动什么 - ondragstart
（3）置被拖数据的数据类型和值：setData()
（4）放到何处 - ondragover，默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
实例：
<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>
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中。
HTML 5 Canvas
1.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2.创建 Canvas 元素：
3.通过 JavaScript 来绘制：canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
（1）JavaScript 使用 id 来寻找 canvas 元素：
`var c=document.getElementById("myCanvas");`
（2）创建 context 对象：
var cxt=c.getContext("2d");
（3）getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
HTML5 内联 SVG
1.SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2.在 HTML5 中，能够将 SVG 元素直接嵌入 HTML 页面中：
实例：
<html>
<body>
<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>
body>
html>
HTML5 地理定位
1.HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
2.getCurrentPosition() 方法来获得用户的位置。
HTML 5 Web 存储
1.HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储。
HTML 5 应用程序缓存
1.使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
HTML5 新的 Input 类型
1.color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
2.color 类型用在input字段主要用于选取颜色
3.date 类型允许你从一个日期选择器选择一个日期
4.datetime 类型允许你选择一个日期
5.atetime-local 类型允许你选择一个日期和时间
6.email 类型用于应该包含 e-mail 地址的输入域
7.month 类型允许你选择一个月份
8.number 类型用于应该包含数值的输入域,还能够设定对所接受的数字的限定：
9.range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
10.search 类型用于搜索域，比如站点搜索或 Google 搜索
11.tel定义输入电话号码字
12.time 类型允许你选择一个时间
13.url 类型用于应该包含 URL 地址的输入域
14.week 类型允许你选择周和年.
HTML5 表单元素
- 元素: 元素规定输入域的选项列表。 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：使用 元素的列表属性与 元素绑定:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
datalist>
2. 元素: 元素的作用是提供一种验证用户的可靠方法。标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
form>
3. 元素:用于不同类型的输出，比如计算或脚本输出：
<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>
