上一节:
下一节:

  HTML 链接

  • HTML链接 | 超链接

    几乎所有网页都有链接。HTML链接是超链接。您可以单击链接并跳转到另一个文档。当您将鼠标移到链接上时，鼠标箭头将变成一只小手。
    注意：链接不必是文本。它可以是图像或任何其他HTML元素。

  • HTML链接 | 语法

    在HTML中，链接使用<a>标记定义： 例如： 
    <a href="https://www.cainiaoya.com/">菜鸟教程</a>
    尝试一下
    该href属性指定链接的目标地址（https://www.cainiaoya.com/）。 该链接的文本是可见部分（访问我们的首页）。 单击链接文本将发送到指定的地址。
    注意：如果子文件夹地址末尾没有正斜杠，则可能会向服务器生成两个请求。许多服务器会自动在地址末尾添加正斜杠，然后创建新请求。

  • 本地链接

    上面的示例使用绝对URL（完整的Web地址）。 使用相对URL（不包含http：// www ....）指定本地链接（指向同一网站的链接）。 例如： 
    <a href="css/test.html">菜鸟教程</a>
    尝试一下

  • HTML链接颜色

    默认情况下，链接将显示如下（在所有浏览器中）：
    • 未访问的链接带有下划线和蓝色
    • 访问链接(鼠标悬停)带有下划线和紫色
    • 活动链接带有下划线和红色
    您可以使用CSS更改默认颜色： 
    <!DOCTYPE html>
<html>
<head>
<style>
a:link {
   color: green;
   background-color: transparent;
   text-decoration: none;
}
a:visited {
   color: pink;
   background-color: transparent;
   text-decoration: none;
}
a:hover {
   color: red;
   background-color: transparent;
   text-decoration: underline;
}
a:active {
   color: yellow;
   background-color: transparent;
   text-decoration: underline;
}
</style>
</head>
<body>

<h2>链接颜色</h2>

<p>您可以修改默认的链接颜色。</p>

<a href="css/test.html" target="_blank">菜鸟教程</a>

</body>
</html>
    尝试一下

  • HTML链接 | 目标属性

    target属性可以具有以下值之一：
    • _blank - 在新窗口或选项卡中打开链接的文档
    • _self - 在单击的同一窗口/选项卡中打开链接的文档（这是默认设置）
    • _parent - 在父框架中打开链接的文档
    • _top - 在窗口的完整正文中打开链接的文档
    • framename - 在命名框架中打开链接文档
    此示例将在新的浏览器窗口/选项卡中打开链接的文档： 
    <a href="css/test.html" target="_blank">菜鸟教程</a>
    尝试一下
    提示：如果您的网页被锁定在框架中，您可以使用target="_top"以突破框架： 
    <a href="css/test.html" target="_top">菜鸟教程</a>
    尝试一下

  • HTML链接 | 图像链接

    将图像用作链接是很常见的： 
    <a href="https://www.cainiaoya.com/">
 <img src="images/logo.png" alt="菜鸟教程" style="width:120px;height:auto;border:0;">
</a>
    尝试一下
    注意： border:0;添加以防止IE9（及更早版本）在图像周围显示边框（当图像是链接时）。

  • 链接标题

    该title属性指定有关元素的额外信息。当鼠标在元素上移动时，信息通常显示为工具提示文本。 
    <a href="https://www.cainiaoya.com/" title="链接到菜鸟教程首页">
菜鸟教程
</a>
    尝试一下

  • HTML链接 | 创建书签

    HTML书签用于允许读者跳转到网页的特定部分。如果您的网页很长，书签会非常有用。要创建书签，您必须先创建书签，然后添加一个链接。单击链接后，页面将滚动到带有书签的位置。例如： 首先，使用id属性创建书签： 
    <h2 id="title4">标题4</h2>
    然后，在同一页面中添加指向书签的链接（“跳转到标题4”）： 
    <a href="#title4">跳转到标题4</a>
    或者，从另一页面添加指向书签的链接（“跳转到标题4”）： 
    <a href="html_demo.html#title4">跳转到标题4</a>

  • 外部路径

    可以使用完整URL或相对于当前网页的路径引用外部页面。 此示例使用完整URL链接到网页： 
    <a href="https://www.cainiaoya.com/">菜鸟教程</a>
    此示例链接到位于当前网站的html文件夹中的页面： 
    <a href="css/test.html">菜鸟教程</a>
    此示例链接到与当前页面位于同一文件夹中的页面： 
    <a href="test.html">菜鸟教程</a>

  • 章节总结

    可以使用完整URL或相对于当前网页的路径引用外部页面。
    • 使用<a>元素定义链接
    • 使用该href属性定义链接地址
    • 使用该target属性可以定义打开链接文档的位置
    • 使用<img>元素（在<a​​>内）将图像用作链接
    • 使用id属性（id =“ value ”）在页面中定义书签
    • 使用href属性（href =“＃value ”）链接到书签
上一节:
下一节: