Html5新特性总览
1.HTML5 新元素
| 标签 | 描述 |
|---|---|
| < article> | 定义页面独立的内容区域。 |
| < aside> | 定义页面的侧边栏内容。 |
| < bdi> | 定义页面独立的内容区域。 |
| < command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| < details> | 用于描述文档或文档某个部分的细节 |
| < dialog> | 定义对话框，比如提示框 |
| < summary> | 标签包含 details 元素的标题 |
| < figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| < figcaption> | 定义 < figure> 元素的标题 |
| < footer> | 定义 section 或 document 的页脚。 |
| < header> | 定义了文档的头部区域 |
| < mark> | 定义带有记号的文本。 |
| < meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| < nav> | 定义导航链接的部分。 |
| < progress> | 定义任何类型的任务的进度。 |
| < ruby> | 定义 ruby 注释（中文注音或字符）。 |
| < rt> | 定义字符（中文注音或字符）的解释或发音。 |
| < rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| < section> | 定义文档中的节（section、区段）。 |
| < time> | 定义日期或时间。 |
| < wbr> | 规定在文本中的何处适合添加换行符。 |
2.HTML5 Canvas
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，要使用脚本来绘制图形。
<canvas id="myCanvas" width="400" height="400"></canvas>
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!--准备画布-->
<!-- 画布是白色的 而且默认300*150-->
<!-- 设置画布的大小 width="600" height="400" -->
<canvas width="300" height="200" ></canvas>
<!--准备绘制工具-->
<!--利用工具绘图-->
<script>
/*获取元素*/
var myCanvas = document.querySelector('canvas');
/*获取上下文 绘制工具箱 */
var ctx = myCanvas.getContext('2d');
/*移动画笔*/
ctx.moveTo(100,100);
/*绘制直线 (轨迹，绘制路径)*/
ctx.lineTo(200,100);
/*描边*/
ctx.stroke();
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
3.HTML5 拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
- 拖动什么 - ondragstart 和 setData()
- 放到何处 - ondragover
- 进行放置 - ondrop
案例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5拖拽</title>
<meta charset="utf-8">
<style>
#div1 {
width:130px;
height:60px;
padding:10px;
border:1px solid palevioletred;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="image/bg.jpg" draggable="true" ondragstart="drag(event)" width="125" height="55">
<script>
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>
</body>
</html>
4.HTML5 地理定位
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
案例：
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
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>
</body>
</html>
5.HTML5 Audio(音频)、Video(视频)
HTML5 规定了在网页上嵌入音频元素的标准，即使用 < audio> 元素。
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
6.HTML5 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
<input type="range" name="points" min="1" max="10">
Search Google: <input type="search" name="googlesearch">
电话号码: <input type="tel" name="usrtel">
7.HTML5 表单元素
HTML5 有以下新的表单元素:
< keygen> ：规定用于表单的密钥对生成器字段。
< output> ： 定义不同类型的输出，比如脚本的输出。
< datalist > ：元素规定输入域的选项列表。属性规定 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>
8.HTML5 表单属性
HTML5 的 < form> 和 < input>标签添加了几个新属性.
< form>新属性：
autocomplete、novalidate
< input>新属性：
autocomplete、autofocus
form、formaction、formenctype、formmethod、formnovalidate、formtarget
height and width
list
min and max、multiple
pattern (regexp)、placeholder
required
step
9.HTML5 语义元素
HTML5提供了新的语义元素来明确一个Web页面的不同部分:
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
10.HTML5 Web 存储
Web Storage DOM API 为Web应用提供了一个能够替代cookie的Javascript解决方案
-
sessionStorage—客户端数据存储，只能维持在当前会话范围内。
-
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
-
localStorage—客户端数据存储，能维持在多个会话范围内。
-
localStorage 对象存储的数据没有时间限制。
对于大量复杂数据结构，一般使用IndexDB
11.HTML5 离线Web应用（应用程序缓存）
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
HTML5 Cache Manifest 实例
下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST- 在此标题下列出的文件将在首次下载后进行缓存NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存FALLBACK- 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
12.HTML5 Web Workers
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。（相当于实现多线程并发）
13.HTML5 SSE
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
EventSource 对象用于接收服务器发送事件通知：
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
为了让上面的例子可以运行，还需要能够发送数据更新的服务器。需要后端配合，这里就不作介绍了。
14.HTML5 WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当获取 Web Socket 连接后，可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
