HTML：链接（Links）的几个基本用法

水星の圈圈

已于 2024-09-10 22:12:26 修改

阅读量169

点赞数 7

分类专栏：前端学习文章标签： html 前端

于 2024-09-10 21:47:37 首次发布

本文链接：https://blog.csdn.net/Noctiflorous_s/article/details/142109919

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML：链接（Links）的几个基本用法

使用<a>标签

普通链接：<a href="">链接文本</a>
图像链接： <a href=""><img src="" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

举几个实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    用法1：普通链接：<a
      href="https://blog.csdn.net/Noctiflorous_s?spm=1000.2115.3001.5343"
      >水星の圈圈的个人主页</a
    >
    <br />
    用法2： 图像链接：<a
      href="https://blog.csdn.net/Noctiflorous_s?spm=1000.2115.3001.5343"
      ><img
        src="https://profile-avatar.csdnimg.cn/8cbda03e97714dfeb06f03bf27daad02_noctiflorous_s.jpg!1"
        alt="水星の圈圈的头像正在加载中"
    /></a>
    <br />
    用法3：邮件链接：<a href="mailto:webmaster@example.com">发送e-mail</a>
    <br />
    用法4：书签：点击图片下方的“跳转到提示部分”跳转到"这是一个书签"
    <br />
    <a id="tips">
      <em>这是一个书签</em>
    </a>
    <br />
    <!-- 此处为随机图像，为了占位体现跳转效果 -->
    <img src="https://picsum.photos/1024/1024" alt="图片加载中" />
    <br />
    <a href="#tips">跳到提示部分</a>
  </body>
</html>