html5学习笔记
来源：互联网 发布：软件开发工作量统计表 编辑：程序博客网 时间：2024/06/05 05:03
HTML5
1.除了原先的DOM接口，HTML5增加了更多应用程序接口(API),如：
1. 用于即时2D绘图的Canvas标签
2. 定时媒体回放
3. 离线数据库存储
4. 文档编辑
5. 拖拽控制
6. 浏览历史管理
2.HTML5的两大特点：
首先，强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签。 其次，追加了本地数据库等Web应用的功能。
3.标签
<!--...--> 定义注释。
<!DOCTYPE> 定义文档类型。
<a> 定义超链接。
<abbr> 定义缩写。
<acronym> HTML 5 中不支持。定义首字母缩写。 ------(淘汰)
<address> 定义地址元素。用来留下制作人部分信息，封闭标签
<applet> HTML 5 中不支持。定义 applet。 ------(淘汰)
<area> 定义图像映射中的区域。
<article> 定义大块文章（整版内容，报纸，用户反馈，博文）-----(new)
例：<article>
<img>
<h2>
<address>
<time>
</article>
<aside> 定义页面内容之外的内容。显示它旁边的一个东西 -----(new)
<audio> 定义声音内容。 -----(new)
<b> 定义粗体文本。
<base> 定义页面中所有链接的基准 URL。
<basefont> HTML 5 中不支持。请使用 CSS 代替。 ------(淘汰)
<bdo> 定义文本显示的方向。
<big> HTML 5 中不支持。定义大号文本。 ------(淘汰)
<blockquote> 定义长的引用。
<body> 定义 body 元素。
<br> 插入换行符。
<button> 定义按钮。
<canvas> 定义图形。 -----(new)
<caption> 定义表格标题。
<center> HTML 5 中不支持。定义居中的文本。 ------(淘汰)
<cite> 定义引用。
<code> 定义计算机代码文本。
<col> 定义表格列的属性。
<colgroup> 定义表格列的分组。
<command> 定义命令按钮。 -----(new)
<datalist> 定义下拉列表。 -----(new)
<dd> 定义定义的描述。
<del> 定义删除文本。
<details> 定义元素的细节。 -----(new)
<dfn> 定义定义项目。
<dir> HTML 5 中不支持。定义目录列表。 ------(淘汰)
<div> 定义文档中的一个部分。 4
<dl> 定义定义列表。
<dt> 定义定义的项目。
<em> 定义强调文本。 -----(new)
<embed> 定义外部交互内容或插件。
<fieldset> 定义 fieldset。
<figcaption> 定义 figure 元素的标题。 -----(new)
<figure> 定义媒介内容的分组，以及它们的标题。 -----(new)
与布局无关的内容
<font> HTML 5 中不支持。 ------(淘汰)
<footer> 定义 section 或 page 的页脚。 -----(new)
例：<footer>
<p>
<nav>
<h3>
<div>
<a>
</div>
</nav>
</footer>
<form> 定义表单。
<frame> HTML 5 中不支持。定义子窗口（框架）。 ------(淘汰)
<frameset> HTML 5 中不支持。定义框架的集。 ------(淘汰)
<h1> to <h6> 定义标题 1 到标题 6。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。 -----(new)
一般是新闻头条/导航/标题，可以写在页面的任意位置，但是不能嵌套在address和footer中
<hgroup> 定义有关文档中的 section 的信息。 -----(new)
例：<header>
<img>
<hgroup>
<h1>
<h2>
</hgroup>
</header>
<hr> 定义水平线。
<html> 定义 html 文档。
<i> 定义斜体文本。
<iframe> 定义行内的子窗口（框架）。
<Ruby> 汉字元素
<section>
(1)<vedio>标记:定义视频，比如电影片段或其他视频流
①
属性 值 描述
autoplay autoplay 视频在就绪后马上播放。
controls controls 向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 当媒介文件完成播放后再次开始播放。
preload preload 视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
②注意：<vedio> 与 </vedio> 之间插入的内容是供不支持 vedio 元素的浏览器显示的
例：<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
你的浏览器不支持vedio元素
</video>
(2)<audio> 标记:定义声音，比如音乐或其他音频流,当前，audio 元素支持三种音频格式：Ogg Vorbis ,MP4，Wav
①
属性 值 描述
autoplay autoplay 音频在就绪后马上播放。
controls controls 向用户显示控件，比如播放按钮。
loop loop 每当音频结束时重新开始播放。
preload preload 音频在页面加载时进行加载，并预备播放如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
②注意：
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的
control 属性供添加播放、暂停和音量控件。
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式
例：<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
例：<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
(3)<canvas> 标记:定义图形，比如图表和其他图像。
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像.画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
① 填充内容:
实例1:显示一个红色的矩形：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas')/querySelector("canvas")/createElement("CANVAS");
var ctx=canvas.getContext('2d'); ------》获得2d上下文
ctx.fillStyle='#FF0000'/'red'/'rgb(255,255,0,0.5)';----->填充颜色 (0.5代表半透明)
ctx.fillRect(0,0,80,100); ------>指定区域（x轴，y轴，宽度，高度）
</script>
②Paths ---像手绘的过程
实例2：线条
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.beginPath();
cxt.moveTo(10,10); 抬起笔到这个点
cxt.lineTo(150,50); ---》绘制直线
cxt.quadraticCurveTo(cpx,cpy,x,y); ---》绘制抛物线
cxt.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);---》贝塞尔曲线
cxt.arcTo(x1,y1,x2,y2,radius); ----》绘制弧
cxt.stroke();
</script>
实例3：圆形
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
③Rect矩形对象
实例1:显示一个红色的矩形：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas')/document.querySelector("canvas"); ---》得到画布
var ctx=canvas.getContext('2d'); ------》获得2d上下文
ctx.rect(x,y,w,h);
</script>
④渐变
线性渐变：
实例4：渐变背景
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50); --》起始位置截至位置
grd.addColorStop(0,"#FF0000"); ---》渐变中结点
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd; ---》应用到图形上
cxt.fillRect(0,0,175,50);
</script>
中心区域渐变：
实例5：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createRadialGradient(260,320,40,200,400,200); --》起始位置截至位置，两个圆心及半径
grd.addColorStop(0,"#FF0000"); ---》渐变中结点
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd; ---》应用到图形上
cxt.fillRect(0,200,400,400);
</script>
实例6：把一副图像放置到画布上
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png" ;
cxt.drawImage(img,0,0);
</script>
⑤填充边界的样式有strokeStyle决定
4.输入类型<input type="" />
为了配合用户输入，提供新的输入类型：
email:自动校验输入的是否是email
url：自动将提交的数据变成url
number：（文本框）输入数字必须在min和max之间，
step规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等），
value为默认值
例：<input type=number min=1 max=10 value=5 step=1 />(只能输入1-10之间的数字)
Date pickers(date：选择年月日
month：选择年月
week：选择年和周
time：选择时间（小时和分钟）
datetime：选择年月日时间，UTC time
datetime-local：选择年月日时间，本地时间)
color：选择一种颜色，以RGB方式记录显示
range：（显示为滑动条）选择在min和max之间的数字，step为步长，value为默认值
search：和搜索引擎交互的一个内容
5.
-------Forms元素
list:datalist-id 输入选择项,datalist 元素规定输入域的选项列表,列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
<input list="cars"/>
<datalist id="cars">
<option value="BMW">
<option value="B">
<option value="W">
</datalist>
keygen:加密传输数据 Username:<input type="text" name="user_name" />
Encryption:<keygen name="security" />
output:自动提交计算结果,用于不同类型的输出，比如计算或脚本输出：
<input type="number" name="numa">+<input type="number" name="numb">=
<output name="result"onforminput="value=numa.valueAsNumber+numb.valueAsNumber">
</output>
------Forms属性：
autocomplete
novalidate
------input 属性：
autofocus：页面已加载就获得焦点---<input type="search" name=query autofocus />
placeholder：输入框默有的内容，一旦输入，有的内容就消失<input type="email" placeholder="user@host.com">
autocomplete：on/off 是否自动补充完这一文本框
form：formname 说明一个文本框属于某一个form
formaction：url 本文本框将要提交到何处
formenctype：application/x-www-form-urlencoded ,multipart/form-data ,text/plain置顶发送时候的编码方式
formmethod：post/get 指定提交方式
formtarget：_bank/_self/_parent/_top/framename 提交结果显示位置
height：Pixels/% 定义图片高度
width：Pixels/% 定义图片宽度
multiple：允许多项
pattern：正则表达式 eg：pattern="[0-9]",用正则格式化输入
meter：为了显示进度 <meter value="2" min="0" max="10"></meter>
<meter value="0.6"></meter>
progress:显示进度条 <progress value="80" max="100"></progress>
required:
-------客户端脚本数据校验：
required:必填项，一旦没填，失去焦点就会提示
checkValidity函数：指定一个验证函数 <input type=email name=email onchange="this.checkValidity();">
setCustomValidity()
6.Web存储
HTML5提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
HTML5 使用 JavaScript 来存储和访问数据。
（1）localStorage 方法：存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
实例：
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
实例---对用户访问页面的次数进行计数（刷新页面会看到计数器在增长）：
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
7.视频音频
（1）转码工具----”格式工厂”转换软件不错
①ffmpeg----下载地址： http://ffmpeg.zeranoe.com/builders
写一个convert.bat文件---- ffmpeg -i ha.flv myflashvideo.webm(将flv格式转换成webm格式)
②vlc
③firefogg
8.
（1）字体信息---使用css样式来定义：context.font=[font-style font-variant font weight font-size font-family]
font-size和font-family是必须的
可被支持字体列表： http://www.fontex.org
（2）水平对齐方式：
textAlign属性用于判断水平对齐方式：context.textAlign=[left|right|center|*start|end]
修改浏览器字体排列方向：document.dir=[*ltr|rtl]
（3）垂直对齐方式
textBaseline指定垂直对齐方式：context.textBaseline=[top|middle|*alphabetic|bottom|hanging|ideographic]
（4）绘制文字：
类似绘制图像，首先fill然后stroke：context.fillText(text,x,y,maxwidth)
context.strokeText(text,x,y,maxwidt
测量文字宽度 TextWidth=context.measureText(text).width
（5）内嵌图像
drawImage可以绘制图像：
context.drawImage(image,dx,dy)
context.drawImage(image,dx,dy,dw,dh)
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
选择一部分区域贴到目标区域：
image.onload=function(){
context.drawImage(image,0,0); ----图片根据尺寸截取左上角
context.drawImage(image,620,300,300,375,390,10,200,250);
}
（6）绘制像素
getImageData(),putImageData(),createImageData()
ImageData对象：ImageData.width,ImageData.height,ImageData.data
修改像素：使用putImageData回写
操作像素：var image=new Image();
image.src='images/yosemite.jpg';
image.onload=function(){
context.drawImage(image,0,0,360,240);
var modified=context.createImageData(360,240);
var imagedata=context.getImageData(0,0,360,240);
for(var i=0;i<imagedata.data.length;i+=4){
var rgba=grayLuminosity(
imagedata.data[i+0],
imagedata.data[i+1],
imagedata.data[i+2],
imagedata.data[i+3]
);
modified.data[i+0]=rgba[0];
modified.data[i+1]=rgba[1];
modified.data[i+2]=rgba[2];
modified.data[i+3]=rgba[3];
}
context.putImageData(modified,0,0);
};
（7）合成影像
当图像重叠时的绘制方法：context.globalCompositeOperation='source-over';
A为先绘制的图形，B为后绘制的图形
source-over:B在A上
source-in：B在A上，但是只有A,B重叠的部分有颜色，其余透明
source-out：A在B上，
source-atop：B在A上，除了未和A重叠的B地方透明，其余都有颜色
destination-over：A在B上面
destination-in：A在B上面，但是只有A,B重叠的部分有颜色，其余透明
destination-out：B在A上，未和B重叠的A地方有颜色，其余透明
destination-atop：A在B上，除了未和B重叠的A地方透明，其余都有颜色
xor：异或，A与B重叠的地方没有颜色
copy：B在A上方，B有颜色，其余透明
lighter：轻量级的图片效果工具
（8）Patterns
-createPattern(image,repetition)
-复用模式：var cvs=document.createElement("CANVAS");
cvs.width=20;
cvs.height=20;
var ctx=cvs.getContext('2d');
ctx.fillStyle='lime';
ctx.fillRect(0,0,10,10);
ctx.fillRect(10,10,10,10);
ctx.fillStyle='green';
ctx.fillRect(10,0,10,10);
ctx.fillRect(0,10,10,10);
context.fillStyle=context.createPattern(cvs,'repeat');
context.fillRect(0,0,220,220);
9.地理定位
定位用户的位置：HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
浏览器支持：Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
（1）下例是一个简单的地理定位实例，可返回用户位置的经度和纬度：
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
//navigator.geolocation.watchPosition(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>
（2）获得位置：
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的位置：</p>
<button onclick="getLocation()">试一下</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
//处理错误和拒绝
//getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED: // 用户不允许地理定位
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE: // 无法获取当前位置
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT: // 操作超时
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>
10.应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
--------什么是应用程序缓存（Application Cache）？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
•离线浏览 - 用户可在应用离线时使用它们
•速度 - 已缓存资源加载得更快
•减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
--------所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
--------HTML5 Cache Manifest 实例（供离线浏览）：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
--------Manifest 文件，是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
•CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
例子：CACHE MANIFEST
/theme.css
/logo.gif
/main.js
文件加载后浏览器会从网站的根目录下载这三个文件，然后无论用户何时与因特网断开连接，这些资源依然是可用的
•NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
例子：NETWORK:
login.asp
文件 "login.asp" 永远不会被缓存，且离线时是不可用的
NETWORK:
*
可以使用星号来指示所有其他资源/文件都需要因特网连接：
•FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
例子：如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件：
FALLBACK:
/html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。
-------更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
•用户清空浏览器缓存
•manifest 文件被修改（参阅下面的提示）
•由程序来更新应用缓存
实例 - 完整的 Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。
如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。
更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
fest 文件。
注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
11.Web Workers----运行在后台的 JavaScript，不会影响页面的性能。
----什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
----所有主流浏览器均支持 web worker，除了 Internet Explorer。
----HTML5 Web Workers 实例
在后台计数：
<!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()
{
//在创建 web worker 之前，请检测用户的浏览器是否支持它
if(typeof(Worker)!=="undefined")
{
//检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js"
if(typeof(w)=="undefined")
{
//创建 Web Worker 对象
w=new Worker("/example/html5/demo_workers.js");
}
//向 web worker 添加一个 "onmessage" 事件监听器
//当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
//onopen 当通往服务器的连接被打开
//onmessage 当接收到消息
//onerror 当错误发生
w.onmessage = function (event) {
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>
------创建 web worker 文件
现在，让我们在一个外部 JavaScript 中创建我们的 web worker。
在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //用于向 HTML 页面传回一段消息。
setTimeout("timedCount()",500);
}
timedCount();
注释：web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
------Web Workers 和 DOM
由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：
•window 对象
•document 对象
•parent 对象
12.服务器发送事件----允许网页获得来自服务器的更新。
-------Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
-------所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。
-------接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知：
实例:
//•创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
var source=new EventSource("demo_sse.php");
//•每接收到一次更新，就会发生 onmessage 事件
//•当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
--------检测 Server-Sent 事件支持
检测服务器发送事件的浏览器支持情况：
if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}
else
{
// Sorry! No server-sent events support..
}
服务器端代码实例:
为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（ASP）。
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。
ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
代码解释：
•把报头 "Content-Type" 设置为 "text/event-stream"
•规定不对页面进行缓存
•输出发送日期（始终以 "data: " 开头）
•向网页刷新输出数据
13.内联 SVG
HTML5 支持内联 SVG。
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
-----什么是SVG？
•SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
•SVG 用于定义用于网络的基于矢量的图形
•SVG 使用 XML 格式定义图形
•SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
•SVG 是万维网联盟的标准
-----SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
•SVG 图像可通过文本编辑器来创建和修改
•SVG 图像可被搜索、索引、脚本化或压缩
•SVG 是可伸缩的
•SVG 图像可在任何的分辨率下被高质量地打印
•SVG 可在图像质量不下降的情况下被放大
-----浏览器支持：Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
-----把 SVG 直接嵌入 HTML 页面
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
实例：
<!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-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
-----Canvas 与 SVG 的比较
Canvas
•依赖分辨率
•不支持事件处理器
•弱的文本渲染能力
•能够以 .png 或 .jpg 格式保存结果图像
•最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
•不依赖分辨率
•支持事件处理器
•最适合带有大型渲染区域的应用程序（比如谷歌地图）
•复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
•不适合游戏应用
14.拖放：拖放（Drag 和 drop）是 HTML5 标准的组成部分
-----浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放在，Safari 5.1.2 中不支持拖放。
实例：来回拖放图片如何在两个 <div> 元素之间拖放图像：
数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
//默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
function allowDrop(ev)
{
ev.preventDefault();
}
//规定了被拖动的数据。
function drag(ev)
{
//方法设置被拖数据的数据类型和值
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
//避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
ev.preventDefault();
//获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
var data=ev.dataTransfer.getData("Text");
//被拖数据是被拖元素的 id ("drag1"),把被拖元素追加到放置元素（目标元素）中
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
//ondragover 事件规定在何处放置被拖动的数据。
//进行放置 - ondrop,当放置被拖数据时，会发生 drop 事件。
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</div>
//为了使元素可拖动，把 draggable 属性设置为 true,拖动什么 - ondragstart 和 setData()
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
1.除了原先的DOM接口，HTML5增加了更多应用程序接口(API),如：
1. 用于即时2D绘图的Canvas标签
2. 定时媒体回放
3. 离线数据库存储
4. 文档编辑
5. 拖拽控制
6. 浏览历史管理
2.HTML5的两大特点：
首先，强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签。 其次，追加了本地数据库等Web应用的功能。
3.标签
<!--...--> 定义注释。
<!DOCTYPE> 定义文档类型。
<a> 定义超链接。
<abbr> 定义缩写。
<acronym> HTML 5 中不支持。定义首字母缩写。 ------(淘汰)
<address> 定义地址元素。用来留下制作人部分信息，封闭标签
<applet> HTML 5 中不支持。定义 applet。 ------(淘汰)
<area> 定义图像映射中的区域。
<article> 定义大块文章（整版内容，报纸，用户反馈，博文）-----(new)
例：<article>
<img>
<h2>
<address>
<time>
</article>
<aside> 定义页面内容之外的内容。显示它旁边的一个东西 -----(new)
<audio> 定义声音内容。 -----(new)
<b> 定义粗体文本。
<base> 定义页面中所有链接的基准 URL。
<basefont> HTML 5 中不支持。请使用 CSS 代替。 ------(淘汰)
<bdo> 定义文本显示的方向。
<big> HTML 5 中不支持。定义大号文本。 ------(淘汰)
<blockquote> 定义长的引用。
<body> 定义 body 元素。
<br> 插入换行符。
<button> 定义按钮。
<canvas> 定义图形。 -----(new)
<caption> 定义表格标题。
<center> HTML 5 中不支持。定义居中的文本。 ------(淘汰)
<cite> 定义引用。
<code> 定义计算机代码文本。
<col> 定义表格列的属性。
<colgroup> 定义表格列的分组。
<command> 定义命令按钮。 -----(new)
<datalist> 定义下拉列表。 -----(new)
<dd> 定义定义的描述。
<del> 定义删除文本。
<details> 定义元素的细节。 -----(new)
<dfn> 定义定义项目。
<dir> HTML 5 中不支持。定义目录列表。 ------(淘汰)
<div> 定义文档中的一个部分。 4
<dl> 定义定义列表。
<dt> 定义定义的项目。
<em> 定义强调文本。 -----(new)
<embed> 定义外部交互内容或插件。
<fieldset> 定义 fieldset。
<figcaption> 定义 figure 元素的标题。 -----(new)
<figure> 定义媒介内容的分组，以及它们的标题。 -----(new)
与布局无关的内容
<font> HTML 5 中不支持。 ------(淘汰)
<footer> 定义 section 或 page 的页脚。 -----(new)
例：<footer>
<p>
<nav>
<h3>
<div>
<a>
</div>
</nav>
</footer>
<form> 定义表单。
<frame> HTML 5 中不支持。定义子窗口（框架）。 ------(淘汰)
<frameset> HTML 5 中不支持。定义框架的集。 ------(淘汰)
<h1> to <h6> 定义标题 1 到标题 6。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。 -----(new)
一般是新闻头条/导航/标题，可以写在页面的任意位置，但是不能嵌套在address和footer中
<hgroup> 定义有关文档中的 section 的信息。 -----(new)
例：<header>
<img>
<hgroup>
<h1>
<h2>
</hgroup>
</header>
<hr> 定义水平线。
<html> 定义 html 文档。
<i> 定义斜体文本。
<iframe> 定义行内的子窗口（框架）。
<Ruby> 汉字元素
<section>
(1)<vedio>标记:定义视频，比如电影片段或其他视频流
①
属性 值 描述
autoplay autoplay 视频在就绪后马上播放。
controls controls 向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 当媒介文件完成播放后再次开始播放。
preload preload 视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
②注意：<vedio> 与 </vedio> 之间插入的内容是供不支持 vedio 元素的浏览器显示的
例：<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
你的浏览器不支持vedio元素
</video>
(2)<audio> 标记:定义声音，比如音乐或其他音频流,当前，audio 元素支持三种音频格式：Ogg Vorbis ,MP4，Wav
①
属性 值 描述
autoplay autoplay 音频在就绪后马上播放。
controls controls 向用户显示控件，比如播放按钮。
loop loop 每当音频结束时重新开始播放。
preload preload 音频在页面加载时进行加载，并预备播放如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
②注意：
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的
control 属性供添加播放、暂停和音量控件。
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式
例：<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
例：<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
(3)<canvas> 标记:定义图形，比如图表和其他图像。
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像.画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
① 填充内容:
实例1:显示一个红色的矩形：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas')/querySelector("canvas")/createElement("CANVAS");
var ctx=canvas.getContext('2d'); ------》获得2d上下文
ctx.fillStyle='#FF0000'/'red'/'rgb(255,255,0,0.5)';----->填充颜色 (0.5代表半透明)
ctx.fillRect(0,0,80,100); ------>指定区域（x轴，y轴，宽度，高度）
</script>
②Paths ---像手绘的过程
实例2：线条
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.beginPath();
cxt.moveTo(10,10); 抬起笔到这个点
cxt.lineTo(150,50); ---》绘制直线
cxt.quadraticCurveTo(cpx,cpy,x,y); ---》绘制抛物线
cxt.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);---》贝塞尔曲线
cxt.arcTo(x1,y1,x2,y2,radius); ----》绘制弧
cxt.stroke();
</script>
实例3：圆形
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
③Rect矩形对象
实例1:显示一个红色的矩形：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas')/document.querySelector("canvas"); ---》得到画布
var ctx=canvas.getContext('2d'); ------》获得2d上下文
ctx.rect(x,y,w,h);
</script>
④渐变
线性渐变：
实例4：渐变背景
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50); --》起始位置截至位置
grd.addColorStop(0,"#FF0000"); ---》渐变中结点
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd; ---》应用到图形上
cxt.fillRect(0,0,175,50);
</script>
中心区域渐变：
实例5：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createRadialGradient(260,320,40,200,400,200); --》起始位置截至位置，两个圆心及半径
grd.addColorStop(0,"#FF0000"); ---》渐变中结点
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd; ---》应用到图形上
cxt.fillRect(0,200,400,400);
</script>
实例6：把一副图像放置到画布上
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png" ;
cxt.drawImage(img,0,0);
</script>
⑤填充边界的样式有strokeStyle决定
4.输入类型<input type="" />
为了配合用户输入，提供新的输入类型：
email:自动校验输入的是否是email
url：自动将提交的数据变成url
number：（文本框）输入数字必须在min和max之间，
step规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等），
value为默认值
例：<input type=number min=1 max=10 value=5 step=1 />(只能输入1-10之间的数字)
Date pickers(date：选择年月日
month：选择年月
week：选择年和周
time：选择时间（小时和分钟）
datetime：选择年月日时间，UTC time
datetime-local：选择年月日时间，本地时间)
color：选择一种颜色，以RGB方式记录显示
range：（显示为滑动条）选择在min和max之间的数字，step为步长，value为默认值
search：和搜索引擎交互的一个内容
5.
-------Forms元素
list:datalist-id 输入选择项,datalist 元素规定输入域的选项列表,列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
<input list="cars"/>
<datalist id="cars">
<option value="BMW">
<option value="B">
<option value="W">
</datalist>
keygen:加密传输数据 Username:<input type="text" name="user_name" />
Encryption:<keygen name="security" />
output:自动提交计算结果,用于不同类型的输出，比如计算或脚本输出：
<input type="number" name="numa">+<input type="number" name="numb">=
<output name="result"onforminput="value=numa.valueAsNumber+numb.valueAsNumber">
</output>
------Forms属性：
autocomplete
novalidate
------input 属性：
autofocus：页面已加载就获得焦点---<input type="search" name=query autofocus />
placeholder：输入框默有的内容，一旦输入，有的内容就消失<input type="email" placeholder="user@host.com">
autocomplete：on/off 是否自动补充完这一文本框
form：formname 说明一个文本框属于某一个form
formaction：url 本文本框将要提交到何处
formenctype：application/x-www-form-urlencoded ,multipart/form-data ,text/plain置顶发送时候的编码方式
formmethod：post/get 指定提交方式
formtarget：_bank/_self/_parent/_top/framename 提交结果显示位置
height：Pixels/% 定义图片高度
width：Pixels/% 定义图片宽度
multiple：允许多项
pattern：正则表达式 eg：pattern="[0-9]",用正则格式化输入
meter：为了显示进度 <meter value="2" min="0" max="10"></meter>
<meter value="0.6"></meter>
progress:显示进度条 <progress value="80" max="100"></progress>
required:
-------客户端脚本数据校验：
required:必填项，一旦没填，失去焦点就会提示
checkValidity函数：指定一个验证函数 <input type=email name=email onchange="this.checkValidity();">
setCustomValidity()
6.Web存储
HTML5提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
HTML5 使用 JavaScript 来存储和访问数据。
（1）localStorage 方法：存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
实例：
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
实例---对用户访问页面的次数进行计数（刷新页面会看到计数器在增长）：
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
7.视频音频
（1）转码工具----”格式工厂”转换软件不错
①ffmpeg----下载地址： http://ffmpeg.zeranoe.com/builders
写一个convert.bat文件---- ffmpeg -i ha.flv myflashvideo.webm(将flv格式转换成webm格式)
②vlc
③firefogg
8.
（1）字体信息---使用css样式来定义：context.font=[font-style font-variant font weight font-size font-family]
font-size和font-family是必须的
可被支持字体列表： http://www.fontex.org
（2）水平对齐方式：
textAlign属性用于判断水平对齐方式：context.textAlign=[left|right|center|*start|end]
修改浏览器字体排列方向：document.dir=[*ltr|rtl]
（3）垂直对齐方式
textBaseline指定垂直对齐方式：context.textBaseline=[top|middle|*alphabetic|bottom|hanging|ideographic]
（4）绘制文字：
类似绘制图像，首先fill然后stroke：context.fillText(text,x,y,maxwidth)
context.strokeText(text,x,y,maxwidt
测量文字宽度 TextWidth=context.measureText(text).width
（5）内嵌图像
drawImage可以绘制图像：
context.drawImage(image,dx,dy)
context.drawImage(image,dx,dy,dw,dh)
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
选择一部分区域贴到目标区域：
image.onload=function(){
context.drawImage(image,0,0); ----图片根据尺寸截取左上角
context.drawImage(image,620,300,300,375,390,10,200,250);
}
（6）绘制像素
getImageData(),putImageData(),createImageData()
ImageData对象：ImageData.width,ImageData.height,ImageData.data
修改像素：使用putImageData回写
操作像素：var image=new Image();
image.src='images/yosemite.jpg';
image.onload=function(){
context.drawImage(image,0,0,360,240);
var modified=context.createImageData(360,240);
var imagedata=context.getImageData(0,0,360,240);
for(var i=0;i<imagedata.data.length;i+=4){
var rgba=grayLuminosity(
imagedata.data[i+0],
imagedata.data[i+1],
imagedata.data[i+2],
imagedata.data[i+3]
);
modified.data[i+0]=rgba[0];
modified.data[i+1]=rgba[1];
modified.data[i+2]=rgba[2];
modified.data[i+3]=rgba[3];
}
context.putImageData(modified,0,0);
};
（7）合成影像
当图像重叠时的绘制方法：context.globalCompositeOperation='source-over';
A为先绘制的图形，B为后绘制的图形
source-over:B在A上
source-in：B在A上，但是只有A,B重叠的部分有颜色，其余透明
source-out：A在B上，
source-atop：B在A上，除了未和A重叠的B地方透明，其余都有颜色
destination-over：A在B上面
destination-in：A在B上面，但是只有A,B重叠的部分有颜色，其余透明
destination-out：B在A上，未和B重叠的A地方有颜色，其余透明
destination-atop：A在B上，除了未和B重叠的A地方透明，其余都有颜色
xor：异或，A与B重叠的地方没有颜色
copy：B在A上方，B有颜色，其余透明
lighter：轻量级的图片效果工具
（8）Patterns
-createPattern(image,repetition)
-复用模式：var cvs=document.createElement("CANVAS");
cvs.width=20;
cvs.height=20;
var ctx=cvs.getContext('2d');
ctx.fillStyle='lime';
ctx.fillRect(0,0,10,10);
ctx.fillRect(10,10,10,10);
ctx.fillStyle='green';
ctx.fillRect(10,0,10,10);
ctx.fillRect(0,10,10,10);
context.fillStyle=context.createPattern(cvs,'repeat');
context.fillRect(0,0,220,220);
9.地理定位
定位用户的位置：HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
浏览器支持：Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
（1）下例是一个简单的地理定位实例，可返回用户位置的经度和纬度：
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
//navigator.geolocation.watchPosition(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>
（2）获得位置：
<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的位置：</p>
<button onclick="getLocation()">试一下</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
//处理错误和拒绝
//getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED: // 用户不允许地理定位
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE: // 无法获取当前位置
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT: // 操作超时
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>
10.应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
--------什么是应用程序缓存（Application Cache）？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
•离线浏览 - 用户可在应用离线时使用它们
•速度 - 已缓存资源加载得更快
•减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
--------所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
--------HTML5 Cache Manifest 实例（供离线浏览）：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
--------Manifest 文件，是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
•CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
例子：CACHE MANIFEST
/theme.css
/logo.gif
/main.js
文件加载后浏览器会从网站的根目录下载这三个文件，然后无论用户何时与因特网断开连接，这些资源依然是可用的
•NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
例子：NETWORK:
login.asp
文件 "login.asp" 永远不会被缓存，且离线时是不可用的
NETWORK:
*
可以使用星号来指示所有其他资源/文件都需要因特网连接：
•FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
例子：如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件：
FALLBACK:
/html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。
-------更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
•用户清空浏览器缓存
•manifest 文件被修改（参阅下面的提示）
•由程序来更新应用缓存
实例 - 完整的 Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。
如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。
更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
fest 文件。
注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
11.Web Workers----运行在后台的 JavaScript，不会影响页面的性能。
----什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
----所有主流浏览器均支持 web worker，除了 Internet Explorer。
----HTML5 Web Workers 实例
在后台计数：
<!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()
{
//在创建 web worker 之前，请检测用户的浏览器是否支持它
if(typeof(Worker)!=="undefined")
{
//检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js"
if(typeof(w)=="undefined")
{
//创建 Web Worker 对象
w=new Worker("/example/html5/demo_workers.js");
}
//向 web worker 添加一个 "onmessage" 事件监听器
//当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
//onopen 当通往服务器的连接被打开
//onmessage 当接收到消息
//onerror 当错误发生
w.onmessage = function (event) {
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>
------创建 web worker 文件
现在，让我们在一个外部 JavaScript 中创建我们的 web worker。
在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //用于向 HTML 页面传回一段消息。
setTimeout("timedCount()",500);
}
timedCount();
注释：web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
------Web Workers 和 DOM
由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：
•window 对象
•document 对象
•parent 对象
12.服务器发送事件----允许网页获得来自服务器的更新。
-------Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
-------所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。
-------接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知：
实例:
//•创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
var source=new EventSource("demo_sse.php");
//•每接收到一次更新，就会发生 onmessage 事件
//•当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br />";
};
--------检测 Server-Sent 事件支持
检测服务器发送事件的浏览器支持情况：
if(typeof(EventSource)!=="undefined")
{
// Yes! Server-sent events support!
// Some code.....
}
else
{
// Sorry! No server-sent events support..
}
服务器端代码实例:
为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（ASP）。
服务器端事件流的语法是非常简单的。把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。
ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
代码解释：
•把报头 "Content-Type" 设置为 "text/event-stream"
•规定不对页面进行缓存
•输出发送日期（始终以 "data: " 开头）
•向网页刷新输出数据
13.内联 SVG
HTML5 支持内联 SVG。
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
-----什么是SVG？
•SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
•SVG 用于定义用于网络的基于矢量的图形
•SVG 使用 XML 格式定义图形
•SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
•SVG 是万维网联盟的标准
-----SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
•SVG 图像可通过文本编辑器来创建和修改
•SVG 图像可被搜索、索引、脚本化或压缩
•SVG 是可伸缩的
•SVG 图像可在任何的分辨率下被高质量地打印
•SVG 可在图像质量不下降的情况下被放大
-----浏览器支持：Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
-----把 SVG 直接嵌入 HTML 页面
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
实例：
<!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-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
-----Canvas 与 SVG 的比较
Canvas
•依赖分辨率
•不支持事件处理器
•弱的文本渲染能力
•能够以 .png 或 .jpg 格式保存结果图像
•最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
•不依赖分辨率
•支持事件处理器
•最适合带有大型渲染区域的应用程序（比如谷歌地图）
•复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
•不适合游戏应用
14.拖放：拖放（Drag 和 drop）是 HTML5 标准的组成部分
-----浏览器支持：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放在，Safari 5.1.2 中不支持拖放。
实例：来回拖放图片如何在两个 <div> 元素之间拖放图像：
数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
//默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
function allowDrop(ev)
{
ev.preventDefault();
}
//规定了被拖动的数据。
function drag(ev)
{
//方法设置被拖数据的数据类型和值
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
//避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
ev.preventDefault();
//获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
var data=ev.dataTransfer.getData("Text");
//被拖数据是被拖元素的 id ("drag1"),把被拖元素追加到放置元素（目标元素）中
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
//ondragover 事件规定在何处放置被拖动的数据。
//进行放置 - ondrop,当放置被拖数据时，会发生 drop 事件。
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</div>
//为了使元素可拖动，把 draggable 属性设置为 true,拖动什么 - ondragstart 和 setData()
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
0 0
- HTML5学习笔记 HTML5基础教程
- HTML5学习笔记
- HTML5学习笔记
- html5标签学习笔记
- html5学习笔记之一
- html5 学习笔记
- html5 视频学习笔记。。。
- 学习HTML5笔记
- html5学习笔记一
- html5学习笔记二
- html5学习笔记三
- html5学习笔记四
- HTML5-WebStorage学习笔记
- HTML5学习笔记二
- html5 canvas 学习笔记
- HTML5学习笔记
- HTML5学习笔记二
- HTML5学习笔记
- @protocol1127
- [JAVA] 禁用HTTPS认证（Disabling Certification validation in HTTPS）
- android创建文件夹和文件的一些经验教训
- Rapid Object Detection using a Boosted Cascade of Simple Features 部分翻译
- poj 3687 topsort(按顺序放球)
- html5学习笔记
- 括号配对问题
- 去掉字符串两头的空格
- 判断一个单向链表是否形成了环状结构
- oracle启动报错ORA-00845: MEMORY_TARGET not supported on this system解决办法
- CocoaPods工具包新手安装使用教程指南
- Linux常用命令(二十五) - tar
- AppStore App申请审核加速
- 用TextSwitcher实现文字切换动画
