写在前面：该笔记是基于W3Cschool的HTML5课程完成。因为类似读书笔记，所以很多内容不全。有兴趣的童靴可以访问该网站学习：点击打开链接
第一节 HTML5
1.HTML5是下一代的HTML。
2.下面是一段HTML5的代码：
<!DOCTYPE HTML> <html> <body> <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. ！当你的浏览器不支持HTML5的时候，则显示这一段文字 </video> </body> </html>
第二节 简介
1.html5将成为html、xhtml和html dom的新标准。
2.为html5建立的规则：
- 新的特性应该基于html，css，javascirpt和DOM
- 减少了对外部插件的需求
- 更优秀的错误处理机制
- 更多取代脚本的标记
- 独立于设备
- 开发进程对公众透明
3.有趣的新特性：
- 画布canvas元素
- 播放器元素
第三节 视频
1.HTML5规定通过video元素来引入视频标准
2.具体代码的编写：
<video src="movie.ogg" controls="controls"> </video>//controls属性提供了视频播放的按钮，音量等
//video之间的内容显示为当浏览器不支持video时
3.html5允许多个scoure
4.更多相关标签请参考：http://www.w3school.com.cn/tags/tag_video.asp
第四节 视频+DOM
1.video属性中同样拥有方法，属性和事件
2.方法可以提供“播放，暂停和加载”，属性可以控制“音量，时长”，DOM事件则可以通知“暂停，开始，结束”
//w3c的该节教程上有一个演示，不过其中包含了javascript，所以此处不列举出来。
第五节 音频
1.html5通过audio来引入音频的标准。
2.代码如下：
<audio controls="controls" src=""> </audio>3.可以插入相同的音频的不同格式，以此来是各种浏览器都适用。（浏览器会自动选择适合自己的格式，此原理同样可以使用在视频播放上面）
第六节 拖放
1.在html5中任何元素都是可以拖放的。（连接和图片是默认可以拖动的，不需要draggable）
2.一个拖放的实例：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"> ！一个脚本是一个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"); ！将被拖动的数据赋给data，从setData中获取
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div> ！当拖动的元素在另一个元素容器时，触发
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>3.如何设置元素可拖放：<img draggble="true"/>4.ondragstrat和setData（）
ondragstrat事件是在启动拖动的时候开始执行
5.ondragover规定了被拖动的元素放在什么位置。由于数据和元素默认的不可以移动到其他元素中，所以要调用prevenDefault（）方法
6.进行放置：ondrag()
第七节 画布
1.HTML5的canvas元素使用javascript进行绘画。在一个矩形的区域内控制每一个像素。
2.创建canvas元素：
<canvas id="name of id" width="number" height="number"></canvas>
3.由于canvas本身没有绘图能力，所以需要javascript来完成，这里涉及到后面的javascript，先不过多讲解，上一个简单的代码理解一下：
<script type="text/javascript"> var c=document.getElementById("myCanvas"); <- -!- - javascript通过ID号来找寻canvas - -> var cxt=c.getContext("2d"); <- -!- - 创建对象- -> cxt.fillStyle="#FF0000"; <- -!- - 创建一个红色的矩形框 cxt.fillRect(0,0,150,75); ， 以及规定了形状，位置，尺寸等（定义初始坐标（0，0），画布大小150x75）- -> </script>
4.关于坐标（由于代码涉及到css和javascript，笔者还没学完，所以还是贴一段简单的代码，用于理解）：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>
<script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>
</body>
</html>
第八节 内联svg
1.svg是可伸缩矢量图（矢量图就是用计算机算法描绘的图像，可以放大伸缩而不会失真，但是颜色没有层次感，适用于一些简单的图片）
2.在html5中可以直接嵌入svg元素
3.下面贴一个例子：
<!DOCTYPE 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-5;fill-rule:evenodd;" /> </svg> </body> </html>
第九节 地理定位
1.html5中的geolocation的API用于获得用户当前的地理信息。
2.先来一段代码（这个代码没有包含错误处理）：
<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>3.给定位置信息的其他作用- 更新本地信息
- 显示用户周围的兴趣点（像美团，大众这些app都使用了这个方法的）
- 交互式车载导航系统 (GPS)
第十节 web存储
1.html5提供了两种存储方法：
- localstorge：无时间限制
- sessionstorge：针对一个session的存储
2.html5用javascript来存储。
第十一节 应用程序缓存
1.使用html5，创建cache manifest，可以创建web的离线缓存。
2.优点：
- 离线浏览
- 加快速度
- 减小负载
3.开启appcache的代码：
<html manifest="demo.appache"></html>
4..贴一个代码讲解：
<!DOCTYPE html> <html manifest="/example/html5/demo_html.appcache"> //该元素是在html中的 <body> <script type="text/javascript" src="/example/html5/demo_time.js"> //离线的时候，调用缓存的脚本 </script> <p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p> <p><img src="/i/w3school_banner.gif" /></p> <p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。</p> </body> </html>5.manifest是一个简单的文件，包含三个部分
cache manifest：在此标题下的内容将被缓存
/theme.css /logo.gif /main.js这三个是缓存的内容
network：在此标题下不会缓存
fallback：在此标题下将提供错误页面的提示
用户清空缓存 manifest的内容被修改 程序更新缓存7.一个完整的manifest文件
CACHE MANIFEST # 2012-02-21 v1.0.0 //#开头表示注释 /theme.css /logo.gif /main.js NETWORK: login.asp //不会缓存.asp的内容 FALLBACK: /html5/ /404.html //如果错误则返回一个错误页面（这里是404）
第十二节 web workers
web workers是运行在后台的javascript。虽然javascript是单线程的，但是有时候需要多个工作线程，这个时候就需要web workers，当然子线程是完全受到主线程控制的。
1.附上一段代码：
<!DOCTYPE html>
<html>
<body>
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<br /><br />
<script>
var w;
function startWorker() //该函数是检测浏览器是否支持这个功能
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined") //检测是否有worker，如果没有则自己创建一个
{
w=new Worker("/example/html5/demo_workers.js");
}
w.onmessage = function (event) { //设置一个时间监听器，wokrer传递消息的时候，执行监听器的代码
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker() //终止web worker
{
w.terminate();
}
</script>
</body>
</html>
创建一个计时器：
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //向页面返回一个消息
setTimeout("timedCount()",500);
}
timedCount();第十三节 服务器发送事件
1.允许网页来自服务器的更新。
2.sever-sent：单向的更新：网页自动获取服务器的更新，而不向用户询问。例如facebook，youtube，微博等的页面的更新。
3.eventsource用于接收服务器的更新：
var source=new EventSource("demo_sse.php"); //创建一个对象用于接收更新，更新来自demo_sse.php
source.onmessage=function(event) //调用一个事件监听，当有一个新的更新的时候，就把
{
document.getElementById("result").innerHTML+=event.data + "<br />"; 推入一个result的元素中
};4.服务器端代码的实例
<?php //PHP服务器
header('Content-Type: text/event-stream'); //设置content-type为text/event-stream
header('Cache-Control: no-cache');
$time = date('r'); //设置发送时间
echo "data: The server time is: {$time}
";
flush(); //刷新
?><% //asp服务器
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
第十四节 表单--输入类型
mod:<input type=" " name= " "/>
实例：url：<input type=" url" name="haha"/> //如此之后，输入的内容如果不符，将被检测到
第十四节 表单--表单元素
1.datalist元素，提供输入选项：
webpage:<input type="url" list="url_list" name="link"/> <datalist id="url_list"> <option label="xxx" value="website" </datalist>
3.output元素：简单的输出