相关视频链接：https://www.bilibili.com/video/av8481988/?p=3
所涉及知识点总结
html dom对象
（1）audio对象
属性:
controls:指定音频控件显示方式（播放、暂停、进度条、音量）；
loop：音频在结束时是否选择重新播放
muted：是否静音
paused：是否暂停
played：音频已播放部分的 TimeRanges 对象。
src：当前音频的来源
volume：音量
currentTime：当前播放位置（以时间s计算）
方法：
play() ;//开始播放
pause(); //暂停
html dom事件对象
event.keyCode; // 返回当前事件的Unicode 字符代码或 Unicode 键代码
html dom document对象
querySelector() 方法:
document.querySelector(CSS selectors); // 指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
document.querySelectorAll(CSS selectors); // 返回所有的匹配css选择器的document元素
html dom 元素属性
dataList 返回元素的类名，用于在元素中添加、移除及切换css类
属性：length
方法：
add(class1, class2……); //添加类名
remove(class1, class2 ……); //移除类名
toggle(class, true| false); //切换类名 若为true，添加类名； 若为false，移除类
2.css3
（1）transition属性
过渡，转变
transition：css属性名 完成所用时长 转速曲线 效果开始时间；
（2）transform属性
变换，更换
transform：none| 变换方程; //其中变换方程有 scale(x[,y]) scale3D(x,y,z) rotate()
3.ES6
（1）` 模板字符串
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
（2）
4.其他
-ms- IE内核识别码
-o- Opera内核识别码
-moz- FireFox内核识别码
-Webkit- 谷歌内核识别码