HTML5将成为HTML、XHTML以及HTMLDOM的新标准。
为HTML5建立的一些规则:
新特性应该基于HTML、CSS、DOM以及JavaScript。减少对外部插件的需求(比如Flash)更优秀的错误处理更多取代脚本的标记HTML5应该独立于设备开发进程应对公众透明
新特性
HTML5中的一些有趣的新特性:
用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素,比如article、footer、header、nav、section新的表单控件,比如calendar、date、time、email、url、search
视频格式
当前,video元素支持三种视频格式:
Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件
MPEG4=带有H.视频编码和AAC音频编码的MPEG4文件
WebM=带有VP8视频编码和Vorbis音频编码的WebM文件
如需在HTML5中显示视频,您所有需要的是:
audiosrc=song.oggcontrols=controls/audio
control属性供添加播放、暂停和音量控件。
video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
实例
audiocontrols=controlssourcesrc=song.oggtype=audio/oggsourcesrc=song.mp3type=audio/mpegYourbrowserdoesnotsupporttheaudiotag./audio
demo:
!DOCTYPEhtml
html
body
divstyle=text-align:center;
buttononclick=playPause()播放/暂停/button
buttononclick=makeBig()大/button
buttononclick=makeNormal()中/button
buttononclick=makeSmall()小/button
br/
videoid=video1width=style=margin-top:15px;
sourcesrc=/example/html5/mov_bbb.mp4type=video/mp4/
sourcesrc=/example/html5/mov_bbb.oggtype=video/ogg/
YourbrowserdoesnotsupportHTML5video.
/video
/div
scripttype=text/javascript
varmyVideo=document.getElementById(video1);
functionplayPause()
{
if(myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
functionmakeBig()
{
myVideo.width=;
}
functionmakeSmall()
{
myVideo.width=;
}
functionmakeNormal()
{
myVideo.width=;
}
/script
/body
/html
HTML5规定了一种通过audio元素来包含音频的标准方法。
audio元素能够播放声音文件或者音频流。
音频格式
当前,audio元素支持三种音频格式:
如何工作
如需在HTML5中播放音频,您所有需要的是:
audiosrc=song.oggcontrols=controls/audio
control属性供添加播放、暂停和音量控件。
audio元素允许多个source元素。source元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
实例
audiocontrols=controlssourcesrc=song.oggtype=audio/oggsourcesrc=song.mp3type=audio/mpegYourbrowserdoesnotsupporttheaudiotag./audio
audio标签的属性
拖放(Drag和drop)是HTML5标准的组成部分。
拖放
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在HTML5中,拖放是标准的一部分,任何元素都能够拖放。
拖放实例:
!DOCTYPEHTML
html
head
scripttype=text/javascript
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));
}
/script
/head
body
divid=div1ondrop=drop(event)ondragover=allowDrop(event)/div
imgid=drag1src=img_logo.gifdraggable=trueondragstart=drag(event)width=height=69/
/body
/html