HTML5
简介
HTML5 是下一代 HTML 标准
HTML5 仍处于完善之中，大部分现代浏览器已经具备了某些 HTML5 支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
最小的H5文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
对于中文网页需要使用 声明编码，否则会出现乱码。
- H5可以更简单的使用多媒体、开发应用、使用CSS3和绘制图形，并移除了一些HTML的元素
- 浏览器支持：
IE9 以下版本浏览器兼容HTML5的方法：使用本站的静态资源的html5shiv包，放在<head>标签里面
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
载入后，初始化新标签的CSS：
/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}
HTML5定义新元素
为HTML添加新元素
在<style>中定义，<body>中直接使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<myHero>我的第一个新元素</myHero>
</body>
</html>
H5中的新元素
canvas
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。
步骤：
1.创建画布
一个画布在网页中是一个矩形框，通过<canvas> 元素来绘制，默认情况下无边框和内容
<canvas id="myCanvas" width="200" height="100"></canvas>
标签通常需要指定一个id属性，因为画布上显示的图形需要用JS去画
2.使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
\\ 首先，找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
\\ 然后，创建 context 对象：
var ctx=c.getContext("2d");
\\ getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
\\ 下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
\\ 设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
\\ fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
- canvas坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
fillRect 方法的使用： (X坐标,Y坐标,X轴方向长度,Y轴方向长度) - canvas画线
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0); \\ 定义线条开始坐标
ctx.lineTo(200,100); \\ 定义线条结束坐标
ctx.stroke(); \\ 绘制线条函数
canvas还可以画圆和绘制文本、设置填充颜色和渐变、将图像放在画布上。
对比SVG（可伸缩矢量图形 ），SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。
H5的一些功能
MathML
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>…</math> 。
用途：显示一些复杂的数学公式和符号。
HTML5 拖放（Drag 和 Drop）
拖放就是抓取对象以后拖到另一个位置，任何元素都能够拖放。
1.设置元素为可拖放
2.拖动什么 - ondragstart 和 setData()
3.放到何处 - ondragover
4.进行放置 - ondrop
HTML5 - 使用地理定位
使用 getCurrentPosition() 方法来获得用户的位置，可返回用户位置的经度和纬度
Video标签和Audio标签
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。
新的input类型
color
date
datetime
datetime-local
email
month
number
range
search定义搜索字段
tel
time
url
week选择周和年
新的表单元素
| 标签 | 描述 |
|---|---|
| <datalist> | <input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
| <keygen> | <keygen> 标签规定用于表单的密钥对生成器字段。 |
| <output> | <output> 标签定义不同类型的输出，比如脚本的输出。 |
新的语义元素
以上的元素都是块元素(除了<figcaption>).
为了让这些块及元素在所有版本的浏览器中生效，需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):
header, section, footer, aside, nav, article, figure
{
display: block;
}
H5 Web
使用HTML5可以在本地存储用户的浏览数据,这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
localStorage 和 sessionStorage
- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
- sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}
小项目
Web Storage 可以开发简单的网站列表程序，将网站搜索记录保存，详见菜鸟教程
Web SQL
H5可以在<script>中对数据库进行增删改查操作
以下是规范中定义的三个核心方法：
- openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
- transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
- executeSql：这个方法用于执行实际的 SQL 查询。
Web Worker
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。使用时需要判断浏览器是否支持。
功能相当于一个定时器。
服务器发送事件，产生web数据更新
需要能够发送数据更新的服务器
Server-Sent 事件 - 单向消息传递：Server-Sent 事件指的是网页自动获取来自服务器的更新。
HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
以前的数据传输基础是Ajax 轮询，两种技术区别如下：
当获取 Web Socket 连接后，可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
以下 API 用于创建 WebSocket 对象：
var Socket = new WebSocket(url, [protocol] );
\\ 以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
WebSocket 协议本质上是一个基于 TCP 的协议。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
5073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
