HTML 链接是指用来在网页之间创建连接的 HTML 元素，通常使用<a>标签来定义。

链接允许用户点击后跳转到网页、文件或页面的特定部分，是构建网页结构和提升用户体验的重要部分。

HTML 链接的语法

HTML 链接的基本语法如下：

<a href="http://www.bdu.com" target="_blank">访问示例网站</a>

预览效果如下：

超链接由 3 个主要部分构成：

元素内容：用户可点击的元素内容，通常是文本或图像。比如，示例中的“访问示例网站”。

target 属性：（可选）指定链接在何处打开的属性，可以控制链接在何处打开。

href 属性：指定链接目标的 URL 地址，可以是相对路径或绝对路径。它整体可以常见的链接类型有 6 种：

网页链接，锚点链接，邮件链接，电话链接，文件链接，JS 链接等。由于内容较多，今天先主要聊聊 href 中的网页链接。

href 属性之网页链接

在 HTML 中，网页链接的 href 属性的网页路径类型分为 2 类，相对路径和决定路径。可以使用相对路径或绝对路径指定目标地址。那什么是相对路径和绝对路径呢？

1、相对路径

相对路径是相对于当前文件所在位置的路径。

当前文件的位置作为参考点，可以使用相对路径指向同一目录下的文件、上一级目录下的文件或其他子目录中的文件。示例：

href="page.html"：链接到同一目录下的 page.html 文件。

href="../other_folder/page.html"：链接到当前目录的上一级目录下的 other_folder 中的 page.html 文件。

href="subfolder/page.html"：链接到当前目录下的 subfolder 子目录中的 page.html 文件。

如下图，如果以 HTML 链接.html 为目标文件，那么结构关系如图。

另外，你在敲代码的时候，也会有路径提示的，尝试跟着指示，去写一下就明白了。

代码示范：

<a href="test/圣诞树01.html">访问圣诞树01界面</a>

2、绝对路径

绝对路径包含完整的 URL 地址信息，通常以协议（如 http:// 或 https://）开头。可以直接指定链接到的目标网页或文件的任意完整路径。示例：

href="https://www.bd.com/xx.html"：链接到指定网站的 xx.html 文件。

href="https://www.bd.com/images/image.jpg"：链接到指定网站的 images 目录下的 image.jpg 图片文件。

示范代码：

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

总结：相对路径，绝对路径的写法，不只是适用于 a 标签，后续带有本地路径的标签几乎也是这样的写法，比如 script ， css ，img，视频等。

注意事项

在使用相对路径时，需要注意参考点的位置，确保路径指向的文件或目录存在且正确。

在使用绝对路径时，需要确保指定的 URL 地址可用且正确。

怎么直观判断呢？如果点击链接，地址栏没反应到你在 href 中写的地址，那就是有问题。

访问链接时候的 3 种形态

好了，当设置完链接以后，预览一下。当我们鼠标放上去，默认有一个手型的样子。除此之外，它的外观形态分为 3 种：

未点击链接：我们看到这个字是蓝色的。

点击链接时: 会变成红色。

点击以后的链接：当你点击链接回来以后，变成了紫色。

比如，我们打开百度搜索，就随意搜素一个关键词“周杰伦最新消息”的第一条信息，不是这条长沙的也行哈，毕竟每天可能都有更新。

鼠标放上去的时候有下划线，点击链接以后再点开原来的页面，我们发现，这个链接已经变成紫色了。

这用的正是 href 跳转来实现的。

为什么说这就是 href 实现呢？我们可以通过浏览器右键检查该元素，来看它的元素构成。这就是 href，对吧。

当然，这些样式不是一成不变的。后面我们学习了 css 是可以修改成任意颜色的。

好了，下一篇文，继续聊 href 的其他用法。