2017/7/19 学习心得 html5

1、多媒体

1）音频

<audio src="地址"  controls autoplay></audio>

autoplay:自动播放

controls:控制条

loop:循环播放

兼容写法：支持谁选择谁

<audio controls  loop>

<source sru=".mp3"/>

<source sru=".wav"/>

<source sru=".ogg"/>

</audio >

2）视频

<vedio src=“地址" controls autoplay></vedio>

兼容性写法同上

视频播放：play()

暂停：pause()

3) <figure>语义化多媒体

2、DOM拓展

1）获取单个标签

document.querySelector("");只要写选择器，可以是类、id...只会选择符合条件的第一个

2）获取所有符合条件的标签

var div=document.querySelectorAll(""); //返回是一个数组

div[2].style.background='red';

3）类名操作

添加类名：

box1.classList.add("");

删除：

box1.classList.remove("");

判断是否包含：

box1.classList.contains(""); //返回布尔类型

切换类名：

box1.classList.toggle("");

4）自定义属性

必须以data-开头

获取属性：selector.属性名

获取自定义属性：

selector.dataset['name']; //data-后面的

设置自定义属性：

selector.dataset['content']=‘aaa';

data-my-name="zs" 获取方式： selector.dataset[myName']; 连线的地方大写

案例：tab栏-h5

3、拖拽