Day 28

今天完成的事情

      1.学习音频和视频的使用

      2.为task7三个页面切图，并制作雪碧图

      3.为项目使用CSS框架Bootstrap

遇到的问题

      1.明明设置了占四列，偏移四列，但显示的还是一整行

师兄说是因为屏幕太小没有识别，所以加上了col-xs 

发现class太长了还有空格，没办法定义样式

后来只设置了col-xs，并设置了row的样式

       2.字体没办法居中

已经设置了text-aligin，设置line-height没有用，要用定位来做吗？总觉得有点大材小用的意思

收获

      1.音频和视频

基础知识

音频格式：mp3, ogg, wav.

MP3：是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。

Ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的。

WAV：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几。

视频格式：mp4, ogv, webm.

Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件；

MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件；

WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。

历史：早期使用Flash, html5 后使用video/ audio.

基本语法

<audio src=“xxx.mp3” controls></audio>

<video src=“xxx.mp3” controls></video>

audio属性

Src：设置或返回音频/视频元素的当前来源

Controls: 设置或返回音频/视频是否显示基本控件（比如播放/暂停等）

Preload：设置或返回音频/视频是否应该在页面加载后进行加载

①auto – 当页面加载后载入整个音频 
②meta – 当页面加载后只载入元数据 (比如文件的大小，时长，作者等)
③none – 当页面加载后不载入音频，当用户确认打开这些音频收听时，才通过网络进行加载。

Autoplay：设置或返回是否在加载完成后随即播放音频/视频

Loop：设置或返回音频/视频是否应在结束时重新播放

Video属性

同audio

Poster：视频播放前显示的封面

Width：视频宽度

Height：视频高度

使用html为主，flash为辅的原理，兼容多种浏览器

<audio controls>

    <source  src=“http://xxx.mp3”type="audio/mp3">

    <source  src=“http://xxx.ogg”type="audio/ogg">

    <object  data=“http://xxx.mp3”>

        <embed src="http://xxx.mp3">

  </object>

</audio>

      2.为项目使用CSS框架Bootstrap

使用boostrap需要先导入js及css：

Bootstrap需要JQuery才能正常工作，所以需要导入jquery.min.js

接着是 Bootstrap的css，里面定义了各种样式

最后是 Bootstrap的js，用于产生交互效果

导入的代码链接：

明天计划学习

       看视频跟做任务的成就感真的天差地别，看完视频觉得自己什么都会，一上手就完蛋，明天继续吧