一、video元素和audio元素

1、基础知识

video元素：

• 在HTML5中专门用来播放网络上的视频或者电影。

audio元素：

• 在HTML5中专门用来播放网络上的音频。

使用video和audio元素进行播放时就不在需要使用其他的插件了，只要我们的浏览器支持HTML5就可以了！

浏览器的支持：
Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都对audio元素和video元素支持！

使用方法：
audio元素只需要给他指定一个src属性：

<audio src="MP3.mp3" controls="controls"></audio>

对于不支持的浏览器我们可以在这对元素之间加入提示语句来代替

<audio src="MP3.mp3" controls="controls">您的浏览器不支持Audio元素</audio>

source元素指定多个播放格式与编码：
source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。
使用方法：

<video>
<source src="video.m4v" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
<source src="video.mp4" />
</video>

2、常用属性

src属性： 在这个属性里面指定媒体数据的URL地址。
controls属性： 指定是否为视频或者音频数据添加浏览器自带的播放控制条，控制条中有播放按钮、暂停等按钮。

使用方法：

<video src="video.mp4" controls="controls"></video>

width和height属性（video独有）：
指定视频的宽度与高度。
使用方法：

<video src="video.mp4" width="650" height="450"></video>

autoplay属性：
这个属性指定是否当我们网页加载完成之后就开始自动播放。

preload属性：
这个属性指定是否对数据进行预加载，如果是的话，浏览器会将视频数据或者音频数据进行缓冲，这样做可以加快播放的速度。
preload属性的三个值：
none 表示不进行预加载。
metadata 表示只预加载媒体的元数据。
auto(默认值) 表示预加载全部的视频或者音频。
使用方法：

<video src="video.mp4" preload="auto" ></video>

poster属性（video独有）：
当视频不可以播放的时候，使用poster元素向用户展示一张图片代替视频。
使用方法：

<video src="video.mp4" poster="video.jpg"></video>

loop属性：
指定是否循环播放视频或者音频数据。
使用方法：

<video src="video.mp4" autoplay="auto" loop="loop"></video>

error属性：
读取过程中一旦发生错误，返回一个Media Error对象，这个对象的code返回对应的错误状态，默认情况下video和audio的error属性都是null。
4种错误状态，返回一个数字值，它表示音频/视频的错误状态：
1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
2 = MEDIA_ERR_NETWORK - 当下载时发生错误
3 = MEDIA_ERR_DECODE - 当解码时发生错误
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 媒体不可用或者不支持音频/视频
读取错误状态示例

<video id="video" src="video.mp4"></video>
<script type="text/javascript">
var video = document.getElementById('video');
video.addEventListener("error",function(){
var error = video.error;
switch (error.code){
case 1:
alert('取回过程被用户中止。');
break;
case 2:
alert('当下载时发生错误。');
break;
case 3:
alert('当解码时发生错误。');
break;
case 4:
alert('媒体不可用或者不支持音频/视频。');
break;
}
},false);
</script>

networkState属性：
networkState 属性返回音频/视频的当前网络状态（activity）
4种错误状态，表示音频/视频元素的当前网络状态：
0 = NETWORK_EMPTY - 音频/视频尚未初始化
1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络
2 = NETWORK_LOADING - 浏览器正在下载数据
3 = NETWORK_NO_SOURCE - 未找到音频/视频来源

networkState属性：
networkState 属性返回音频/视频的当前网络状态（activity）

二、html5的拖放

1、拖放的步骤

1）对象元素的draggable属性设置为true（draggable=“true”）。还需要注意的是a元素和img元素必须指定href。

2）编写与拖放有关的事件处理代码。事件产生事件的元素描述dragstart被拖放的元素开始拖放操作drag被拖放的元素拖放过程中dragenter拖放过程中鼠标经过的元素被拖放的元素开始进入本元素的范围之内dragover拖放过程中鼠标经过的元素被拖放的元素正在本元素范围内移动dragleave拖放过程中鼠标经过的元素被拖放的元素离开本元素的范围drop拖放的目标元素其他元素被拖放到了本元素中dragend拖放的对象元素拖放操作结束

2、DataTransfer对象的属性与方法

DataTransfer对象的属性和方法属性/方法描述dropEffect属性表示拖放操作的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值none、copy、link、moveeffectAllowed属性 用来指定当元素被拖放时所允许的视觉效果，可以指定的值copy、link 、move、copylink 、linkmove、all、none、uninitializedtypes属性存入数据的种类，字符串的伪数组void clearData（DOMString format）方法清除DataTransfer对象中存放的数据，如果省略掉参数format就会清除全部数据。void steData（DOMString format，DOMStrong data）向DataTransfer对象中存入数据DOMString getData(DOMString format)从DataTransfer对象中读取数据void setDragImage(Element image，long x，long y)用img元素来设置拖放图标

clearData方法可以用于清除DataTransfer对象中的数据。

3、拖放的时的效果

设置拖放时的视觉效果
dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示一个元素被拖放时所允许的视觉效果，一般在ondragstart事件中设定，他的值如下：属性值说明copy允许被拖动的元素被复制到项目中move允许将被拖动元素移动到被拖动的目标元素中link通过拖放操作，被拖动的元素会连接到拖到的目标元素上copylink被拖动元素被复制或链接到拖动的目标元素中，根据拖动的目标元素来决定执行复制操作还是链接操作copyMove被拖动元素复制或移动到拖到的目标元素中，根据被拖动的目标元素来决定复制操作还是移动操作linkmove被拖动元素被连接或移动到拖动的目标元素中，根据拖动的目标元素来决定执行链接操作还是移动操作all允许执行所有拖动操作none不允许执行任何拖动操作uninyialize不指定effectAllowed属性值。这是将执行浏览器中默认允许的拖动操作，但是这个操作不能通过effectAllowed属性值来获取
dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许的值none、copy、link、move。

三、css3基础

1、CSS3介绍

• CSS3是CSS技术的升级版本，CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

2、属性选择器

CSS3中的属性选择器：
在CSS中追加了三个属性选择器：[att*=val]、[att^=val]和[att$=val]

如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式。

[att^=val]属性选择器

如果用att表示的属性的属性值的开头字符为用val指定的字符的话，那么该元素使用这个值。

[att$=val]属性选择器

如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。