神奇的HTML5基础学习

  HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
 
  为 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.264 视频编码和 AAC 音频编码的 MPEG 4 文件
 
  WebM=带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
 
  如需在 HTML5 中显示视频,您所有需要的是:
 
  <audio src=”song.ogg” controls=”controls”></audio>
 
  control 属性供添加播放、暂停和音量控件。
 
  video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
 
  实例
 
  <audio
 
  controls=”controls”>  <source src=”song.ogg” type=”audio/ogg”>
 
  <source src=”song.mp3″ type=”audio/mpeg”> Your browser does not
 
  support the audio tag. </audio>
 
  demo:
 
  <!DOCTYPE html>
 
  <html>
 
  <body>
 
  <div style=”text-align:center;”>
 
  <button onclick=”playPause()”>播放/暂停</button>
 
  <button onclick=”makeBig()”>大</button>
 
  <button onclick=”makeNormal()”>中</button>
 
  <button onclick=”makeSmall()”>小</button>
 
  <br />
 
  <video id=”video1″ width=”420″ style=”margin-top:15px;”>
 
  <source src=”/example/html5/mov_bbb.mp4″ type=”video/mp4″ />
 
  <source src=”/example/html5/mov_bbb.ogg” type=”video/ogg” />
 
  Your browser does not support HTML5 video.

 
 
  </video>
 
  </div>
 
  <script type=”text/javascript”>
 
  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;
 
  }
 
  </script>
 
  </body>
 
  </html>
 
  HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
 
  audio 元素能够播放声音文件或者音频流。
 
  音频格式
 
  当前,audio 元素支持三种音频格式:
 
  如何工作
 
  如需在 HTML5 中播放音频,您所有需要的是:
 
  <audio src=”song.ogg” controls=”controls”></audio>
 
  control 属性供添加播放、暂停和音量控件。
 
  audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
 
  实例
 
  <audio
 
  controls=”controls”>  <source src=”song.ogg” type=”audio/ogg”>
 
  <source src=”song.mp3″ type=”audio/mpeg”>Your browser does not
 
  support the audio tag.</audio>
 
  <audio> 标签的属性
 
  拖放(Drag 和 drop)是 HTML5 标准的组成部分。
 
  拖放
 
  拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

 
 
  在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
 
  拖放实例:
 
  <!DOCTYPE HTML>
 
  <html>
 
  <head>
 
  <script type=”text/javascript”>
 
  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));
 
  }
 
  </script>
 
  </head>
 
  <body>
 
  <div id=”div1″ ondrop=”drop(event)”ondragover=”allowDrop(event)”></div>
 
  <img id=”drag1″ src=”img_logo.gif” draggable=”true”ondragstart=”drag(event)” width=”336″ height=”69″ />
 
  </body>
 
  </html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61640.shtml

张贴在2