《HTML常用标签》1. a 标签的用法 2. img 标签的用法 3. table 标签的用法 4.注意事项善用md

1. a 标签的用法

a标签可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

<a href="" target=""></a>

a标签常用属性

- href 此属性的属性值为目标链接
- target 跳转方式 如当前页面、新窗口等

href的取值

 - 网址
    https://google.com
    http://google.com
    //google.com 最高级 会自动选择用https还是http
- 路径
    /a/b/c和a/b/c
    index.html和./index.hmtl
- 伪协议
    javascript:代码;   这里是英文符号
    mailto:邮箱
    tel:手机号

target的取值

- _blank 新页面打开

- _self 当前页面打开（覆盖原网页 可回退）

- _top 最顶层页面打开

- _parent 当前页面所在的iframe的上一层打开

部分代码示例

<body>
 <a href="//baidu.com" target="_blank">超链接</a>
 <!-- 点击后新窗口打开百度 -->
 <a href="index.html">index.html</a>
 <!-- 这里的index.html是同级目录文件 -->
 <a href="javascript:alert(1);">javascript伪协议</a>
 <!-- 点击后页面提示1 如果:;中间不写内容那么点击后没有任何动作 -->
 <a href="mailto:xxxxxxxxxx@qq.com">发邮件给二哥</a>
 <!-- 点击后弹出提示页面 -->
 <a href="tel:15560192998">打电话给我</a>
 <!-- 点击后弹出提示页面 -->
</body>

_parent的用法稍微复杂些需要在有iframe的情况下使用

  <!-- a-target-iframe.html -->
  <body style="background-color: red">
    我是 iframe1
    <iframe
      src="a-target-iframe2.html"
      frameborder="0"
      width="900"
      height="900"
    ></iframe>
  </body>

  <!-- a-target-iframe2.html -->
  <body style="background-color: greenyellow">
    我是 iframe2
    <a href="//baidu.com" target="_parent">parent</a>
  </body>

2. img 标签的用法

img标签用来发出get请求展示一张图片

<img src="" alt="">

属性

- alt 一般用于图片加载失败显示提示文字
- height 图片高度 (一般只写宽度 宽高一起写可能会导致变形)
- width 图片宽度 （只写宽度 高度会自适应 高度同理）
- src 目标图片地址(链接 相对路径等)

事件

- onload  加载成功 打开开发者工具 Console中可以看到相关提示   
- onerror 图片加载失败 可以补救换成另一张图片

响应式

- max-width:100% 让图片适配网页、手机屏幕大小 当网页大小改变 图片也会随之改变

示例代码

  <head>
      <!-- 请注意 这里省略了原本自带的头部代码  -->
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <img id="xxx" width="300" src="img-1.jpg" alt="一只狗子" />
    <!-- img-1.jpg是同级目录中的图片文件
    如果想看到onerror的效果请把此路径改成任意错误路径 -->
    <script>
      xxx.onload = function () {
        console.log("图片加载成功");
      };
      xxx.onerror = function () {
        console.log("图片加载失败");
        xxx.src = "/404.png";
        // 404.png是同级目录中的图片文件
      };
    </script>
  </body>

3. table 标签的用法

table 元素表示表格数据

代码示例

  <head>
    <!--注意 这里省略了head的原本代码(如编码 默认最新IE浏览器等) -->
    <style>
      table {
        table-layout: auto;
        border-spacing: 20px;
        border-collapse: collapse;
      }
      td,
      th {
        border: 1px solid greenyellow;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>英语</th>
          <th>数学</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>88</td>
          <td>99</td>
        </tr>
        <tr>
          <td>95</td>
          <td>85</td>
        </tr>
      </tbody>
    </table>
  </body>

4. 其他感想

a 标签有很多用法只需要记住常用的几种即可碰上不常用的可以去mdn查阅用法

table 标签使用时一般情况下需要这两行代码

border-spacing: 0;
border-collapse: collapse

img 标签使用尽量避开width和height一起用防止图片变形

遇到不熟练的标签和属性要多查阅多写多练才能牢记于心

《HTML常用标签》