今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

基本完成任务7的第一个页面 

了解到HTML5原生支持对音频和视频的处理无需插件。audio和video标签就是专门为此而诞生的。

HTML <audio> 元素用于在文档中表示音频内容。 音频资源可以使用 src 属性或者<source> 元素来进行描述。对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。

controls 属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

明天计划的事情：（一定要写非常细致的内容） 

继续任务7

遇到的问题：（遇到什么困难，怎么解决的） 

版本选择页面注意下方的四个小点使用CSS这样实现?

HTML <span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个 块元素 而 <span> 则是 行内元素 .

HMTL代码:

            <div>

                <span></span>

                <span></span>

                <span></span>

                <span></span>

            </div>

CSS 代码:

        /*版本选择页面 下方的四个小点 的行内内容居中。 */

        .circle {

            text-align: center;

            /*text-align CSS属性定义行内内容如何相对它的块父元素对齐。 text-align只控制它的行内内容的对齐。*/

        }

        /*结构化伪类根据标记的结构应用样式 */

/*div.circle span:first-child 表示类名为circle的div的子类元素span的第一个元素 */

        div.circle span:first-child{

            background:  #69d1e9;

            margin-top: .8rem;

        }

        /*span:nth-child(n+1) 表示类名为circle的div的子类元素span 除第一个的所有子元素*/

        span:nth-child(n+1) {

            display: inline-block;

            width: 18px;

            height: 18px;

            border-radius: 50%;

            background: rgb(240, 240, 240);

        }

        /*span:nth-child(n) 表示类名为circle的div的所有子类元素span*/

        span:nth-child(n) {

            margin-bottom: .5rem;

        }

收获：（通过今天的学习，学到了什么知识）

1. 了解了HTML5的audio定义音频流

2.  

3.