HTML5学习笔记02

一、HTML5 音频

HTML5 规定了一种通过 audio 元素来包含音频的标准方法，audio 元素能够播放声音文件或者音频流。

1、音频格式

 IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg Vorbis   √ √ √  
MP3 √     √ √
Wav   √ √  

 2、代码格式

1 <audio src="song.ogg" controls="controls">
2           你的浏览器不支持此特性，无法播放音频。
3  </audio>

control 属性供添加播放、暂停和音量控件，src属性表示音频的地址，<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。

3、多格式支持

1 <audio controls="controls">
2        <source src="song.ogg" type="audio/ogg">
3        <source src="song.mp3" type="audio/mpeg">
4         你的浏览器不支持此特性，无法播放音频。 
5  </audio>

4、属性

属性值描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。

二、HTML5拖放

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

1、定义

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

2、实例

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <script type="text/javascript">
 5             function allowDrop(ev)
 6             {
 7                 ev.preventDefault();
 8             }
 9 
10             function drag(ev)
11             {
12                 ev.dataTransfer.setData("Text",ev.target.id);
13             }
14 
15             function drop(ev)
16             {
17                 ev.preventDefault();
18                 var data=ev.dataTransfer.getData("Text");
19                 ev.target.appendChild(document.getElementById(data));
20             }
21         </script>
22     </head>
23 
24     <body>
25         <div id="div1" ondrop="drop(event)"    ondragover="allowDrop(event)"></div>
26         <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
27     </body>
28 
29 </html>


通过此实例研究拖放事件的不同部分：

（1）设置元素可拖放

<img draggable="true" />

（2）设置拖动发生的事件

规定当元素被拖动时，会发生什么。ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

function drag(ev)
{
      ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

（3）拖放目的地

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式，可以通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

（4）进行放置

当放置被拖数据时，会发生 drop 事件。

function drop(ev)
{
         ev.preventDefault();
         var data=ev.dataTransfer.getData("Text");
          ev.target.appendChild(document.getElementById(data));
}

（5）代码解释

  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id ("drag1")
  • 把被拖元素追加到放置元素（目标元素）中

三、HTML5 内联SVG

1、SVG定义

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

2、SVG的优势

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

3、用法

<!DOCTYPE html>
<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
       <polygon points="100,10 40,180 190,60 10,60 160,180"
       style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
    </svg> 
</body>
</html>

4、SVG元素
SVG元素很多，这里不一一列举，可参考此网页。

 

posted @ 2014-05-12 05:55  weddy.zheng  阅读(90)  评论(0)    收藏  举报