编辑“︁HTML链接基础”︁（章节）

= HTML链接基础 =

'''HTML链接'''（或称'''超链接'''）是网页间或网页内导航的核心元素，通过 <code><nowiki><a></nowiki></code> 标签实现。它允许用户点击文本或图像跳转到其他资源（如网页、文件、电子邮件地址等）。本教程将详细介绍HTML链接的语法、属性及实际应用。

== 基本语法 ==
HTML链接的基本结构如下：
<syntaxhighlight lang="html">
<a href="目标URL">显示文本</a>
</syntaxhighlight>
* '''<code>href</code>'''：指定链接目标的URL（必需属性）。
* 显示文本：用户可见的可点击内容。

=== 示例 ===
<syntaxhighlight lang="html">
<a href="https://www.example.com">访问示例网站</a>
</syntaxhighlight>
'''输出效果'''：<a href="https://www.example.com">访问示例网站</a>（点击跳转至example.com）

== 链接类型 ==

=== 1. 绝对路径与相对路径 ===
{| class="wikitable"
|+ 路径类型对比
! 类型 !! 示例 !! 说明
|-
| 绝对路径 || <code>href="https://example.com/page.html"</code> || 包含完整URL
|-
| 相对路径 || <code>href="page.html"</code> || 相对于当前页面的路径
|}

=== 2. 内部锚点链接 ===
跳转到同一页面的指定位置：
<syntaxhighlight lang="html">
<!-- 定义锚点 -->
<h2 id="section1">第一节</h2>

<!-- 创建链接 -->
<a href="#section1">跳转到第一节</a>
</syntaxhighlight>

=== 3. 特殊链接 ===
* '''邮件链接'''：<code><nowiki><a href="mailto:user@example.com">发送邮件</a></nowiki></code>
* '''电话链接'''：<code><nowiki><a href="tel:+123456789">拨打电话</a></nowiki></code>

== 关键属性 ==
{| class="wikitable"
|+ 常用链接属性
! 属性 !! 作用 !! 示例
|-
| <code>target</code> || 控制打开方式 || <code>target="_blank"</code>（新标签页）
|-
| <code>rel</code> || 定义关系 || <code>rel="nofollow"</code>（禁止搜索引擎追踪）
|-
| <code>download</code> || 强制下载 || <code>download="filename"</code>
|}

== 可视化示例 ==
<mermaid>
graph LR
    A[首页] -->|绝对路径| B(外部网站)
    A -->|相对路径| C[关于页面]
    C -->|锚点链接| D[#contact]
</mermaid>

== 高级应用 ==
=== 结合CSS样式 ===
通过CSS伪类控制链接状态：
<syntaxhighlight lang="css">
a:link { color: blue; }    /* 未访问 */
a:visited { color: purple; } /* 已访问 */
a:hover { text-decoration: underline; } /* 悬停 */
</syntaxhighlight>

=== 动态生成链接 ===
JavaScript动态创建链接示例：
<syntaxhighlight lang="javascript">
let link = document.createElement('a');
link.href = 'https://example.com';
link.textContent = '动态链接';
document.body.appendChild(link);
</syntaxhighlight>

== 实际案例 ==
'''场景'''：电商网站的商品分类导航
<syntaxhighlight lang="html">
<nav>
  <a href="/electronics">电子产品</a> |
  <a href="/clothing" target="_blank">服装</a> |
  <a href="#deals" rel="nofollow">今日特惠</a>
</nav>
</syntaxhighlight>

== 最佳实践 ==
* 始终为链接提供有意义的文本（避免"点击这里"）
* 外部链接建议添加 <code>target="_blank" rel="noopener noreferrer"</code>
* 使用相对路径简化站内链接维护
* 通过W3C验证器检查链接有效性

== 数学表示（可选） ==
链接可用性公式：
<math>
Availability = \frac{\text{Working Links}}{\text{Total Links}} \times 100\%
</math>

== 参见 ==
* [[HTML属性详解]]
* [[网页导航设计原则]]
* [[URL结构解析]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML链接与导航]]