html5
1 简介
1.1 规则
- 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
- 减少对外部插件的需求（比如 Flash）
- 更优秀的错误处理
- 更多取代脚本的标记
- HTML5 应该独立于设备
- 开发进程应对公众透明
1.2 有趣的新特性
- 用于绘画的canvas画布
- 用于媒体回放的video和audio元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如calendar、date、time、email、url、search
2 视频
多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件，HTML5 规定了一种通过 video 元素来包含视频的标准方法。
2.1 视频格式
当前，video 元素支持三种视频格式：
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
- MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
2.2 如何工作
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<video width="800" height="" controls="controls" preload="auto">
<source src="http://www.w3school.com.cn//i/movie.mp4" type="video/mp4"></source>
</video>
</body>
</html>
2.1 标签属性
3 视频/DOM
3.1 使用 DOM 进行控制
方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说， 元素开始播放、已暂停，已停止，等等。
下例中简单的方法，向我们演示了如何使用 元素，读取并设置属性，以及如何调用方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div style="text-align: center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="big()">大</button>
<button onclick="middle()">中</button>
<button onclick="small()">小</button>
<br>
<video id="myvideo" width="420" style="margin-top: 15px;">
<source src="http://www.w3school.com.cn//i/movie.mp4" type="video/mp4"></source>
<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>
<script type="text/javascript">
var myvideo = document.getElementById("myvideo");
function playPause(){
if(myvideo.paused){
myvideo.play();
}
else{
myvideo.pause();
}
}
function big(){
myvideo.width=560;
}
function middle(){
myvideo.width=420;
}
function small(){
myvideo.width=280;
}
</script>
</body>
</html>
3.2 方法、属性和事件
3 音频
3.1 音频格式
3.2 如何工作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio controls="controls" >
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
当前浏览器不支持audio
</audio>
</body>
</html>
效果图：
3.3 标签属性
4 拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
4.1 如何进行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1,#box2{
float: left;
width: 200px;
height: 100px;
border: 1px solid black;
margin: 10px;
padding: 10px;
}
</style>
<script type="text/javascript">
//放到何处 - ondragover
//通过调用 ondragover 事件的 event.preventDefault() 方法：
//阻止对元素的默认处理方式,默认地，无法将数据/元素放置到其他元素中。
function allowDrop(ev){
ev.preventDefault();
}
//拖动什么 - ondragstart 和 setData()
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
//进行放置 - ondrop 当放置被拖数据时，会发生 drop 事件
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="box1" ondragover="allowDrop(event)" ondrop="drop(event)">
<img src="./image/logo.png" draggable="true" ondragstart="drag(event)" id="drag" style="margin: 30px 10px;">
</div>
<div id="box2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<!-- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中 -->
</body>
</html>
结果：
4.2 代码解释
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
- 被拖数据是被拖元素的 id (“drag1”)
- 把被拖元素追加到放置元素（目标元素）中
5 画布
5.1 介绍
- HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
- 画布是一个矩形区域，您可以控制其每一像素。
- canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
5.2 使用方法
步骤示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 创建画布，通过 JavaScript 来绘制 -->
<canvas id="mycanvas" width="200px" height="100px"></canvas>
<script type="text/javascript">
// JavaScript 使用 id 来寻找 canvas 元素
var c = document.getElementById("mycanvas");
// 创建 context 对象,
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
var cxt = c.getContext("2d");
//绘制一个红色的矩形
//fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸
cxt.fillStyle=("#FF0000");
cxt.fillRect(0,0,175,100);
</script>
</body>
</html>
效果：
