HTML | DOM 锚点 href 属性

简介

HTML中的锚点是指可以在网页中跳转到指定部分的链接，比如一个长页面中的目录。而锚点链接最常见的属性就是href属性。

href是HTML中的链接属性，它指定链接目标的URL，通常用于链接文档、图片等。对于锚点来说，href属性的值以#号开头，后面接上指定元素的id值，例如：

<a href="#section1">跳转到section1</a>

<div id="section1">
  <h2>section1</h2>
  <p>这是section1的内容</p>
</div>

在点击这个链接时，浏览器就会自动滚动到id为section1的元素，并将其显示在屏幕上。

使用方法

在选择要链接的元素时，需要给它添加一个唯一的id属性，以便在href属性值中引用。例如：

<h2 id="section1">这是第一节的标题</h2>

然后在需要跳转到该元素的地方添加一个链接，例如：

<a href="#section1">跳转到第一节</a>

点击这个链接后，页面就会滚动到id为section1的元素所在位置，并将该元素显示在屏幕上。

更多用法

href属性还可以指定其他URL，比如：

• 相对路径URL：相对于当前页面的路径；
• 绝对路径URL：包含完整的协议、域名和路径；
• 图片、音视频等文件的URL；
• javascript脚本的URL。

其中，相对路径和绝对路径URL的写法跟常规使用方式相同，不再赘述。下面介绍一下几个常用的特殊写法。

javascript脚本执行

href属性还可以指定一段javascript脚本，例如：

<a href="javascript:void(0);" onclick="alert('hello world');">点击弹出提示框</a>

这会在点击链接时执行javascript脚本，但不会跳转到其他页面。

下载文件

如果需要下载文件，可以将href属性指定为文件的URL，例如：

<a href="/images/beautiful.jpg" download>下载美图</a>

这个链接点击时，浏览器将开始下载文件。

发送电子邮件

如果需要发电子邮件，可以把href属性指定为mailto链接，例如：

<a href="mailto:info@example.com">发送邮件给我们</a>

这个链接点击时，将弹出默认邮件客户端，并自动填充收件人信息。