超链接

HTML 超链接是网页的核心功能，通过 <a>（锚点）标签实现。让我们详细学习链接的各个方面。

<!-- 简洁超链接 -->
<a href="https://www.example.com">访问示例网站</a>
<!-- 完整属性超链接 -->
<a href="目标URL" target="打开方式" title="提示文本" rel="关系说明">
   链接文本
</a>

链接到不同类型的目标

<!-- 空链接 -->
<a href="#">空链接 导航到页面顶部</a>
<a href="javascript:void(0)">空链接 阻止默认行为，不刷新页面</a>
<a href="">空链接 刷新当前页面</a>
<a href="about:blank">打开空白页面 </a>
<a href="">空链接 </a>
<a role="button">空链接 链接表现为按钮，无默认行为</a>

<!-- 外部网站 -->
<a href="https://www.google.com">访问 Google</a>

<!-- 内部网站 -->
<a href="about.html">关于我们</a>
<a href="products/index.html">产品中心</a>
<a href="../contact.html">联系我们</a>

<!-- 页面内锚点跳转 -->
<!-- 定义锚点 -->
<h2 id="section1">第一章</h2>
<p>这里是第一章的内容...</p>
<h2 id="section2">第二章</h2>
<p>这里是第二章的内容...</p>
<!-- 创建跳转链接 -->
<a href="#section1">跳转到第一章</a>
<a href="#section2">跳转到第二章</a>

<!-- 其他类型链接 -->
<!-- 邮件链接 -->
<a href="mailto:contact@example.com">发送邮件</a>
<!-- 电话链接 -->
<a href="tel:+8613800138000">拨打热线</a>
<!-- 下载链接 -->
<a href="document.pdf" download>下载文档</a>
<!-- JavaScript 链接 -->
<a href="javascript:void(0)" onclick="alert('Hello!')">点击我</a>

链接的打开方式（target 属性）

<!-- 在当前窗口打开（默认） -->
<a href="page.html">当前窗口打开</a>

<!-- 在新窗口打开 -->
<a href="page.html" target="_blank">新窗口打开</a>

<!-- 在父窗口打开 -->
<a href="page.html" target="_parent">父窗口打开</a>

<!-- 在当前框架打开 -->
<a href="page.html" target="_self">当前框架打开</a>

<!-- 在顶级窗口打开 -->
<a href="page.html" target="_top">顶级窗口打开</a>

链接的关系说明（rel 属性）

<!-- 新窗口打开时建议添加 -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">
    外部网站
</a>

<!-- 其他 rel 属性 -->
<a href="privacy.html" rel="nofollow">隐私政策</a>
<a href="style.css" rel="stylesheet">样式表</a>
<a href="next-page.html" rel="next">下一页</a>
<a href="prev-page.html" rel="prev">上一页</a>

链接属性总结

属性	用途	示例
href	指定链接目标	href="page.html"
target	指定打开方式	target="_blank"
rel	定义关系	rel="noopener"
title	提示文本	title="详细说明"
download	下载文件	download="文件名"
id	锚点标识	id="section1"