表格标签、框架标签与超链接

表格标签

• table——外框

1. border——边框
2. cellpadding——单元格内补
3. cellsapcing——单元格间距

• tr——表中行
• td——普通单元格

4. rowspan——同一列 多行 使用行合并
5. colspan——同一行 多列 使用列合并

• th——表头单元格（居中，加粗）`

  <table border="" style="text-align: center; width: 60%;" align="center">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td rowspan="2">01</td>
            <td>海绵宝宝</td>
            <td>22</td>
        </tr>
        <tr>
            <td colspan="2">派大星</td>
        </tr>
        <tr>
            <td colspan="3">
                <table border="" style="width: 100%; text-align: center;">
                    <tr>
                        <td style="width:50% ;">海底</td>
                        <td>蟹堡王</td>
                    </tr>
                </table>
            </td>
    </table>

运行结果如下：

iframe（框架标签）

• src——网页地址 width height（宽、高）
• frameborder——边框（1-有边框 0-无边框 ）
• scrolling——yes-有滚动条 no-无滚动条
• ./——当前路径
• …/上级路径

<iframe width="600" height="500" scrolling="no" src="./视频标签.html" frameborder="1"></iframe>
    <hr>
    <iframe src="./图片标签.html" frameborder="0"></iframe>

运行结果如下：

a（超级链接）

• 必须有属性href——当href为空时，点击超级链接时会刷新页面
  href的值可以是其他域名网站下方的某一个地址，链接其他网站
  href的值可以使用相对路径
• target（打开新网页）——href结合target 当target的值为_blank时会在新的空白页打开
  _self 当前页

<a href="">超级链接</a>
    <a href="https://www.baidu.com/">百度一下，你就知道</a>
    <a href="../day0719/国际.html">国际热搜词</a>
    <a href="./style样式.html">style样式</a>
    <a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a>

    <div>
        <a href="">图片</a>&emsp;&emsp;
        <a href="">新闻</a>&emsp;&emsp;
        <a href="">音乐</a>&emsp;&emsp;
        <a href="">知道</a>
    </div>

    <ul>
        <li><a href="" style="color: black; text-decoration: none; ">图片</a></li>
        <li><a href="">新闻</a></li>
        <li><a href="">音乐</a></li>
        <li><a href="">知道</a></li>
    </ul>

• 超级链接锚点——目标位置要有id（id必须以字母开头）
  href的值要以#开头 并于内容和id的值一致
  当href的值为#时 代表回到最顶层
  所有的毛带都不需要刷新页面

<a href="#p28" style="text-decoration: none;">滚动到p28</a>
    <a href="#p48" style="text-decoration: none;">滚动到p48</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <p>p6</p>
    <p>p7</p>
    <p>p8</p>
    <p>p9</p>
    <p>p10</p>
    <p>p11</p>
    <p>p12</p>
    <p>p13</p>
    <p>p14</p>
    <p>p15</p>
    <p>p16</p>
    <p>p17</p>
    <p>p18</p>
    <p>p19</p>
    <p>p20</p>
    <p>p21</p>
    <p>p22</p>
    <p>p23</p>
    <p>p24</p>
    <p>p25</p>
    <p>p26</p>
    <p>p27</p>
    <p id="p28">p28</p>
    <p>p29</p>
    <p>p30</p>
    <p>p31</p>
    <p>p32</p>
    <p>p33</p>
    <p>p34</p>
    <p>p35</p>
    <p>p36</p>
    <p>p37</p>
    <p>p38</p>
    <p>p39</p>
    <p>p40</p>
    <p>p41</p>
    <p>p42</p>
    <p>p43</p>
    <p>p44</p>
    <p>p45</p>
    <p>p46</p>
    <p>p47</p>
    <p id="p48">p48</p>
    <p>p49</p>
    <p>p50</p>
    <p>p51</p>
    <p>p52</p>
    <p>p53</p>
    <p>p54</p>
    <p>p55</p>
    <p>p56</p>
    <p>p57</p>
    <p>p58</p>
    <p>p59</p>
    <p>p60</p>
    <p>p61</p>
    <p>p62</p>
    <p>p63</p>
    <p>p64</p>
    <p>p65</p>
    <p>p66</p>

    <a href="#" style="text-decoration: none;">回到顶点</a>

• 图片标签

1. img 行内元素 没有闭合标签
2. src 图片地址
   网络地址（并不是所有的网络图片都可以直接使用，比如有些网络使用了反爬技术）
   本地地址
3. width——属性width不需要带单位 style里面的width需要
4. alt——图片加载失败显示文本信息

<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/3635d7c5fc2eea3cfb54ed52b677865c.jpeg?x-bce-process=image/crop,x_0,y_0,w_2306,h_1256" width="300">
    <img src="./img/1.jpeg" width="300">
    <img src="./img/2.jpeg" alt="图片加载失败">
    <hr>
    <div style="display:inline-block; text-align: center;">
        <a href="https://www.tmall.com/" target="_blank">
            <img src="./img/1.jpg" width="100">
            <p>天猫</p>
        </a>
    </div>
    <div style="display:inline-block; text-align: center;">
        <a href="https://www.jd.com/" target="_blank">
            <img src="./img/2.jpg" width="100">
            <p>京东</p>
        </a>
    </div>
    <div style="display:inline-block; text-align: center;">
        <a href="https://www.amazon.cn/" target="_blank">
            <img src="./img/3.jpg" width="100">
            <p>亚马逊</p>
        </a>
    </div>

（运行结果自行研究）

audio/video

• audio（video）

1. src 音频（视频）地址 可以使用网络地址也可以使用本地文件
2. controls 显示音频（视频）组件 在不同浏览器下外观不一致（一般都需要重写播放器外观）
3. autoplay 自动播放属性 在谷歌浏览器由于安全策略禁止使用
4. 一般 声音 audio 支持mp3 0gg（体积特别小）等常见格式
5. 一般 视频 video 支持mp4 0gv（体积特别小）等常见格式

<audio src="./audio/听.mp3" controls></audio>
    <audio src="https://audio04.dmhmusic.com/71_53_T10055694882_128_4_1_0_sdk-cpm/cn/0412/M00/82/35/ChAKEV_tN8CAMUMXAD7QLIo7sJ8299.mp3?xcode=a313b127ceb43f24a7033a4a7de2b96e08259c5" controls></audio>

    <hr>

    <video src="./video/强森.mp4" controls width="600"></video>
    <video src="./video/生活.mp4" controls width="600"></video>

（运行结果自行研究）