<!-- 跳转到外部网站（在新标签页打开） -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">访问Example官网</a>

<!-- 跳转到网站内的另一个页面 -->
<a href="/about.html">关于我们</a>

<!-- 跳转到同页面的特定位置（锚点） -->
<a href="#chapter-2">跳转到第二章</a>
<h2 id="chapter-2">第二章内容</h2>

<!-- 功能性链接：发送邮件 -->
<a href="mailto:someone@example.com">发送邮件</a>

<!-- 功能性链接：下载文件 -->
<a href="/downloads/file.pdf" download>下载PDF手册</a>

链接的高级属性与样式

1. `target`属性：控制如何打开链接。`_blank`（新窗口）、`_self`（当前窗口，默认）。使用`_blank`时，建议配合`rel="noopener noreferrer"`以提升安全性和性能。

2. `rel`属性：定义当前文档与目标文档的关系。`nofollow`（告知搜索引擎不要追踪）、`noopener`（防止新页面通过`window.opener`访问原页面，提升安全）。

3. CSS样式：链接有四个主要状态（伪类），可分别定义样式，提升用户体验。

/* 链接默认状态 */
a { color: #0066cc; text-decoration: none; }
/* 鼠标悬停状态 */
a:hover { color: #ff6600; text-decoration: underline; }
/* 被访问过的链接 */
a:visited { color: #663399; }
/* 获得焦点时（键盘导航） */
a:focus { outline: 2px solid #0066cc; }

调试与测试

在浏览器中右键点击链接，选择“检查”打开开发者工具。在“元素”面板中，你可以：
- 确认`href`属性值是否正确。
- 在“控制台”输入`console.log(document.querySelector('a').href)`验证链接地址。
- 在“样式”面板中调试链接各个状态（`:hover`， `:focus`）的CSS效果，确保视觉反馈清晰。

常见问题排查

如果链接工作不正常，可按照以下步骤排查：
1. 链接点击无效或404：首先检查`href`属性的路径或URL是否正确。如果是相对路径，请确认其相对于当前HTML文件的位置是否正确。使用浏览器开发者工具“网络”标签页，查看点击链接时发出的请求是否成功。
2. 链接样式不符合预期：检查CSS选择器优先级，确保链接状态的样式（如`:hover`）未被其他更高优先级的规则覆盖。确认伪类书写顺序建议为：`:link` -> `:visited` -> `:hover` -> `:active`。
3. 可访问性或安全问题：确保所有功能性链接（尤其是图片链接）都有描述性的文本内容（锚文本）或`aria-label`属性。检查使用`target=“_blank“`的链接是否都添加了`rel=”noopener“`属性，以防止潜在的安全风险。

相关下载与资源