HTML常用标签1. a 标签的用法 2. img 标签的用法在 CSS 中，可替换元素（replaced eleme

1. a 标签的用法

1.1 属性

href
target
download
rel-noopener

1.2 作用

跳转外部网页

 <a href="https://google.com" target="_blank" download>超链接</a>

跳转内部锚点

 <a href="#xxx">查看xxx</a>

跳转到邮箱或电话

 <a href="mailto:19388****@qq.com">发邮件给Steven</a>
 <a href="tell:1805244****">打电话给Steven</a>

1.3 href的取值

网址

*  http：//google.com
*  https：//google.com
*  //google.com

路径

 <a href="a/b/c.html">我是c.html</a>
 <a href="./index.html"></a>

* a/b/c及a/b/c
* index.html及./index.html

伪协议

 <a href="javascript:alert(1);">JavaScript伪协议</a>
 <a href="javascript:;">JavaScript空协议</a>
 <a href="javascript:;">查看</a>

* javascript:代码;
* mailto:邮箱
* tel:手机号

* href=#xxx

1.4 target取值

内置名字

* _blank     在空白窗口打开页面
* _top       在顶级窗口打开页面 
* _parent    在当前链接所在iframe的上一层打开页面
* _self      在当前页面打开页面（默认值）

程序员命名

* window的name
* iframe的name

1.5 download

作用：下载页面
问题：不是所有的浏览器都支持，尤其是手机浏览器可能不支持

2. img 标签的用法

2.1 作用

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

get请求可以在浏览器-开发者工具-network中查看

2.2 属性

alt图片加载失败时提示用户，如404
height/width只规定height/width其一时，width/height相应按比例缩放
scr图片路径

2.3 事件

onload监听图片是否加载成功，表示成功
onerror监听图片是否加载成功，表示失败

2.4 响应式

max-widths:100%使图片自适应设备尺寸

2.5 可替换元素

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。

<img>是典型的可替换元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <img id="xxx" src="dog.jpg" alt="一直狗子" />
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
        xxx.src = "/404.jpg";
      };
    </script>
  </body>
</html>

3. table 标签的用法

3.1 相关的标签

table 表
thead 表头
tbody 表的主体
tfoot 表的底部
tr table row，表的一列
td table data，表的数据内容
th 表头数据

    <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小敏</th>
          <th>小强</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>60</td>
          <td>90</td>
          <td>80</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>60</td>
          <td>70</td>
          <td>80</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>90</td>
          <td>50</td>
          <td>70</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>210</td>
          <td>210</td>
          <td>230</td>
        </tr>
      </tfoot>
    </table>

3.2 相关的样式

table-layout 取值为auto时，根据内容调整列宽；取值为fixed时，各列等宽
boder-collapse取值为collapse时，合并border
boder-spacing取值决定border间距

 <style>
      table {
        width: 600px;
        table-layout: fixed;
        border-spacing: 0;
        border-collapse: collapse;
      }
      td,
      th {
        border: 1px solid blue;
      }
    </style>

4. 其他感想

不要通过双击文件打开网页，要用hs . -c-1指令并完善网址路径的方式打开
以上列举的只是部分常用标签，还有form标签、input标签等。通过学习，发现html标签种类较多，“用以致学”是一种高效的学习方法，多敲代码多练习，比单纯的看书上课记忆的要快，同上能及时发现并纠正问题。