在 HTML 中，链接（Link） 是网页最核心的功能之一。

因为网页之所以叫 “Web（网络）”，就是通过链接把一个页面连接到另一个页面。

一、什么是超链接？

超链接可以实现：

  • 页面跳转
  • 打开外部网站
  • 下载文件
  • 跳转到页面内部位置
  • 点击发邮件或拨号

HTML 中使用 <a> 标签创建链接。

二、超链接基本语法

<a href="目标地址">链接文字</a>
属性 含义
<a> anchor（锚点标签）
href 链接跳转的目标地址

示例：跳转到百度

<a href="https://www.baidu.com">点击进入百度</a>

三、超链接常见类型

3.1 外部链接

跳转到其他网站

<a href="https://www.google.com">Google</a>

特点：

  • href 写完整网址（http/https）

示例：

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为4-1.HTML链接标签-超链接-外部链接.html

<!DOCTYPE html>
<html>
    <!-- 超链接:用于在网页中创建可以点击的连接,使用户可以跳转到其他的页面或者下载文档等 -->
    <!-- a -->
    <!-- 外部链接 -->
    <!-- target=_blank 打开一个新的标签页 -->
    <!-- target=_self 在当前标签页打开网址 -->
    <a href="https://www.baidu.com" target="_blank">跳转到百度</a>
</html>

2、双击【4-1.HTML链接标签-超链接-外部链接.html】

image-20250518205406669

3.2 内部链接

跳转到自己网站页面，一般写的都是相对路径

<a href="about.html">关于我们</a>

说明：

  • about.html 是同目录下的页面

示例：

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为4-2.HTML链接标签-超链接-内部链接.html

<!DOCTYPE html>
<html>
    <!-- 超链接:用于在网页中创建可以点击的连接,使用户可以跳转到其他的页面或者下载文档等 -->
    <!-- a -->
    <!-- 外部链接 -->
    <!-- target=_blank 打开一个新的标签页 -->
    <!-- target=_self 在当前标签页打开网址 -->
    <!-- 内部链接一般写的都是相对路径 -->

    <a href="./3-1.HTML列表标签-有序列表.html" target="_blank">打开有序列表</a>
</html>

2、双击【4-2.HTML链接标签-超链接-内部链接.html】

image-20250518205939164

3.3 锚点链接

跳转到页面内部，锚点用于跳转到页面的某个位置，比如目录导航。

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为4-3.HTML链接标签-超链接-锚点链接.html

<!DOCTYPE html>
<html>
    <!--  h标签:定义网页中的标题,h1-h6 -->
    <!--  定义一个1级标题 -->
    <!-- 跳转链接 -->
    <a href="#04">跳转到第四部分</a>
    <h1>一、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>1.1 标签的使用</h2>
    <h3>1.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>1.1.2 表格标签的使用</h3>
    <h2>1.2 设置网页的样式</h2>

    <h1>二、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>2.1 标签的使用</h2>
    <h3>2.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>2.1.2 表格标签的使用</h3>
    <h2>2.2 设置网页的样式</h2>

    <h1>三、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>3.1 标签的使用</h2>
    <h3>3.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>3.1.2 表格标签的使用</h3>
    <h2>3.2 设置网页的样式</h2>
    <!-- 定义锚点 -->
    <h1 id="04">四、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>4.1 标签的使用</h2>
    <h3>4.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>4.1.2 表格标签的使用</h3>
    <h2>4.2 设置网页的样式</h2>

    <h1>五、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>5.1 标签的使用</h2>
    <h3>5.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>5.1.2 表格标签的使用</h3>
    <h2>5.2 设置网页的样式</h2>
</html>

    <h1>六、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>6.1 标签的使用</h2>
    <h3>6.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>6.1.2 表格标签的使用</h3>
    <h2>6.2 设置网页的样式</h2>
</html>

    <h1>七、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>7.1 标签的使用</h2>
    <h3>7.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>7.1.2 表格标签的使用</h3>
    <h2>7.2 设置网页的样式</h2>
</html>

    <h1>八、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>8.1 标签的使用</h2>
    <h3>8.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>8.1.2 表格标签的使用</h3>
    <h2>8.2 设置网页的样式</h2>
</html>

    <h1>九、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>9.1 标签的使用</h2>
    <h3>9.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>9.1.2 表格标签的使用</h3>
    <h2>9.2 设置网页的样式</h2>
</html>

    <h1>十、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>10.1 标签的使用</h2>
    <h3>10.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>10.1.2 表格标签的使用</h3>
    <h2>10.2 设置网页的样式</h2>
</html>

2、双击【4-3.HTML链接标签-超链接-锚点链接.html】，点击【跳转到第四部分】即可调整标题四的位置

image-20250518211358180

image-20250518211443684

3.4 特殊用法

超链接的特殊用法适用于点击按钮回到文档最顶部

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为4-4.HTML链接标签-超链接-特殊用法.html

    <!-- 超链接特殊用法  -->
    <a href="#">回到顶部</a>

完整代码文件

<!DOCTYPE html>
<html>
    <!--  h标签:定义网页中的标题,h1-h6 -->
    <!--  定义一个1级标题 -->
    <!-- 跳转链接 -->
    <a href="#04">跳转到第四部分</a>
    <h1>一、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>1.1 标签的使用</h2>
    <h3>1.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>1.1.2 表格标签的使用</h3>
    <h2>1.2 设置网页的样式</h2>

    <h1>二、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>2.1 标签的使用</h2>
    <h3>2.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>2.1.2 表格标签的使用</h3>
    <h2>2.2 设置网页的样式</h2>

    <h1>三、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>3.1 标签的使用</h2>
    <h3>3.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>3.1.2 表格标签的使用</h3>
    <h2>3.2 设置网页的样式</h2>
    <!-- 定义锚点 -->
    <h1 id="04">四、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>4.1 标签的使用</h2>
    <h3>4.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>4.1.2 表格标签的使用</h3>
    <h2>4.2 设置网页的样式</h2>

    <h1>五、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>5.1 标签的使用</h2>
    <h3>5.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>5.1.2 表格标签的使用</h3>
    <h2>5.2 设置网页的样式</h2>
</html>

    <h1>六、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>6.1 标签的使用</h2>
    <h3>6.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>6.1.2 表格标签的使用</h3>
    <h2>6.2 设置网页的样式</h2>
</html>

    <h1>七、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>7.1 标签的使用</h2>
    <h3>7.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>7.1.2 表格标签的使用</h3>
    <h2>7.2 设置网页的样式</h2>
</html>

    <h1>八、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>8.1 标签的使用</h2>
    <h3>8.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>8.1.2 表格标签的使用</h3>
    <h2>8.2 设置网页的样式</h2>
</html>

    <h1>九、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>9.1 标签的使用</h2>
    <h3>9.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>9.1.2 表格标签的使用</h3>
    <h2>9.2 设置网页的样式</h2>
</html>

    <h1>十、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>10.1 标签的使用</h2>
    <h3>10.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>10.1.2 表格标签的使用</h3>
    <h2>10.2 设置网页的样式</h2>
    <!-- 超链接特殊用法  -->
    <a href="#">回到顶部</a>
</html>

2、双击【4-4.HTML链接标签-超链接-特殊用法.html】，点击【回到顶部】即可回到文章开头位置

image-20250518212136468