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
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1