1.1.html5的新特性
- 用于绘画的canvas元素
- 用于媒介回放的video和audio元素
- 对本地离线存储的更好支持
- 新的特殊内容元素，比如article,footer,header,nav,section
- 新的表单控件，比如calendar,date,time,email,url,search
2.1.视频类
- 当前，video元素支持三种视频格式：Ogg,MPEG4,WebM
- 在HTML5中显示视频，通过以下代码
<video src="movie.ogg" contrlos="controls">
</video>
- tips:
- control属性提供添加播放、暂停、音量控件
- 也可以增加对于宽高的设定，通过width="400" height="400"
-
<video>和</video>之间可以插入内容以供不支持video元素的浏览器显示 - 对于不同浏览器存在的支持视频格式问题，也可以通过添加多条链接来预防，代码如下
<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.
</video>
- 【video】标签的属性
- autoplay [autoplay="autoplay" 自动播放]
- controls [controls="controls" 显示控件]
- height [height="300" 设置高度]
- width [width="320" 设置宽度]
- loop [loop="loop" 重复播放]
- preload [preload="auto" 页面加载后载入视频，若设置了autoplay属性则忽略该属性]
- src [src="movie.ogg" 规定要播放的视频的url，也可以使用<source>标签来设置]
- HTML5 video + DOM 进行控制
3.1.音频类
-
<audio>标签类似与<video>标签。 - 使用代码如下
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
4.1.HTML5拖放（drag和drop）
- 简单拖放事件的分析
- 设置元素为可拖放
<img draggable="true"> - 拖动什么（ondragstart和setData()），然后规定当元素被拖动时，会发生什么
- ondraggable属性调用一函数drag(event)，其规定了被拖动的数据
- dataTransfer.setData()设置被拖数据的数据类型和值
- 如下例子中，数据类型是"Text",值是可拖动元素的id("drag1")
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
- 放到何处（ondragover），默认的无法将数据或元素放置到其他元素中，所以如果需要设置允许放置，我们必须阻止对元素的默认处理方式，即调用ondragover事件的
event.preventDefault() - 进行放置（ondrop）
- 通过
dataTransfer.getdata("Text")方法获得被拖的数据，返回在setData()中设置为相同类型的任何数据。 - 被拖数据是被拖元素的id（“drag1”）
function drop(event)
{
event.preventDataFault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
简单拖放事件的代码如下
<!doctype html>
<html>
<head>
<script type="text/javascript">
function allowDrop(event)
{
event.preventDefault();
}
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function drop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
- 操作实例（一个图片拖到一个里面）：
<!doctype>
<html>
<head>
<style type="text/css">
#div1 {
width:198px;
height:66px;
padding:10px;
border:1px;
border-style;solid;
}
</style>
<script type="text/javascript">
function allowDrop(event)
{
event.preventDefault();
}
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function drop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请将图片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
</body>
</html>
- 来回拖放图片
<!DOCTYPE>
<html>
<head>
<style type="text/css">
#div1, #div2
{
float:left;
width:198px;
height:66px;
margin:10px;
padding:10px;
border:1px;
border-style:solid;
}
</style>
<script type="text/javascript">
function allowDrop(event)
{
event.preventDefault();
}
function drag(event)
{
event.dataTransfer.setData("Text",event.target.id);
}
function drop(event)
{
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
5.1.canvas
- canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
- 添加canvas元素规定元素的id、宽度和高度
<canvas id="myCanvas" width="200" height="100"></canvas> - canvas元素本身没有绘图能力，所有绘制工作必须在javascript内部完成
- 例如
- javascript使用id来寻找canvas元素
var c=document.getElementById("myCanvas"); - 然后创建context对象。getContext（“2d”）对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
var cxt=c.getContext("2d"); - 绘制一个红色的矩形。fillStyle将其染成红色，fillRect规定了形状、位置和尺寸
- javascript使用id来寻找canvas元素
cxt.fillstyle="#ff0000";
cxt.fillRect(0,0,150,75);
<script type="text/script">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
6.1.SVG
- svg指可伸缩矢量图形scalable vector graphics
- svg使用xml格式定义图形
- svg是万维网联盟的标准
7.1.svg与canvas的比较
- svg是一种使用xml描述2d图形的语言，其基于xml，即svg dom中的每个元素都是可用的，可为某个元素附加javascript事件处理器，在svg中，每个被绘制的图形均被视为对象。若svg对象的属性发生变化，那么浏览器能自动重现图形
- canvas通过JavaScript绘制2D图形，为逐像素进行渲染，一旦图形被绘制完成，它就不会继续得到浏览器关注，若其位置发生变化，则整个场景也需要重新绘制包括任何或许已被图形覆盖的对象
| Canvas | SVG |
|---|---|
| 依赖分辨率 | 不依赖分辨率 |
| 不支持事件处理器 | 支持事件处理器 |
| 弱的文本渲染能力 | 最适合带有大型渲染区域的应用程序（如谷歌地图） |
| 能够以.png或.jpg格式保存结果图形 | 复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快） |
| 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | 不适合游戏应用 |
8.1.地理定位
- 使用getCurrentPosition()来获得用户的位置
9.1.Web存储
- HTML5提供两种在客户端存储数据的新方法
- localStorage 没有时间限制的数据存储
- sessionStorage 针对一个session的数据存储
- HTML5使用JavaScript来存储和访问数据
10.1.应用程序缓存Application Cache
- 通过创建cache manifest文件，来轻松的创建web应用的离线版本
11.1.Web Workers
- Web Workers是运行在后台的JavaScript，独立于其他脚本。
12.1.服务器发送事件
- HTML5服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
剩下的未看内容
修改于20171017
