今天完成的事情：

学习使用audio，可在html中直接使用以下标签：

<audio src="b.mp3" controls="controls" preload id="music1" hidden>
</audio>
<span id="bf" onclick="bf();">播放/暂停</span>
<span id="bf" onclick="rbf();">重新播放</span>

其中可选属性有：

autoplay:唯一可选值为autoplay，出现autoplay属性并准确赋值时，音频将会自动播放

controls：唯一可选值为controls，出现controls属性并准确赋值时，音频播放控件将会显示，控件包括：播放、暂停、定位、音量、全屏切换、字幕（如果可用）、音轨（如果可用）。

loop：唯一可选值为loop，出现loop属性并准确赋值时，音频将会循环播放。

preload：可选值有auto(当页面加载后载入整个音频)、meta(当页面加载后只载入元数据)和none(当页面加载后不载入音频) 如果设置了前面的autoplay属性，那么preload将会被忽略。

src：指定音频URL地址，可以是相对的URL也可以是绝对的URL 当然还可以像第2和第3个例子一样，用source标签来指定源。

想使用更多标签可以加入js代码：

<script>
function rbf(){
 var audio = document.getElementById('music1');
 audio.currentTime = 0;
}
function bf(){
 var audio = document.getElementById('music1');
 if(audio!==null){            
    //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
     alert(audio.paused);
  if(audio.paused)                     {                
      audio.play();//audio.play();// 这个就是播放 
  }else{
   audio.pause();// 这个就是暂停
  }
 }   
</script>

学习设定透明和隐藏：

一般可以直接使用opacity声明透明度从0到1，简单好用，但是它会使所有子元素都变成透明的；

而通过rgba我们可以将一个元素设定为透明而不会影响到它的子元素。

明天要做的事：

调试调试调试，调试完开任务八

遇到的问题：

audio按钮的默认大小好小一块儿，生怕点不着它，又找不到方法扩大它，于是只好把背景图片缩小。

发现通过js可以编辑audio额外的属性，不知道有没有大小这一项，有时间研究一下。

收获：

body的margin和padding设置的是body里元素的属性，如果在里面再添加块儿级子元素，里面的margin值貌似就是子元素的默认值了，需要手动设定。