Skip to main content

HTML 锚点元素 a

HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。

Docs

The Anchor element - HTML

anchor 锚元素​

  • 在网页中我们经常需要跳转到另外一个链接，这个时候我们使用 a 元素；

  • HTML <a> 元素（或称锚（anchor）元素）：

    • 定义超链接，用于打开新的 URL；

  • a 元素有两个常见的属性：

    • href：Hypertext Reference 的简称

      • 指定要打开的 URL 地址；
      • 也可以是一个本地地址；

    • target：该属性指定在何处显示链接的资源。

      • _self：默认值，在当前窗口打开 URL；
      • _blank：在一个新的窗口中打开 URL；
      • 其他不常用，后面 iframe 可以讲一下；

锚点链接​

  • 锚点链接可以实现：跳转到网页中的具体位置。

  • 锚点链接有两个重要步骤：

    • 在要跳到的元素上定义一个 id 属性；
    • 定义 a 元素，并且 a 元素的 href 指向对应的 id；
<!-- 定义一个 id 属性 -->
<p id="one">paragraph one</p>
<p id="two">paragraph two</p>
<p id="three">paragraph three</p>

<!-- 定义 a 元素，并且 a 元素的 href 指向对应的 id -->
<a href="#one">段落一</a>
<a href="#two">段落二</a>
<a href="#three">段落三</a>

图片链接​

  • 在很多网站我们会发现图片也是可以点击进行跳转的

    • img 元素跟 a 元素一起使用，可以实现图片链接；

  • 实现思路：

    • a 元素中不存放文字，而是存放一个 img 元素；
    • 也就是 img 元素是 a 元素的内容；
<a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">
  <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="Baidu" />
</a>
http://localhost:3000
Baidu

其他 URL 地址​

  • a 元素一定是用来跳转到新网页的么？

    • 下载文件：https://github.com/coderwhy/HYMiniMall/archive/master.zip
    • 发邮件：mailto:12345@qq.com
<a
  href="http://github.com/coderwhy/HYMiniMall/archive/master.zip"
  target="_blank" rel="noopener noreferrer">
  下载 HYMiniMall 项目源码
</a>
<br />
<a href="mailto:12345@qq.com">给 12345@qq.com 发邮件</a>
http://localhost:3000
下载 HYMiniMall 项目源码
给 12345@qq.com 发邮件