标签：
新元素（http://www.runoob.com/html/html5-new-element.html）
canvas、audio、video、source、embed、track、datalist、keygen、output
article、aside、bdi、command、details、dialog、summary、figure、figcaption、footer、header、mark、meter、nav、progress、ruby、rt、rp、section、time、wbr
canvas（http://www.runoob.com/html/html5-canvas.html）
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
canvas坐标
canvas 的左上角坐标为 (0,0)，fillRect(x,y,width,height)
canvas路径
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
arc(x,y,r,start,stop) 绘制圆形
stroke() 或者 fill() 绘制
canvas文本
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
canvas渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
canvas图像
drawImage(image,x,y)
内联SVG（http://www.runoob.com/svg/svg-tutorial.html）
SVG直接嵌入html页面
<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>
MathML（http://www.runoob.com/html/html5-mathml.html）
<math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> <mo>=</mo> <msup><mi>c</mi><mn>2</mn></msup> </mrow> </math>
拖放（http://www.runoob.com/html/html5-draganddrop.html）
<!DOCTYPE HTML> <html> <head> <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> </head> <body> <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"> </body> </html>
设置元素可拖放：<img draggable="true">
拖动什么 - ondragstart 和 setData()
放到何处 - ondragover
进行放置 - ondrop
Geolocation
<script> var x=document.getElementById("demo"); function getLocation(){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition); }else{ x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position){ x.innerHTML="Latitude:"+position.coords.latitude+"<br>Longitude: " + position.coords.longitude; } </script>
处理错误和拒绝
<script> 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>
video（http://www.runoob.com/html/html5-video.html）
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video>
<div style="text-align:center"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">放大</button> <button onclick="makeSmall()">缩小</button> <button onclick="makeNormal()">普通</button> <br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video> </div> <script> var myVideo=document.getElementById("video1"); function playPause(){ if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig(){ myVideo.width=560; } function makeSmall(){ myVideo.width=320; } function makeNormal(){ myVideo.width=420; } </script>
Audio（http://www.runoob.com/html/html5-audio.html）
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
新的 Input 类型（http://www.runoob.com/html/html5-form-input-types.html）
color:<input type="color" name="favcolor">
date:<input type="date" name="bday">
datetime:<input type="datetime" name="bdaytime">
datetime-local:<input type="datetime-local" name="bdaytime">
email:<input type="email" name="email">
month:<input type="month" name="bdaymonth">
number:<input type="number" name="quantity" min="1" max="5">
max- 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔(如果 step="3"，则合法的数是 -3,0,3,6 等)
value - 规定默认值
range:<input type="range" name="points" min="1" max="10">
search:<input type="search" name="googlesearch">
tel:<input type="tel" name="usrtel">
time:<input type="time" name="usr_time">
url:<input type="url" name="homepage">
week:<input type="week" name="week_year">
标签：
原文地址：http://www.cnblogs.com/LoveJulin/p/5066584.html
