HTML 链接_前端教程

在互联网的世界里，网站之间的连接就如同城市的道路网络一样重要。HTML（超文本标记语言）链接是实现这一连接的基石。本文将带你了解HTML链接的基础知识，包括其定义、语法、属性以及如何使用不同类型的URL等。

HTML链接是什么？

HTML链接是一种允许用户通过点击或触摸来访问其他网页或资源的方式。这些链接可以指向同一网站内的其他页面，也可以指向外部网站。链接不仅限于文本，还可以是图像或其他HTML元素。

HTML链接语法

创建一个基本的HTML链接非常简单，使用<a>标签即可。这个标签的href属性指定了链接的目标地址。例如：

<a href="https://www.example.com">访问示例网站</a>
<a href="https://www.zhaozhao123.cn/html/481.html">HTML 颜色</a>

上述代码会创建一个指向“https://www.example.com”的链接，显示的文字为“访问示例网站”。

HTML链接的 `target` 属性

target属性可以指定链接打开的方式。最常用的值有：

_self：默认值，在当前窗口或标签页中打开链接。
_blank：在新窗口或新标签页中打开链接，也就是说，点击该链接会在浏览器上打开一个新窗口，这个新窗口则显示了该链接目标页面。
_parent：在父框架集中打开链接（用于框架布局）。
_top：在整个窗口中打开链接，忽略任何框架。

例如，要让链接在新标签页中打开，可以这样写：

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

绝对URL与相对URL

绝对URL：包含了完整的协议、域名和路径信息，如https://www.example.com/page.html。
相对URL：相对于当前页面的位置，例如如果当前页面位于example.com/dir1/下，则链接page.html会被解析为example.com/dir1/page.html。

HTML链接颜色

默认情况下，未访问过的链接显示为蓝色，已访问过的链接显示为紫色。你可以使用CSS来自定义链接的颜色：

a:link { color: red; }       /* 未访问的链接 */
a:visited { color: green; }  /* 已访问的链接 */
a:hover { color: blue; }     /* 鼠标悬停时 */
a:active { color: yellow; }  /* 激活状态（点击时） */

这段CSS代码使用了伪类选择器（pseudo-class selectors）。伪类选择器允许你根据元素的状态来应用不同的样式。在HTML链接的上下文中，这些伪类选择器特别有用，因为它们可以用来改变链接在不同交互状态下的外观。下面是对每个选择器的解释：

a:link - 这个选择器应用于所有未被访问过的链接。它不会影响已经访问过的链接或者处于其他状态的链接。例如，你可以使用它来设置所有未访问链接的颜色为红色：

   a:link { color: red; }

a:visited - 当链接已经被用户访问过时，这个选择器就会生效。它通常用于改变已访问链接的颜色。需要注意的是，出于隐私保护的原因，现代浏览器限制了对:visited链接样式的控制，比如不能改变已访问链接的字体粗细、大小等非颜色属性：

   a:visited { color: green; }

a:hover - 当用户的鼠标悬停在一个链接上时，:hover伪类选择器就会起作用。它可以用来改变链接在鼠标悬停时的颜色、背景色等。这有助于提高网站的交互性和用户体验：

   a:hover { color: blue; }

a:active - 当链接被激活（即当用户点击链接时），:active伪类选择器会生效。它可以用来改变链接在激活瞬间的样式，比如颜色变化，给用户一个视觉反馈：

   a:active { color: yellow; }

这些伪类选择器可以单独使用，也可以组合在一起使用，但是为了确保样式按照预期顺序应用，建议遵循以下顺序定义它们：:link -> :visited -> :hover -> :active。这是因为浏览器按照从左到右的顺序解析样式表，并且后面的规则可以覆盖前面的规则。这种顺序也被称为“LVHA”顺序，有助于避免样式冲突。

链接样式

有时候，我们希望链接看起来像按钮。这可以通过CSS轻松实现：

<a href="#" class="button">点击我</a>

配合以下CSS代码：

.button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

bootstrap链接样式：

代码：

copy

<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
<br>
<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>
<br>
<p><a href="#" class="link-underline-primary">Primary underline</a></p>
<p><a href="#" class="link-underline-secondary">Secondary underline</a></p>
<p><a href="#" class="link-underline-success">Success underline</a></p>
<p><a href="#" class="link-underline-danger">Danger underline</a></p>
<p><a href="#" class="link-underline-warning">Warning underline</a></p>
<p><a href="#" class="link-underline-info">Info underline</a></p>
<p><a href="#" class="link-underline-light">Light underline</a></p>
<p><a href="#" class="link-underline-dark">Dark underline</a></p>
<br>
<p><a href="#">Default link</a></p>
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>
<br>
<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>
<br>
<p><a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>
<p><a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>
<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>
<p><a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>
<p><a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>
<p><a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>
<p><a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>
<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>

HTML 锚点链接

锚点链接让你可以在同一页面内跳转到特定部分。首先，在目标位置设置一个ID：

<h2 id="section1">第一节</h2>

然后创建一个指向该ID的链接：

<a href="#section1">跳转到第一节</a>

当你点击这个链接时，浏览器会滚动到带有id="section1"的元素处。

HTML 链接