HTML常用标签

HTML常用标签

一、a标签的用法

属性：

• href：取值：
  网址：
  http://google.com
  https://google.com
  //google.com
  路径：
  /a/b/c以及a/b/c
  index.html以及./index.html
  伪协议：
  javascript:代码（alert(1)）；
  mailto:邮箱
  tel:手机号
  常见情况：
  如果写成javascript:；什么都不做
  如果什么都不写，网页会自动刷新
  如果写#，会回到顶部
  如果写#xxx，xxx是上面标签的id，可以跳转到指定的标签
  如果写mailto:邮箱，会给对方发邮件
  如果写tel:手机号，会自动给我打电话，要按绿色的打电话键

• target: 取值：
  _blank：在新页面打开
  _top:可以在当前页面引入其他的页面，比如当前是页面1，被引入的页面是2，页面2有一个a标签，它的target = _top,点击后会在1页面直接打开a标签，不会打开新页面，如果target = _self,会在1页面引入的页面2区域内直接打开a标签。1页面中要写<iframe src="2.html>
  _parent:在父窗口中打开
  _self:在当前页面打开，是默认值
  target:如果有一个窗口叫做xxx，则在这个xxx窗口中打开这个网页，如果没有，则会创建一个xxx窗口打开网页

可以在一个页面中既可以用谷歌搜索，也可以用百度搜索，可以想写成（图9-1）

• download
  理论上可以下载这个网页，但是好多浏览器不支持，不靠谱
  rel=noopener:现在不需要了解

二、table标签的用法

<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中没有tbody这个标签，写在里面的内容会被自动包裹在tbody中，浏览器给自动补全。

• table标签相关的样式：
  table-layout: 可选值：
  auto：自动计算行和列的值，被内容撑开
  fixed: 尽量平均大小
  border-collapse: 可选值：
  collapse(单元格合并）
  border-spacing: 单元格之间的间隙，值为数字

三、img标签的用法

• 作用：
  发出get请求，显示一张图片
• 属性：
  alt：图片加载不到时显示的文字
  width
  height
  只写宽度或只写高度另外一个会自适应
  src:地址
• 事件：
  onload: 图片加载成功
  onerror: 图片加载失败

<img src="./20210405165505.png" alt="" id="xxx" />
    <script>
      xxx.onload = function () {
        alert("图片加载成功");
xxx.src = "挽救的图片";
      };
      xxx.onerror = function () {
        alert("图片加载失败");
      };
    </script>

img标签必须写在上面，负责无法出现弹窗

想让图片自适应浏览器宽度（响应式），可以加上如下代码：

 *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img{
        max-width: 100%;
      }

四、其他感想

学习标签时一定要注意它与众不同的地方，不学一般学特殊，是学习标签最好的方式，有很多标签是非常相似的，找到它们之间的区别就不难记忆了。

希望大家都能够学习顺利哦。❥(^_-)