HTML5新特性基本操作解密.docx

1、HTML5新特性基本操作解密 HTML5基本新功能教程解密1) 什么是 HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。2) HTML5 是如何起步的？HTML5 是 W3C 与 WHATWG 合作的结果。为 HTML5 建立的一些规则： 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash） 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备3) 新特性HTML5 中的一些有趣的新特性： 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存

2、储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、searchHTML 5 视频4) Web 上的视频HTML5 规定了一种通过 video 元素来包含视频的标准方法。视频格式当前，video 元素支持三种视频格式：格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+NoOgg = 带有 Theora 视频编码和 Vorbis 音频编码

3、的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件5) 如何工作control 属性供添加播放、暂停和音量控件。 与 之间插入的内容是供不支持 video 元素的浏览器显示的： Your browser does not support the video tag.6) 标签的属性属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设

4、置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl要播放的视频的 URL。widthpixels设置视频播放器的宽度。7) HTML 5 Video + DOMHTML5 元素同样拥有方法、属性和事件。其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说， 元素开始播放、已暂停，已停止，等等。 播放/暂停 大 中 小 Your browser does

5、 not support HTML5 video. 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; 8) HTML5 - 方法、属性以及事件下面列出了大多数浏览器支

6、持的视频方法、属性和事件：方法属性事件play()currentSrcplaypause()currentTimepauseload()videoWidthprogresscanPlayTypevideoHeighterrordurationtimeupdateendedendederrorabortpausedemptymutedemptiedseekingwaitingvolumeloadedmetadataheightwidth注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。9) HTML5 提供了播放

7、音频的标准。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。音频格式当前，audio 元素支持三种音频格式：IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg VorbisMP3Wav10) 如何工作control 属性供添加播放、暂停和音量控件。 与 之间插入的内容是供不支持 audio 元素的浏览器显示的： Your browser does not support the audio element.11) 标签的属性属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontr

8、ols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。srcurl要播放的音频的 URL。12) HTML 5 拖放拖放（Drag 和 drop）是 HTML5 标准的组成部分。拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari

9、5 支持拖放。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);13) 设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：14) 拖动什么 - ondr

10、agstart 和 setData()dataTransfer.setData() 方法设置被拖数据的数据类型和值：function drag(ev)ev.dataTransfer.setData(Text,ev.target.id);15) 放到何处 - ondragoverondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的event.preventDefault() 方法：event.preventDefault()16) 进行放置 - ondro

11、p当放置被拖数据时，会发生 drop 事件。在上面的例子中，ondrop 属性调用了一个函数，drop(event)：function drop(ev)ev.preventDefault();var data=ev.dataTransfer.getData(Text);ev.target.appendChild(document.getElementById(data);代码解释： 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） 通过 dataTransfer.getData(Text) 方法获得被拖的数据。该方法将返回在 se

12、tData() 方法中设置为相同类型的任何数据。 被拖数据是被拖元素的 id (drag1) 把被拖元素追加到放置元素（目标元素）中17) HTML 5 Canvas canvas 元素用于在网页上绘制图形。什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建 Canvas 元素向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度：18) 通过 JavaScript 来绘制canvas 元素本身是没有绘图能力的

13、。所有的绘制工作必须在 JavaScript 内部完成：var c=document.getElementById(myCanvas);var cxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);JavaScript 使用 id 来寻找 canvas 元素：var c=document.getElementById(myCanvas);然后，创建 context 对象：var cxt=c.getContext(2d); getContext(2d) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、

14、字符以及添加图像的方法JavaScript 代码：var c=document.getElementById(myCanvas);var cxt=c.getContext(2d);var img=new Image()img.src=flower.pngcxt.drawImage(img,0,0);canvas 元素：Your browser does not support the canvas element.19) 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形

15、SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准SVG 的优势与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大20) 把 SVG 直接嵌入 HTML 页面在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：实例 21) HTML5 Geolocation（地理定位）用于定位用户的位置。浏览器支持Internet Explor

16、er 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。getCurrentPosition() 方法 - 返回数据若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。属性描述coords.latitude十进制数的纬度coords.longitude十进制数的经度coords.accuracy位置精度coords.altitude海拔，海平面以上以米计coords.altitudeAccuracy位置的海拔精度coords.headi

17、ng方向，从正北开始以度计coords.speed速度，以米/每秒计timestamp响应的日期/时间22) 在客户端存储数据HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储23) localStorage 方法localStorage 方法存储的数据没有时间限制localStorage.lastname=Smith;document.write(localStorage.lastname);if (localStorage.pagecount) localStorag

18、e.pagecount=Number(localStorage.pagecount) +1; else localStorage.pagecount=1; document.write(Visits + localStorage.pagecount + time(s).);24) sessionStorage 方法sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。sessionStorage.lastname=Smith;document.write(sessionStorage.lastname);sessionStorage.l

19、astname=Smith;document.write(sessionStorage.lastname);25) web worker 是运行在后台的 JavaScript，不会影响页面的性能。什么是 Web Worker？当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。检测 Web Worker 支持if(typeof(Worker)!=undefined) / Yes! Web

20、 worker support! / Some code. else / Sorry! No Web Worker support. 26) 创建 web worker 文件var i=0;function timedCount()i=i+1;postMessage(i);setTimeout(timedCount(),500);timedCount();注释：web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。27) 创建 Web Worker 对象下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 d

21、emo_workers.js 中的代码：if(typeof(w)=undefined) w=new Worker(demo_workers.js); 然后我们就可以从 web worker 发生和接收消息了。向 web worker 添加一个 onmessage 事件监听器：w.onmessage=function(event)document.getElementById(result).innerHTML=event.data;28) 终止 Web Worker如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：w.terminate();Cou

22、nt numbers: Start WorkerStop Workervar w;function startWorker()if(typeof(Worker)!=undefined) if(typeof(w)=undefined) w=new Worker(demo_workers.js); w.onmessage = function (event) document.getElementById(result).innerHTML=event.data; ;elsedocument.getElementById(result).innerHTML=Sorry, your browser does not support Web Workers.;function stopWorker()w.terminate();HTML5 Input 类型本章全面介绍这些新的输入类型： email url number