1. a 标签的用法

<a href=""></a>

属性

• href
  超链接
• target
  指定在哪个窗口打开超链接
• download
• rel=noopener
  防止一个bug，暂时未学

a的href的取值

• 网址
  <a href="https://bilibili.com"></a>
<a href="http://bilibili.com"></a>
<a href="//bilibili.com"></a> (无协议网址）
• 路径
  <a href="/a/b/c"></a>
<a href="a/b/c"></a>
<a href="index.html"></a>
<a href="./index.html"></a>
• 伪协议
  <a href="javascript:代码;"></a>
<a href="mailto:abcdef@163.com"></a>
<a href="tel:12345678901"></a>
• id
  <a href="#xxx"></a> (跳转到指定的标签）

a的target的取值

• 内置名字
  <a href="https://bilibili.com" target="_blank"></a> （在空白页面打开）
  <a href="https://bilibili.com" target="_top"></a> （在顶级页面打开）
  <a href="https://bilibili.com" target="_parent"></a> （在当前链接所在的iframe的上一层打开）
  <a href="https://bilibili.com" target="_self"></a> （在当前页面打开，为默认值)
• 程序员命名
  iframe的name:

 <a href="http://163.com" target="xxx">163</a>
 <a href="http://taobao.com" target="yyy">taobao</a>
 <hr>
 <iframe src="" name="xxx"></iframe>
 <hr>
 <iframe src="" name="yyy"></iframe>

总结：a标签的作用

• 跳转外部页面
• 跳转内部锚点
• 跳转到邮箱或电话等

2. img 标签的用法

<img src="" alt="">

作用

发出get请求，展示一张图片

属性

• src
  <img src="abc.png" alt="加载失败"> （图片的来源）
• alt
  <img src="abc.png" alt="加载失败"> （如果图片加载失败，就会展示alt的内容）
• height/width
  <img src="abc.png" alt="加载失败" height="800">
<img src="abc.png" alt="加载失败" width="800"> （只写宽度时，高度会自适应。只写宽度时，高度会自适应）

3. table 标签的用法

• 相关的标签
  table/thead/tbody/tfoot/tr/td/th
  tr指table row，表格行
  td指table data，表格数据
  th指table head，表头

• 只有一行表头的表格

<table>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>
                <td>超级</td>
            </tr>
            <tr>
                <td>target</td>
                <td>目标</td>
            </tr>
            <tr>
                <td>reference</td>
                <td>引用</td>
            </tr>  
        </tbody>
        <tfoot>
            <tr>
                <td>无</td>
                <td>无</td>
            </tr>
        </tfoot>
    </table>

• 有一行一列表头的表格

<table>
        <thead>
            <tr>
                <th></th>
                <th>小明</th>
                <th>小红</th>
                <th>小影</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>300</td>
                <td>300</td>
                <td>300</td>
            </tr>
        </tfoot>
    </table>

• 相关的样式

table {
      table-layout: fixed;
      border-collapse: collapse;
      border-spacing: 0;
    }

table {
      table-layout: auto;
      border-collapse: collapse;
      border-spacing: 0;
    }

table-layout
值
auto：根据内容去预测多宽
fixed：尽量平均
border-collapse：控制border是否合并
border-spacing：控制border之间的距离

4. 其他感想

• ！！永远不能让图片变形！！
• ！！永远不能让图片变形！！
• ！！永远不能让图片变形！！
• iframe标签为内嵌窗口，已经很少使用，还有些老系统再用