初面网

Appearance

链接 ​

让网页跳转到其他网页或资源（图片、视频、文档等）。

格式 ​

html
<a href="https://www.example.com" target="_blank">这是一个链接</a>

属性说明 ​

  • href：全称是Hypertext Reference，指定链接的目标 URL
  • target：指定链接在何处打开。常用值包括 _blank（在新标签页打开）、_self（在当前标签页打开）、_parent（在父框架打开）、_top（在顶部框架打开）等
  • rel：指定链接与当前文档之间的关系。常用值包括 _stylesheet（样式表）、_author（作者）、_license（许可证）等
  • download：指定链接的目标资源是否应该下载到本地。如果设置了该属性，浏览器会提示用户下载资源，而不是直接打开它
  • hreflang：指定链接的目标资源的语言。常用值包括 en（英语）、zh（中文）等
  • type：指定链接的目标资源的 MIME 类型。如果不指定，浏览器会根据资源的扩展名来推断 MIME 类型

rel还有noopener noreferrer nofollow 等值，用于增强安全性

  • noopener：在新标签页打开链接时，不允许新标签页访问当前页面的 window 对象。这可以防止恶意脚本在新标签页中执行，从而增强安全性

  • noreferrer：在新标签页打开链接时，不发送当前页面的 referrer 信息。这可以防止用户的隐私泄露

  • nofollow：告诉搜索引擎不要将当前页面的链接作为目标页面的引用。这可以防止搜索引擎将当前页面的链接作为目标页面的引用，从而避免被用于垃圾信息或恶意链接

页内链接（锚点链接） ​

快速跳转到页面内的某个位置，通常用于导航或跳转到页面的某个部分

html
<!-- 目标位置 -->
<h2 id="section1">第一部分</h2>
<!-- 其他内容 -->
<!-- 跳转链接 -->
<a href="#section1">跳转到第一部分</a>

空链接 ​

有时候我们需要在页面上创建一个空链接，即点击后没有任何作用。可以使用 href="#" 来实现。

html
<a href="#">这是一个空链接</a>
<a href="javascript:void(0);">这是一个空链接，配合js使用</a>
<a href="">这是一个空链接，刷新当前页面</a>
<a href="about:blank">这是一个空链接，打开一个新的空白页面</a>
<a role="button" href="#">这是一个空链接。表现为按钮，配合js使用</a>

图片链接 ​

可以使用 img 标签来创建一个图片链接，点击后会跳转到指定的 URL。

html
<a href="https://www.example.com">
  <img src="https://www.example.com/image.jpg" alt="这是一个图片">
</a>

邮箱链接 ​

可以使用 mailto: 协议来创建一个邮箱链接，点击后会打开默认的邮件客户端，并预填写收件人邮箱地址。

html
<a href="mailto:zhangsan@example.com">联系张三</a>