HTML5新特性基本操作解密.docx
- 文档编号:4295199
- 上传时间:2022-11-29
- 格式:DOCX
- 页数:21
- 大小:25.73KB
HTML5新特性基本操作解密.docx
《HTML5新特性基本操作解密.docx》由会员分享,可在线阅读,更多相关《HTML5新特性基本操作解密.docx(21页珍藏版)》请在冰豆网上搜索。
HTML5新特性基本操作解密
HTML5基本新功能教程解密
1)什么是HTML5?
HTML5将成为HTML、XHTML以及HTMLDOM的新标准。
2)HTML5是如何起步的?
HTML5是W3C与WHATWG合作的结果。
为HTML5建立的一些规则:
∙新特性应该基于HTML、CSS、DOM以及JavaScript。
∙减少对外部插件的需求(比如Flash)
∙更优秀的错误处理
∙更多取代脚本的标记
∙HTML5应该独立于设备
3)新特性
HTML5中的一些有趣的新特性:
∙用于绘画的canvas元素
∙用于媒介回放的video和audio元素
∙对本地离线存储的更好的支持
∙新的特殊内容元素,比如article、footer、header、nav、section
∙新的表单控件,比如calendar、date、time、email、url、search
HTML5视频
4)Web上的视频
HTML5规定了一种通过video元素来包含视频的标准方法。
视频格式
当前,video元素支持三种视频格式:
格式
IE
Firefox
Opera
Chrome
Safari
Ogg
No
3.5+
10.5+
5.0+
No
MPEG4
9.0+
No
No
5.0+
3.0+
WebM
No
4.0+
10.6+
6.0+
No
Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件
MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件
WebM=带有VP8视频编码和Vorbis音频编码的WebM文件
5)如何工作
control属性供添加播放、暂停和音量控件。
之间插入的内容是供不支持video元素的浏览器显示的:
Yourbrowserdoesnotsupportthevideotag.
6)
属性
值
描述
autoplay
autoplay
如果出现该属性,则视频在就绪后马上播放。
controls
controls
如果出现该属性,则向用户显示控件,比如播放按钮。
height
pixels
设置视频播放器的高度。
loop
loop
如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload
preload
如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用"autoplay",则忽略该属性。
src
url
要播放的视频的URL。
width
pixels
设置视频播放器的宽度。
7)HTML5Video+DOM
HTML5
其中的方法用于播放、暂停以及加载等。
其中的属性(比如时长、音量等)可以被读取或设置。
其中的DOM事件能够通知您,比方说,
DOCTYPEhtml>
center;"> 15px;"> YourbrowserdoesnotsupportHTML5video.
varmyVideo=document.getElementById("video1");
functionplayPause()
{
if(myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
functionmakeBig()
{
myVideo.width=560;
}
functionmakeSmall()
{
myVideo.width=320;
}
functionmakeNormal()
{
myVideo.width=420;
}
8)HTML5
下面列出了大多数浏览器支持的视频方法、属性和事件:
方法
属性
事件
play()
currentSrc
play
pause()
currentTime
pause
load()
videoWidth
progress
canPlayType
videoHeight
error
duration
timeupdate
ended
ended
error
abort
paused
empty
muted
emptied
seeking
waiting
volume
loadedmetadata
height
width
注释:
在所有属性中,只有videoWidth和videoHeight属性是立即可用的。
在视频的元数据已加载后,其他属性才可用。
9)HTML5提供了播放音频的标准。
HTML5规定了一种通过audio元素来包含音频的标准方法。
音频格式
当前,audio元素支持三种音频格式:
IE9
Firefox3.5
Opera10.5
Chrome3.0
Safari3.0
OggVorbis
√
√
√
MP3
√
√
√
Wav
√
√
√
10)如何工作
control属性供添加播放、暂停和音量控件。
之间插入的内容是供不支持audio元素的浏览器显示的:
DOCTYPEHTML>
Yourbrowserdoesnotsupporttheaudioelement.
11)
属性
值
描述
autoplay
autoplay
如果出现该属性,则音频在就绪后马上播放。
controls
controls
如果出现该属性,则向用户显示控件,比如播放按钮。
loop
loop
如果出现该属性,则每当音频结束时重新开始播放。
preload
preload
如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用"autoplay",则忽略该属性。
src
url
要播放的音频的URL。
12)HTML5拖放
拖放(Drag和drop)是HTML5标准的组成部分。
拖放
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在HTML5中,拖放是标准的一部分,任何元素都能够拖放。
浏览器支持
InternetExplorer9、Firefox、Opera12、Chrome以及Safari5支持拖放。
DOCTYPEHTML>
functionallowDrop(ev)
{
ev.preventDefault();
}
functiondrag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev)
{
ev.preventDefault();
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
ondragover="allowDrop(event)">
ondragstart="drag(event)"width="336"height="69"/> 13)设置元素为可拖放 首先,为了使元素可拖动,把draggable属性设置为true: 14)拖动什么-ondragstart和setData() dataTransfer.setData()方法设置被拖数据的数据类型和值: functiondrag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } 15)放到何处-ondragover ondragover事件规定在何处放置被拖动的数据。 默认地,无法将数据/元素放置到其他元素中。 如果需要设置允许放置,我们必须阻止对元素的默认处理方式。 这要通过调用ondragover事件的 event.preventDefault()方法: event.preventDefault() 16)进行放置-ondrop 当放置被拖数据时,会发生drop事件。 在上面的例子中,ondrop属性调用了一个函数,drop(event): functiondrop(ev) { ev.preventDefault(); vardata=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } 代码解释: ∙调用preventDefault()来避免浏览器对数据的默认处理(drop事件的默认行为是以链接形式打开) ∙通过dataTransfer.getData("Text")方法获得被拖的数据。 该方法将返回在setData()方法中设置为相同类型的任何数据。 ∙被拖数据是被拖元素的id("drag1") ∙把被拖元素追加到放置元素(目标元素)中 17)HTML5Canvascanvas元素用于在网页上绘制图形。 什么是Canvas? HTML5的canvas元素使用JavaScript在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建Canvas元素 向HTML5页面添加canvas元素。 规定元素的id、宽度和高度: 18)通过JavaScript来绘制 canvas元素本身是没有绘图能力的。 所有的绘制工作必须在JavaScript内部完成: varc=document.getElementById("myCanvas"); varcxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); JavaScript使用id来寻找canvas元素: varc=document.getElementById("myCanvas"); 然后,创建context对象: varcxt=c.getContext("2d"); getContext("2d")对象是内建的HTML5对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 JavaScript代码: varc=document.getElementById("myCanvas"); varcxt=c.getContext("2d"); varimg=newImage() img.src="flower.png" cxt.drawImage(img,0,0); canvas元素: 1pxsolid#c3c3c3;"> Yourbrowserdoesnotsupportthecanvaselement. 19)什么是SVG? ∙SVG指可伸缩矢量图形(ScalableVectorGraphics) ∙SVG用于定义用于网络的基于矢量的图形 ∙SVG使用XML格式定义图形 ∙SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 ∙SVG是万维网联盟的标准 SVG的优势 与其他图像格式相比(比如JPEG和GIF),使用SVG的优势在于: ∙SVG图像可通过文本编辑器来创建和修改 ∙SVG图像可被搜索、索引、脚本化或压缩 ∙SVG是可伸缩的 ∙SVG图像可在任何的分辨率下被高质量地打印 ∙SVG可在图像质量不下降的情况下被放大 20)把SVG直接嵌入HTML页面 在HTML5中,您能够将SVG元素直接嵌入HTML页面中: 实例 DOCTYPEhtml> //www.w3.org/2000/svg"version="1.1"height="190"> style="fill: lime;stroke: purple;stroke-width: 5;fill-rule: evenodd;"/> 21)HTML5Geolocation(地理定位)用于定位用户的位置。 浏览器支持 InternetExplorer9、Firefox、Chrome、Safari以及Opera支持地理定位。 getCurrentPosition()方法-返回数据 若成功,则getCurrentPosition()方法返回对象。 始终会返回latitude、longitude以及accuracy属性。 如果可用,则会返回其他下面的属性。 属性 描述 coords.latitude 十进制数的纬度 coords.longitude 十进制数的经度 coords.accuracy 位置精度 coords.altitude 海拔,海平面以上以米计 coords.altitudeAccuracy 位置的海拔精度 coords.heading 方向,从正北开始以度计 coords.speed 速度,以米/每秒计 timestamp 响应的日期/时间 22)在客户端存储数据 HTML5提供了两种在客户端存储数据的新方法: ∙localStorage-没有时间限制的数据存储 ∙sessionStorage-针对一个session的数据存储 23)localStorage方法 localStorage方法存储的数据没有时间限制 localStorage.lastname="Smith"; document.write(localStorage.lastname); if(localStorage.pagecount) { localStorage.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.lastname="Smith"; document.write(sessionStorage.lastname); 25)webworker是运行在后台的JavaScript,不会影响页面的性能。 什么是WebWorker? 当在HTML页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。 webworker是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。 您可以继续做任何愿意做的事情: 点击、选取内容等等,而此时webworker在后台运行。 检测WebWorker支持 if(typeof(Worker)! =="undefined") { //Yes! Webworkersupport! //Somecode..... } else { //Sorry! NoWebWorkersupport.. } 26)创建webworker文件 vari=0; functiontimedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); 注释: webworker通常不用于如此简单的脚本,而是用于更耗费CPU资源的任务。 27)创建WebWorker对象 下面的代码检测是否存在worker,如果不存在,-它会创建一个新的webworker对象,然后运行"demo_workers.js"中的代码: if(typeof(w)=="undefined") { w=newWorker("demo_workers.js"); } 然后我们就可以从webworker发生和接收消息了。 向webworker添加一个"onmessage"事件监听器: w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; }; 28)终止WebWorker 如需终止webworker,并释放浏览器/计算机资源,请使用terminate()方法: w.terminate(); DOCTYPEhtml> Countnumbers: varw; functionstartWorker() { if(typeof(Worker)! =="undefined") { if(typeof(w)=="undefined") { w=newWorker("demo_workers.js"); } w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry,yourbrowser doesnotsupportWebWorkers..."; } } functionstopWorker() { w.terminate(); } HTML5Input类型 本章全面介绍这些新的输入类型: ∙email ∙url ∙number ∙
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 特性 基本 操作 解密