HTML a标签

7.1 属性

- href：链接地址

- target：控制链接的打开方式。
- _self(默认)-在当前页面打开；
- _blank-新标签页打开。

7.2 <base />标签

- 作用：改变链接的默认行为
- 位置：在head标签中
- 属性：href——改变默认链接；target——改变默认目标。

7.3 可作为锚点

- 作用：跳转到本页指定id的标签位置
- 使用：
- 1）# id：a标签 href="#id"，锚点 id="";
- 2）# name：a标签 href="#name"，锚点 a标签 name="";

7.4 练习

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a{
      display: inline-block;
      text-decoration: none;
      color: #eee;
      background-color: rgb(28, 28, 30);
      text-align: center;
      height: 20px;
      line-height: 20px;
      width: 50px;
      border-radius: 10px;
    }
    a:hover{
      color: #eee;
      background-color: rgb(50, 50, 50);
    }
    .stuff{
      border: 1px solid rgb(28, 28, 30);
      /* 达不到效果可增加高度 */
      height: 1000px;
    }
  </style>
  <!-- 改变所有a标签默认行为 -->
  <base href="" target="_blank">
</head>
<body>
  <!-- 在新的标签页打开vue官网 -->
  <a href="https://cn.vuejs.org" target="_blank">Vue</a>
  <!-- 跳转到bottom锚点位置 -->
  <a id="top" href="#bottom" target="_self">底部</a>
  <!-- 填充 -->
  <div class="stuff"></div>
  <!-- 跳转到top锚点位置 -->
  <a name="bottom" href="#top">顶部</a>
</body>

7.5 效果预览

效果预览
效果预览

posted @ 2023-05-09 17:47  NZVN  阅读(39)  评论(0)  编辑  收藏  举报