< ! doctype> 声明必须位于 HTML5 文档中的第一行, 使用非常简单:
< ! DOCTYPE html>
新元素 新属性 完全支持CSS3 Video和Audio 2D、3D绘图 本地存储 本地SQL数据 Web应用 video<audio>本地数据存储 访问本地文件 本地SQL数据 缓存引用 JavaScript工作者 XHTMLHttpRequest 2 绘制简单的图形 使用<canvas>元素 使用内联SVG 使用CSS3 2D转换 、CSS3 3D转换 新选择器 新属性 动画 2D\3D转换 圆角 阴影效果 可下载的字体
Canvas<canvas>定义图形，必须使用JavaScript脚本来绘制图形默认情况下<canvas>元素没有边框和内容，可以使用style属性来添加边框 使用JavaScript来绘制图形 首先，找到 < canvas> 元素:
var c= document. getElementById ( "myCanvas" ) ;
然后，创建 context 对象：
var ctx= c. getContext ( "2d" ) ;
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000 （黑色）。
ctx. fillStyle= "#FF0000" ;
fillRect ( x, y, width, height) 方法定义了矩形当前的填充方式。
ctx. fillRect ( 0 , 0 , 150 , 75 ) ;
<canvas>坐标 <canvas>是一个二维网络<canvas>的左上角坐标为(0,0)<canvas> 路径 moveTo(x,y)定义线条开始坐标lineTo(x,y)定义线条结束坐标定义开始坐标( 0 , 0 ) , 和结束坐标 ( 200 , 100 ) 。然后使用 stroke ( ) 方法来绘制线条:
! [ 在这里插入图片描述] ( https: / / img- blog. csdnimg. cn/ bb2c43d26423407db3509054b57f7123. png) JavaScript: var c= document. getElementById ( "myCanvas" ) ;
var ctx= c. getContext ( "2d" ) ;
ctx. moveTo ( 0 , 0 ) ;
ctx. lineTo ( 200 , 100 ) ;
ctx. stroke ( ) ;
var c= document. getElementById ( "myCanvas" ) ;
var ctx= c. getContext ( "2d" ) ;
ctx. beginPath ( ) ;
ctx. arc ( 95 , 50 , 40 , 0 , 2 * Math. PI) ;
ctx. stroke ( ) ;
<canvas>文本 foot定义字体fillText(text,x,y)在canvas上绘制实心的文本var c= document. getElementById ( "myCanvas" ) ;
var ctx= c. getContext ( "2d" ) ;
ctx. font= "30px Arial" ;
ctx. fillText ( "Hello World" , 10 , 50 ) ;
strokeText(text,x,y) 在 canvas 上绘制空心的文本var c= document. getElementById ( "myCanvas" ) ;
var ctx= c. getContext ( "2d" ) ;
ctx. font= "30px Arial" ;
ctx. strokeText ( "Hello World" , 10 , 50 ) ;
<canvas>渐变 createLinearGradient(x,y,x1,y1) - 创建线条渐变当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop ( ) 方法指定颜色停止，参数使用坐标来描述，可以是0 至1. 使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。使用 createLinearGradient ( ) :
var c= document. getElementById ( "myCanvas" ) ;
var ctx= c. getContext ( "2d" ) ;
var grd= ctx. createLinearGradient ( 0 , 0 , 200 , 0 ) ;
grd. addColorStop ( 0 , "red" ) ;
grd. addColorStop ( 1 , "white" ) ;
ctx. fillStyle= grd;
ctx. fillRect ( 10 , 10 , 150 , 80 ) ;
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变var c= document. getElementById ( "myCanvas" ) ;
var ctx= c. getContext ( "2d" ) ;
var grd= ctx. createRadialGradient ( 75 , 50 , 5 , 90 , 60 , 100 ) ;
grd. addColorStop ( 0 , "red" ) ;
grd. addColorStop ( 1 , "white" ) ;
ctx. fillStyle= grd;
ctx. fillRect ( 10 , 10 , 150 , 80 ) ;
Canvas图像 把一幅图像放置到画布上 drawImage(image,x,y)var c= document. getElementById ( "myCanvas" ) ;
var ctx= c. getContext ( "2d" ) ;
var img= document. getElementById ( "scream" ) ;
ctx. drawImage ( img, 10 , 10 ) ;
SVGSVG定义为可缩放矢量图形,在放大或改变尺寸的情况下图形质量不会有损失HTML5支持内联SVGHTML<avg>元素是SVG图形的容器 SVG有多种绘制路径、框、圆、文本和图形图像的方法 SVG优势 可通过文本编辑器来创建和修改 可被搜索、索引、脚本话或压缩 可伸缩的 可在任何的分辨率下被高质量的打印 可在图像质量不下降的情况下被放大 SVG 五角星SVG有3种图形对象，分别是矢量图形，点阵图像，文本< ! 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>
SVG与Canvas的区别SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。SVG与Canvas的比较
MathML<math>...</math>MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。 < ! DOCTYPE html>
< html> < head> < meta charset= "UTF-8" > < title> 菜鸟教程( runoob. com) < / title> < / head> < body> < 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> < / body>
< / html>
拖放Drag、Drop拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 设置元素可拖放把 draggable 属性设置为 true 拖动什么 - ondragstart 和 setData() dataTransfer. setData ( ) 方法设置被拖数据的数据类型和值：function drag ( ev)
{ ev. dataTransfer. setData ( "Text" , ev. target. id) ;
}
Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ( "drag1" ) 。
放到何处 - ondragover ondragover 事件规定在何处放置被拖动的数据。 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法： 进行放置 - ondrop function drop ( ev)
{ ev. preventDefault ( ) ; var data= ev. dataTransfer. getData ( "Text" ) ; ev. target. appendChild ( document. getElementById ( data) ) ;
} 代码解释：调用 preventDefault ( ) 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer. getData ( "Text" ) 方法获得被拖的数据。该方法将返回在 setData ( ) 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ( "drag1" )
把被拖元素追加到放置元素（目标元素）中
Geolocation（地理定位）getCurrentPosition() 方法来获得用户的位置。Video(视频）< video width= "320" height= "240" controls> < source src= "movie.mp4" type= "video/mp4" > < source src= "movie.ogg" type= "video/ogg" >
您的浏览器不支持Video标签。
< / video>
<video>元素提供了播放、暂停和音量控件来控制视频<video>元素也提供了width和height属性控制视频的尺寸，如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：音频、视频的方法 Audio（音频）< audio controls> < source src= "horse.ogg" type= "audio/ogg" > < source src= "horse.mp3" type= "audio/mpeg" >
您的浏览器不支持 audio 元素。
< / audio>
control属性供添加播放、暂停和音量控件<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件新的Input类型color 类型用在input字段主要用于选取颜色选择你喜欢的颜色 : < input type= "color" name= "favcolor" >
date 类型允许你从一个日期选择器选择一个日期。 生日 : < input type= "date" name= "bday" >
datetime 类型允许你选择一个日期（UTC 时间）。生日 ( 日期和时间) : < input type= "datetime" name= "bdaytime" >
datetime-local类型允许你选择一个日期和时间 (无时区).生日 ( 日期和时间) : < input type= "datetime-local" name= "bdaytime" >
email类型用于应该包含 e-mail 地址的输入域。E - mail: < input type= "email" name= "email" >
生日 ( 月和年) : < input type= "month" name= "bdaymonth" >
数量 ( 1 到 5 之间 ) : < input type= "number" name= "quantity" min= "1" max= "5" >
使用下面的属性来规定对数字类型的限定： range类型用于应该包含一定范围内数字值的输入域。显示为滑动条。< input type= "range" name= "points" min= "1" max= "10" >
使用下面的属性来规定对数字类型的限定： search类型用于搜索域，比如站点搜索或 Google 搜索。Search Google: < input type= "search" name= "googlesearch" >
电话号码 : < input type= "tel" name= "usrtel" >
选择时间 : < input type= "time" name= "usr_time" >
url类型用于应该包含url地址的输入域在提交表单时会自动验证url域的值 添加您的主页 : < input type= "url" name= "homepage" >
选择周 : < input type= "week" name= "week_year" >
新的表单元素<datalist>元素 <datalist>规定输入域的选项列表<datalist>属性规定form或input域应该拥有自动完成的功能。< input> 元素使用< datalist> 预定义值: < input list= "browsers" > < datalist id= "browsers" > < option value= "Internet Explorer" > < option value= "Firefox" > < option value= "Chrome" > < option value= "Opera" > < option value= "Safari" >
< / datalist>
<keygen>元素 <keygen>元素的作用是提供一种验证用户的可靠方法<keygen>标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个是公钥，私钥存储于客户端，公钥存储则被发送到服务器。公钥用于之后验证用户的客户端证书带有keygen字段的表单 : < form action= "demo_keygen.asp" 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>
<form>新属性： autocomplete 规定form或input域应该拥有自动完成功能novalidate属性是一个布尔类型novalidate属性规定在提交表单时不应该验证form或input域<input>新属性： autocompleteautofocus属性是一个布尔类型，规定也买你加载时，域自动获得焦点form 属性规定输入域所属的一个或多个表单formaction 属性用于描述表单提交的url地址formenctype属性描述了表单提交到服务器的数据编码（只对form表单中method=“post”表单） formmethod属性定义了表单的提交的方式formnovalidate 属性是一个布尔类型，描述了<input>元素在提交表单的时候不需要被验证formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的提示height 和 width 属性属性规定用于image类型的input的图像高度和宽度list属性规定输入域的选项列表min 和 max 属性用于包含数字或日期的input类型规定限定multiple 属性是一个布尔类型，规定input元素中可选择多个值pattern 属性描述了一个正则表达式用于验证input元素的值placeholder 属性提供一种提示（hint），描述输入域所期待的值。required 属性是一个 boolean 属性.规定必须在提交之前填写输入域（不能为空）。step 属性为输入域规定合法的数字间隔。<section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。<article> 标签定义独立的内容。.<nav> 标签定义导航链接的部分。<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。<header>元素描述了文档的头部区域<footer> 元素描述了文档的底部区域.<figure> 和 <figcaption> 元素localStorage用于长久保存整个网页的数据，保存的数据没有过期时间，直到手动去除 存储的额数据没有时间限制。第二天、第二周或下一年注资后，数据依然可以用
localStorage. setItem ( "sitename" , "菜鸟教程" ) ;
document. getElementById ( "result" ) . innerHTML = "网站名：" + localStorage. getItem ( "sitename" ) ; ·移除 localStorage 中的 "sitename" : localStorage. removeItem ( "sitename" ) ;
保存数据：localStorage. setItem ( key, value) ;
读取数据：localStorage. getItem ( key) ;
删除单个数据：localStorage. removeItem ( key) ;
删除所有数据：localStorage. clear ( ) ;
得到某个索引的key：localStorage. key ( index) ;
sessionStorage针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。 if ( sessionStorage. clickcount)
{ sessionStorage. clickcount= Number ( sessionStorage. clickcount) + 1 ;
}
else
{ sessionStorage. clickcount= 1 ;
}
document. getElementById ( "result" ) . innerHTML= "在这个会话中你已经点击了该按钮 " + sessionStorage. clickcount + " 次 " ;
WebSocketWebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议WebSocket是的客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输在WebSocket API中，浏览器和服务器只需要做一个握手的额动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送 HTML5定义的WebSocket协议，能更好的节省服务器资源和带宽，并且能够耿实时的进行通讯 浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务端就可以通过TCP连接直接交换数据。 当获取WebSocket连接后，可以通过send()方法向服务器发送数据，并通过onmessage事件来接收服务器返回的数据 以下 API 用于创建 WebSocket 对象。var Socket = new WebSocket ( url, [ protocol] ) ; 第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
WebSocket属性WebSocket事件WebSocket方法
