前端Day07笔记

一、注释
    1.什么是注释
        相当于备注，是给人看的，不是给浏览器看的，放在注释中的内容不会被浏览器解析
    2.注释的表示方法
        <!--  --> 中间放内容
    3.注释的快捷键
        ctrl+/
        
二、常用的快捷键
    1.    ctrl+s         保存
    2.    ctrl+c         复制
    3.    ctrl+v         粘贴
    4.    ctrl+x         剪切
    5.    ctrl+z         撤销
    6.    ctrl+/         注释
    7.    ctrl+f         搜索
    8.    ctrl+enter     回车键 可以快速的换一行    
    
三、媒体标签
    1.<img/> 图片标签（见Day06笔记）
    
    2.<video></video> 视频标签（见Day06笔记）
    
    3.<audio></audio> 音频标签
        音频标签有以下属性：
            1）src：存放音频路径（包括绝对路径、相对路径、服务器地址）
            1）controls:音频播放控件，如果不加这个属性，音频无法播放
            2）muted:静音
            3）loop:循环播放
            音频标签属性和视频标签是类似的
    4.浏览器无法打开特定格式的音频和视频标签时的解决方法
        问题产生的原因：视频格式已经音频格式种类很多，没有浏览器能支持打开所有格式的音频或视频文件，因此可以通过嵌套若干个source标签（这个标签可以写成单标签也可以写成双标签），给出几个不同格式的视频或音频文件
        具体用法：删除video/audio中的src属性，在video/audio中添加若干个source标签，在source标签的src属性值中添加不同格式的视频/音频文件，浏览器会按顺序解析，如果文件格式能被打开，则会跳过解析之后所有的source标签，也可以在最后加一个提示文本来告诉用户所有提供的格式都没法解析
        举例：
        <video controls muted>
            <source src="./Katie Sky,Timeflies - Monsters.aa"></source>
            <source src="./Katie Sky,Timeflies - Monsters.bb"></source>
            <source src="./Katie Sky,Timeflies - Monsters.cc"></source>
            <source src="./Katie Sky,Timeflies - Monsters.ddd"></source>
            <p>您的浏览器版本太低不支持视频播放，请升级 <a href="test.rar" download>下载</a></p>
        </video>
        
        
        
四、超链接
    1.超链接标签表示：<a></a>
    
    2.超链接标签具有以下属性：
        1）href：存放超链接的地址，填写不同的内容会有不同的效果如下：
            a.可以是任意后缀名的文件，如果是后缀html，则会跳转至新的html页面；如果是媒体文件，则会在浏览器中打开，如果浏览器不支持打开，则会进行下载
            b.可以是特定的地址，点击超链接之后可以唤醒手机内部的功能，比如：
                href="tel:10086"可以打电话给10086；
                href="mailto:123@qq.com"可以发邮件给123@qq.com；
                href="weixin://"可以打开微信；
                href="alipayqr://platformapi/startapp"可以打开支付宝；
                href="taobao://"可以打开淘宝；
                href="mqq://"可以打开QQ等等
            
        2）target：超链接打开方式，有两个取值分别为_self（在当前窗口打开，会覆盖当前窗口）；_blank（在新的窗口打开）
        3）download：强制下载，该属性必须以服务的形式启动项目才能生效，否则还是会在浏览器中打开！！！属性值为下载时的文件取名（最好加上文件后缀，否则可能会出现问题），如果省略不写，会将href中的地址作为文件名下载
        补充：live server方式打开html时，live server会帮我们在内存中创建一台服务器，它会模拟将我们的页面部署到服务器
        
    3.超链接的锚点用法
        在a标签的href属性值中带有#xxx，如果有标签的id属性值匹配上xxx，那么点击超链接之后匹配的id属性值所在的标签会来到页面的最前方，这个专业叫法叫做hash
        具体用法：将需要设置超链接锚点的标签的id属性值设置为xxx，再将需要跳转的a标签的href属性值的尾部加上#xxx
        
五、列表
    1.有序列表
        格式：
        <ol type="1">
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
            <li>内容4</li>
            <li>内容5</li>
        </ol>
        ol标签的type属性能更改有序列表的顺序表示方式，属性值的取值有：A（大写英文字母）、a（小写英文字母）、I（大写罗马数字）、i（小写的罗马数字）、1（阿拉伯数字）
        li标签里可以嵌套任意的标签
        
    2.无序列表
        格式：
        <ul type="square">
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
            <li>内容4</li>
            <li>内容5</li>
        </ul>
        ul标签的type属性能更改无序列表中每一项前面小圆点的表示方式，属性值的取值有：square等
        li标签里可以嵌套任意的标签
    
    3.自定义列表
        <dl>
            <dt>标题1</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dd>内容3</dd>
            <dd>内容4</dd>
            <dt>标题2</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dd>内容3</dd>
            <dd>内容4</dd>
        </dl>
        dt标签表示列表的一个标题，下面可以放很多个dd标签，一个自定义列表中可以放任意个dt标签和dd标签

六、表格
    1.表格的格式
        <title>
            <caption>这里是整张表格的标题</caption>
            <thead>
                <tr>
                    <th>标题1</th>
                    <th>标题2</th>
                    <th>标题3</th>
                    <th>标题4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>第一行内容1</td>
                    <td>第一行内容2</td>
                    <td>第一行内容3</td>
                    <td>第一行内容4</td>
                </tr>
                <tr>
                    <td>第二行内容1</td>
                    <td>第二行内容2</td>
                    <td>第二行内容3</td>
                    <td>第二行内容4</td>
                </tr>
                <tr>
                    <td>第三行内容1</td>
                    <td>第三行内容2</td>
                    <td>第三行内容3</td>
                    <td>第三行内容4</td>
                </tr>
            </body>
            <tfoot>
                <tr>
                    <td>底部内容1</td>
                    <td>底部内容2</td>
                    <td>底部内容3</td>
                    <td>底部内容4</td>
                </tr>
            </tfoot>
        </title>
        
    2.table标签的属性
        border：边框(已废弃) 
        width：表格的宽度
        cellspacing：表格单元格之间的距离 
        cellpadding：单元格离内部内容之间距离
        align：表格整体位置 （废弃）
            如果用整个表格身上表示的整张表格的对齐方式 如果是用在某一部分表示某一部分内容的对齐方式
            left:居左
            center:居中
            right：居右