一、今天完成的事情

1、完成task7的切图，感觉自动切图很慢，还不如手动切（图少的情况下）。

2、html 5 audiod的语法以及属性和方法的学习。

使用语法

<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲 您的浏览器不支持html5的audio标签</audio>
属性

src 是歌曲的路径

controls播放控制 如果给标签里写了 controls="controls" 那么网页会显示audio自带的播放控件，如果没写就不会显示.

loop 歌曲循环 在标签里添加该属性歌曲循环 如果你的歌曲是从后台调取的的 也可以在ajax里设置 loop=true/false来控制;

autoplay 当歌曲加载后自动播放，但是只有pc端可以实现 移动端不行(pc端的浏览器要比移动端的完善很多，对有些属性支持也会好很多)
以上是标签内的属性 当然也可以作为对象属性来调取控制auido.*

audio不单单是个标签 他也是window下的一个对象，对象就有属性和方法，作为对象他有哪些常用的方法呢
对象属性：

currentTime 获取当前播放时间

duration 获取歌曲的总时间

play 是否在播放 返回true/false

pause 是否暂停 返回true/false

对象方法：

play()播放歌曲

pause()暂停歌曲

load()重新加载歌曲

以上这些属性和方法只是audio最常用的一部分，也是今天的demo里面要用到的，如果想了解更多关于audio的属性和方法可以去w3shool看下 http://www.w3school.com.cn/jsref/dom_obj_audio.asp

2.html5 audio的一些事件

play播放事件 可判断歌曲是否正在播放中

pause暂停事件 判断歌曲是否暂停

loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。（这些事件在加载过程中是按以上顺序触发的）

以上这些事件可以通过事件监听对其做相应处理

3.完整的音频播放页面

http://www.open-open.com/lib/view/open1407401112973.html（很长，就不往上传了）

二、明天计划的事情

三、遇到的问题

在解决垂直居中的问题学到flex布局：

一、Flex布局是什么？

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{

  display: flex;

}

行内元素也可以使用Flex布局。

.box{

  display: inline-flex;

}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{

  display: -webkit-flex; /* Safari */

  display: flex;

}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

§  flex-direction

§  flex-wrap

§  flex-flow

§  justify-content

§  align-items

§  align-content

具体可以看链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

四、收获

1、html 5 audiod的语法以及属性和方法的学习。

2、初步学习flex布局。