HTML5
从要对全部所有的 Web 开发人员有用这一点出发，这个参考页面链接了有关 HTML5 技术的大量资源，并且基于它们各自的功能，把它们归类成了若干组。
1.语义：能够让你更恰当地描述你的内容是什么。
2.连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
3.离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
4.多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
5.性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
6.设备访问 Device Access：能够处理各种输入和输出设备。
7.样式设计: 让作者们来创作更加复杂的主题吧！
作者比较懒，为了方便。下面直接上代码，在代码中，会有明确的注释
1.Camera API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
display: block;
width: 400px;
}
</style>
</head>
<body>
<div class="container">
<section class="main-content">
<input type="file" id="take-picture" accept="image/*">
<img src="about:blank" alt="" id="show-picture">
</section>
</div>
<!--
当用户激活这个HTML元素的时候,系统会呈现给用户一个选择界面,
其中一个选项是选择本地的图片文件,另一个选项是要通过摄像头直接
拍摄照片作为所选文件.如果用户选择了摄像头,则会进入手机的拍照模式.
拍照结束后,,用户可以选择确定还是放弃.如果接受了,则该照片会作为所选文件发
送给那个<input type="file">元素,同时触发该元素的onchange事件.
-->
<script>
(function () {
var takePicture = document.querySelector("#take-picture");
var showPicture = document.querySelector("#show-picture");
if (takePicture && showPicture) {
takePicture.onchange = function (event) {
var files = event.target.files;
var file;
if (files && files.length > 0) {
file = files[0];
var URL = window.URL || window.webkitURL;
var imgURL = URL.createObjectURL(file);
showPicture.src = imgURL;
URL.revokeObjectURL(imgURL);
}
};
}
})();
</script>
</body>
</html>
2.Canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--
1.Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，
基本上它是一个可以用JavaScript操作的位图（bitmap）。
2.每个canvas元素都有一个对应的context对象（上下文对象），
Canvas API定义在这个context对象上面，所以需要获取这个对象，
方法是使用getContext方法。
3.绘图方法
canvas画布提供了一个用来作图的平面空间，该空间的每个点都有自己的坐标，
x表示横坐标，y表示竖坐标。原点(0, 0)位于图像左上角，x轴的正向是原点向右，
y轴的正向是原点向下。
（1）绘制路径
beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，
lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。
（2）绘制矩形
fillRect(x, y, width, height)方法用来绘制矩形，它的四个参数
分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高。fillStyle
属性用来设置矩形的填充色。
strokeRect方法与fillRect类似，用来绘制空心矩形。
clearRect方法用来清除某个矩形区域的内容。
（3）绘制文本
fillText(string, x, y) 用来绘制文本，它的三个参数分别为文本内容、
起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式
（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。
（4）绘制圆形和扇形
arc方法用来绘制扇形
绘制空心圆形的例子。
（6）设置阴影
一系列与阴影相关的方法，可以用来设置阴影。
(7)drawImage方法
canvas允许将图像文件插入画布，做法是读取图片后，使用drawImage方法在画布内进行重绘。
-->
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
您的浏览器不支持canvas！
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
/*
（1）绘制路径
beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，
lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。
*/
ctx.beginPath(); // 开始路径绘制
ctx.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线
ctx.lineWidth = 1.0; // 设置线宽
ctx.strokeStyle = "#CC0000"; // 设置线的颜色
ctx.stroke(); // 进行线的着色，这时整条线才变得可见
/*
（2）绘制矩形
fillRect(x, y, width, height)方法用来绘制矩形，它的四个参数
分别为矩形左上角顶点的x坐标、y坐标，以及矩形的宽和高。fillStyle
属性用来设置矩形的填充色。
*/
ctx.fillStyle = 'yellow';
ctx.fillRect(50, 50, 200, 100);
//strokeRect方法与fillRect类似，用来绘制空心矩形。
ctx.strokeRect(10,10,200,100);
//clearRect方法用来清除某个矩形区域的内容。
ctx.clearRect(100,50,50,50);
/*
（3）绘制文本
fillText(string, x, y) 用来绘制文本，它的三个参数分别为文本内容、
起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式
（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。
*/
// 设置字体
ctx.font = "Bold 20px Arial";
// 设置对齐方式
ctx.textAlign = "left";
// 设置填充颜色
ctx.fillStyle = "#008600";
// 设置字体内容，以及在画布上的位置
ctx.fillText("Hello!", 10, 50);
// 绘制空心字
ctx.strokeText("Hello!", 10, 100);
/*
（4）绘制圆形和扇形
arc方法用来绘制扇形
*/
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, true);
ctx.fillStyle = "#000000";
ctx.fill();
// 绘制空心圆形的例子。
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, true);
ctx.lineWidth = 1.0;
ctx.strokeStyle = "#000";
ctx.stroke();
/*
（6）设置阴影
一系列与阴影相关的方法，可以用来设置阴影。
*/
ctx.shadowOffsetX = 10; // 设置水平位移
ctx.shadowOffsetY = 10; // 设置垂直位移
ctx.shadowBlur = 5; // 设置模糊度
ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色
ctx.fillStyle = "#CC0000";
ctx.fillRect(10,10,200,100);
/*
save方法用于保存上下文环境，restore方法用于恢复到上一次保存的上下文环境。
*/
ctx.save();
ctx.shadowOffsetX = 300;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.5)";
ctx.fillStyle = "#CC0000";
ctx.fillRect(10,10,150,100);
ctx.restore();
/*
动画
利用JavaScript，可以在canvas元素上很容易地产生动画效果。
*/
var posX = 20
var posY = 100;
setInterval(function() {
ctx.fillStyle = "black";
ctx.fillRect(0,0,canvas.width, canvas.height);
posX += 1;
posY += 0.25;
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(posX, posY, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}, 30);
}
</script>
</body>
</html>
3.contenteditable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div contenteditable="true">
This text can be edited by the user.
</div>
</body>
</html>
4.WebWorker
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="index.js"></script>
<!--
webWorker:让繁重的任务去后台执行，不再主线程中。
主线程：每个程序在运行都一个主线程，UI主线程：主要任务响应用户操作，一个线程只能做一件事情。
现在有一个逻辑，要不停的去运行
ajax：进行网络请求，不影响主线程去响应用户操作，开辟新的线程去做网络请求，异步
worker：
1.Worker对象：通过关键字new去创建("")
2.postMessage:进行发送消息的方法("msg")
3.onmessage:接受数据的方法 function(event) event.data:数据源
4.data:数据源
5.terminate:释放掉worker资源
6.worker在使用的时候，每次释放worker资源之后，要重置worker
-->
</head>
<body>
<p id="p1">0</p>
<button id="start">start</button>
<button id="stop">stop</button>
</body>
</html>
count.js代码：
/**
* Created by Administrator on 2016/1/5.
*/
var countNum = 0;
function countAdd(){
postMessage(countNum);
countNum++;
setTimeout(countAdd,1000);
}
countAdd();
index.js代码：
/**
* Created by Administrator on 2016/1/5.
*/
var numDiv;
var work = null;
window.onload = function(){
numDiv = document.getElementById("p1");
document.getElementById("start").onclick = startWorker;
document.getElementById("stop").onclick = function(){
if(work){
work.terminate();
work = null;
}
}
};
function startWorker(){
if(work){
return;
}
work = new Worker("count.js");
work.onmessage = function(e){
numDiv.innerHTML = e.data;
}
}
5.地理定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body onload="init()">
<div id="map" style="width: 1000px;height: 600px">
</div>
<script>
function init(){
navigator.geolocation.getCurrentPosition(function(position){
var coords = position.coords;
//设置地图的一些参数
var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);
var myOptions = {
zoom:14,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//创建地图
var map1;
map1 = new google.maps.Map(document.getElementById("map"),myOptions);
//地图上创建标记
var marker = new google.maps.Marker({
position:latlng,
map:map1
});
var infowindow = new google.maps.InfoWindow({
content:"当前位置"
});
infowindow.open(map1,marker);
});
}
</script>
</body >
</html>
6.拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 700px;
height: 600px;
border: 1px solid #bababa;
}
img{
width: 200px;
}
</style>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="dimg1" src="i.jpg" ondragstart="drag(event)">
<!--拖放：
拖动什么 - ondragstart 和 setData()
放到何处 - ondragover
进行放置 - ondrop
preventDefault();//阻止浏览器默认事件
dataTransfer-->
<script>
//阻止浏览器默认事件
function allowDrop(e){
//默认情况下。浏览器是不允许内容之前拖拽放置的
e.preventDefault();
}
function drag(e){
e.dataTransfer.setData("Text", e.target.id); // seter(设置数据，保存数据) geter(获取数据)
}
function drop(e){
var data = e.dataTransfer.getData("Text");
console.log(data);
console.log(e.target.id);
event.target.appendChild(document.getElementById(data));//event.target div
}
</script>
</body>
</html>
7.服务器推送事件
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>获得服务器更新</h1>
<div id="result"></div>
<script>
if (typeof(EventSource) !== "undefined") {
var source = new EventSource("http://localhost/ha.php");
source.onmessage = function (event) {
document.getElementById("result").innerHTML += event.data + "<br />";
};
}
else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
服务器文件：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
8.离线存储
HTML代码：
<!DOCTYPE html>
<html lang="en" manifest="app.appcache">
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet">
<!--
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
尺寸限制
Application Cache的尺寸限制统一在5M
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存
以 "#" 开头的是注释行
以 "*" 开头代表全部缓存
-->
</head>
<body>
<p>我是内容</p>
</body>
</html>
缓存文件： CACHE MANIFEST CACHE: index.html style.css NETWORK: 注：css文件中随便写一个样式进行测试即可