HTML5 中的一些有趣的新特性：
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
<video><audio>-
拖放
- 设置元素可拖放
<img draggable="true" /> - 设置
ondragstart事件 ，设置setData()
<img id="" src="" draggable="true" ondragstart="drag(event)"/>function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);//设置被拖动数据的数据类型和值 } - 设置放到哪
<div id="" ondrop="drop(event)" ondragover="allowDrop(event)"></div>function allowDrop(ev) { ev.preventDefault();//取消默认的不能放置 }function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text");//获得被拖的数据 ev.target.appendChild(document.getElementById(data)); }
- 设置元素可拖放
-
<canvas>- 新建一个canvas元素
<canvas id="myCanvas" width="200" height="100"></canvas> - js获得绘制环境
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");`//getContext("2d") 对象是内建的HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 <script> - 线条
cxt.moveTo(10,10);//线条的起点 cxt.lineTo(150,50);//线条要连接的第一个点 cxt.lineTo(10,50);//线条要连接的第二个点 cxt.stroke();//绘制实线 - 圆
cxt.beginPath();//开始创建路径 cxt.arc(70,18,15,0,Math.PI*2,true);//x坐标:70,y坐标:18,r:15， //起始角度：0，结束角度：Math.PI*2（圆），逆时针 cxt.closePath();//创建路径结束 cxt.fill();//路径实现 - 渐变
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);//绘制createLinearGradient包含四个参数x1,y1,x2,y2- 如果x1=x2 并且y1!=y2,渐变色改变的方向则是水平。
如果y1=y2 并且x1!=x2, 渐变色方向是垂直的。
如果x1!=x2且y1!=y2,渐变色方向则为对角。
- 如果x1=x2 并且y1!=y2,渐变色改变的方向则是水平。
- 图像
把图像放到画布上var img=new Image() img.src="flower.png" cxt.drawImage(img,0,0);
- 新建一个canvas元素
-
<svg>- Canvas:
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
- Canvas:
-
Geolocation
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; } web存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储-
应用缓存
- 启动应用缓存
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html> - manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
- 启动应用缓存
Web Workers
服务器发送事件
-
表单
- 新增input类型
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
- 新增表单元素
- datalist
<input type="url" list="url_list" name="link" /><--用list绑定datalist的id!--> <datalist id="url_list"> <option label="Google" value="http://www.google.com" /> </datalist> - keygen
<keygen name="security" />
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。 - output
- datalist
- 新增表单属性
- autocomplete
适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
<form action="demo_form.asp" method="get" autocomplete="on"> - autofocus
<input type="text" name="user_name" autofocus="autofocus" /> - form
form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id：<form action="demo_form.asp" method="get" id="user_form"> </form> <input type="text" name="lname" form="user_form" /> - 表单重写属性
适用于以下类型的 <input> 标签：submit 和 image。
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性 - width和height
height 和 width 属性只适用于 image 类型的 <input> 标签。 - list
- min、max、step
- multiple 属性
适用于以下类型的 <input> 标签：email 和 file。 - novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.<form action="demo_form.asp" method="get" novalidate="true"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form> - pattern属性
- placeholder属性
- required属性
- autocomplete
- 新增input类型
-
Web Socket
WebSocket 协议本质上是一个基于 TCP 的协议。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。事件 事件处理程序 描述 open Socket.onopen 连接建立时触发 message Socket.onmessage 客户端接收服务端数据时触发 error Socket.onerror 通信发生错误时触发 close Socket.onclose 连接关闭时触发 新建
var Socket = new WebSocket(url, [protocol] ); 语义元素
h5语义元素
