1、已移除的元素
<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>
2、Canvas
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
3、内联 SVG
<!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>
4、Canvas 与 SVG 的比较
Canvas | SVG |
---|---|
依赖分辨率 | 不依赖分辨率 |
不支持事件处理器 | 支持事件处理器 |
弱的文本渲染能力 | 最适合带有大型渲染区域的应用程序(比如谷歌地图) |
能够以 .png 或 .jpg 格式保存结果图像 | 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) |
最适合图像密集型的游戏,其中的许多对象会被频繁重绘 | 不适合游戏应用 |
5、拖放(Drag 和 Drop)
<script>
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");
ev.target.appendChild(document.getElementById(data));
}
</script>
<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">
6、地理定位
- Navigator 对象包含有关浏览器的信息。
- getCurrentPosition() ——获得用户的位置。
- watchPosition() ——返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
- clearWatch() ——停止 watchPosition() 方法。
<p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition (showPosition,showError);}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position){
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
function showError(error){
switch(error.code){
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;}
}
</script>
7、新的 Input 类型
color date datetime datetime-local email month number range search tel time url week
8、新的表单元素
- <datalist> 定义选项列表,与 input 元素配合使用。
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
- <keygen>用于表单的密钥对生成器字段。
<form action="demo_keygen.php" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
- <output>定义不同类型的输出,比如脚本的输出。
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
9、新的表单属性
- <form>新属性:
- autocomplete:布尔类型,是否让浏览器自动记录之前输入的值。
- novalidate:布尔属性,规定在提交表单时不应该验证 form 或 input 域。
- <input>新属性:
- autocomplete
- autofocus:布尔类型
- form
- formaction,formenctype(只对form表单中 method=”post” 表单),formmethod,formnovalidate,formtarget:会覆盖form元素中的相应属性,用于 submit 和image类型中。
- height,width:只适用于image类型 。
- list:规定输入域的 datalist。
- min,max,step:适用于date系列、number 、range类型。
- multiple:布尔类型,规定元素中可选择多个值,适用于email 和 file类型。
- pattern:描述了一个正则表达式用于验证 input 元素的值。用全局 title 属性描述模式。
- placeholder
- required:布尔类型。
10、新的语义元素
<header>,<nav>,<section>,<article>,<aside>,<figcaption>,<figure>,<footer>
(1)以上的元素都是块元素(除了<figcaption>)。为了让这些块元素在所有版本的浏览器中生效,需要在样式表文件中设置一下属性 :
header, section, footer, aside, nav, article, figure{
display: block;
}
(2)使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址:http://code.google.com/p/html5shiv/ 。下载后,将以下代码放入的网页中(必须将以下代码放置于<head> 元素中,因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素):
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
11、Web存储
- localStorage:没有时间限制的数据存储。
- sessionStorage:针对一个 session 的数据存储。当用户关闭浏览器窗口后,数据会被删除。
function clickCounter(){
if(typeof(Storage)!=="undefined"){
if(localStorage.clickcount){
localStorage.clickcount = Number(localStorage.clickcount)+1;
}else{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";}
}
12、应用程序缓存
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
13、Web Workers
- web worker 是运行在后台的 JavaScript,不会影响页面的性能。
- 由于 web worker 位于外部文件中,它们无法访问window 对象,document 对象,parent 对象。
14、服务器发送事件SSE
- Server-Sent 事件指的是网页自动获取来自服务器的更新。
- EventSource 对象
- onopen:当通往服务器的连接被打开
- onmessage:当接收到消息
- onerror:当发生错误
15、多媒体
- audio元素支持三种音频格式:MP3,Wav, Ogg。
- video元素支持三种视频格式:MP4,WebM, Ogg。
16、HTML 插件
- <object>
- <embed>没有关闭标签,不能使用替代文本。