所在的位置: html >> html市场 >> 神奇的HTML5基础学习

神奇的HTML5基础学习

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




转载请注明:http://www.aierlanlan.com/rzdk/1573.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了