html5 2

html5

embed 直接插入视频文件；它的本质是调用本机上已经安装的软件，有兼容性

flash插件 安装flash 1.学习flash 2.苹果设备不支持flash

src播放音频的路径
controls 音频播放器的面板
autoplay 自动播放
loop 循环
音频
<audio src="地址" controls autoplay loop>
</audio>

视频
src播放视频的路径
controls 视频播放器的面板
autoplay 自动播放
loop 循环
width 宽度
height 高度
poster 当视频还没有完全下载，用户没有点击前的默认显示封面 默认显示当前视频的第一帧
注意 设置宽高 一般只会设置宽度或者高度 让其自动等比缩放。
同时设置高度宽度 那么视频不会设置

<video src="mp4" poster="图片路径" controls>

</video>

source标签 不同浏览器 支持的视频文件格式不一样 进行视频添加 需要考虑到浏览器是否支持 准备多个格式的视频文件 让浏览器去选择

<video controls>
<source src="...flv" type="video/flv">
<source src="...mp4" type="video/mp4">
</video>

html5 获取标签
document.getElementsByTagName("li")[0];

/*query 查询 selcted 选择器*/
querySelector默认获取单个元素，如果不止一个 返回第一个
如果是类样式 必须添加. id选择器 添加#号 否则当作标签处理
document.querySelector('.green')

document.querySelectorAll("li") #返回所有的标签

html添加样式
只能添加一个样式
document.querySelector("li").classList.add("red")

多次写多次添加

移除样式 只能移除一个样式
document.querySelector("li").classList.remove("red")

toggle 切换元素的样式 如果元素之前没有制定名称的样式则添加，如果有则移除
document.querySelector("li").classList.toggle("red") 没有red添加 有red移除

contains 判断元素是否包含制定名称的样式 返回true/false
document.querySelector("li").classList.contains("red") 是否有red这种class

item 项 取class名字

自定义属性
定义规范
data-开头
data-后至少需要有一个字符
data-属性名称都使用小写 不要包含任何的大写字符
不要有任何的特殊符号
不要使用纯数字

<p data-my-name="h">asd</p>

<script>
var p = document.querySelector("p");
获取自定义属性值
将data-后面的单词使用camel命名法连接
var value = p.dataset["myName"]; 小写myname对应是data-myname的属性
</script>