HTML 链接

HTML 链接（Anchor）是网页之间跳转的核心部分，它用于在不同网页之间导航，或者连接到其他资源，如文档、图像、音频文件等。HTML 使用 <a> 标签创建链接，使用户能够点击文本或图像跳转到目标位置。

基本语法

<a href="URL">链接文本</a>

  • <a> 标签：用于定义超链接。

  • href 属性：指定链接目标 URL。

示例

<p><a href="/index.html">本网站内的链接</a></p> <p><a href="https://www.microsoft.com/">外部网站链接</a></p>

HTML 超链接特点

超链接可以是文本、词组、图片等元素，鼠标悬停在链接上时，指针会变成小手形状。

默认链接样式

  • 未访问的链接：蓝色 + 下划线

  • 已访问的链接：紫色 + 下划线

  • 点击时的链接：红色 + 下划线

注意：可以使用 CSS 自定义链接样式。

HTML 链接属性

1.  指定链接目标

<a href="https://www.example.com">访问 Example</a>

2.  定义打开方式

属性值说明
_blank在新窗口或新标签页中打开链接
_self在当前窗口或标签页中打开（默认）
_parent在父框架中打开链接
_top在整个窗口中打开链接

示例

<a href="https://www.example.com" target="_blank" rel="noopener">新窗口打开</a>

3.  定义链接与目标页面的关系

属性值说明
nofollow告诉搜索引擎不跟踪该链接
noopener防止新窗口访问 window.opener
noreferrer不发送 Referer 头
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">安全链接</a>

4. 提示下载文件

<a href="file.pdf" download="example.pdf">下载文件</a>

5.  鼠标悬停提示

<a href="https://www.example.com" title="访问 Example">访问 Example</a>

6.  页面内跳转（锚点）

<a href="#section1">跳转到第1部分</a> <div id="section1">这是第1部分</div>

7.  目标页面的语言

<a href="https://www.example.com/es" hreflang="es">访问西班牙语网站</a>

8.  指定资源的 MIME 类型

<a href="style.css" type="text/css">样式表</a>

9.  指定 CSS 类

<a href="https://www.example.com">外部链接</a>

10.  直接定义 CSS 样式

<a href="https://www.example.com" style="color: red;">红色链接</a>

特殊类型的链接

1. 文本链接

<a href="https://www.example.com">访问示例网站</a>

2. 图像链接

<a href="https://www.example.com">   <img src="example.jpg" alt="示例图片"> </a>

3. 下载链接

<a href="document.pdf" download>下载文档</a>

4. 空链接

方法作用是否跳转适用场景
href="#"导航到页面顶部是占位符
href="javascript:void(0)"阻止默认行为否配合 JS
href=""刷新当前页面是需要页面刷新
href="about:blank"打开空白页面是新窗口空白页
role="button"表现为按钮否JS 按钮

5. HTML 书签（页面内跳转）

<a id="tips">有用的提示部分</a> <a href="#tips">跳转到提示部分</a>

6. 其他页面书签

<a href="https://www.example.com/page.html#tips">跳转到提示部分</a>

注意事项

  1. 添加 `` 到子文件夹：避免服务器额外的 HTTP 请求。例如：

    href="https://www.example.com/html/"


  2. 使用 CSS 自定义链接样式，提升用户体验。

  3. 确保`` 在 target="_blank" 时，防止安全漏洞。

  4. 避免使用 ``，更推荐使用 event.preventDefault();。

总结 HTML 超链接是网页交互的重要组成部分，通过 <a> 标签及其属性，可以实现不同类型的导航、下载、页面跳转等功能。合理使用链接属性能够提升用户体验，并提高网页的可访问性和 SEO 表现。