超链接，英文 hyperlink，也称为 URL ( Uniform Resource Locator，中文统一资源定位符 )，是网站中最常用的 HTML 标签之一

网站的各个页面通过超链接连接，超链接完成页面之间的重定向

HTML 超链接

超链接由 <a> 标签定义

超链接可以是一段文本或图像，当点击该文本或图像时可以重定向到新文档或当前文档的一部分

默认情况下，当鼠标移到链接上时，箭头会变为小手

在所有浏览器中，默认的，链接将显示如下：

• 未访问的链接带有下划线和蓝色
• 已访问过的链接带有下划线和紫色
• 活动链接带有下划线和红色

我们可以使用样式来改变这种默认的显示

<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>

超链接语法

超链接由 <a> 标签定义

<a href="url">链接文本</a>

以下是最简单的超链接示例

<a href="https://www.twle.cn/l/yufei/html/html-basic-index.html">访问简单教程</a>

单击上面的链接时，它将指向 HTML 教程的主页

「 链接文本 」不一定是文本 图像或其他 HTML 标签也可以成为超链接

href 属性

可以通过设置 <a> 标记的 href 属性来定义重定向的目标，有 5 种类型的 href 属性值

1. 绝对 URL

   可以重定向到另一个站点

   <a href="http://www.qq.com/">访问 QQ 首页</a>
   

2. 相对 URL

   可以重定向到当前站点的另一个页面

   <a href="117">HTML 简明教程 ( HTML5 标准 ) - 样式 ( css )</a>
   

3. 锚 URL

   可以重定向到当前页面的中的锚点

   <a href="#top">回到当前页面的顶部</a>
   

4. 电子邮件 ( Email ) URL

   可以打开本地默认的邮件客户端

   <a href="mailto:server@twle.cn">联系我们</a>
   

5. 一段 JavaScript 脚本

   可以执行一段 JavaScript 脚本

   <a href="javascript:void(0);">href 属性中的 JavaScript 脚本</a>
   

属性 target

<a> 标签的 target 属性指定打开链接文档的位置

target 属性值有 5 种类型

• target="_blank" - 始终打开一个新窗口以显示链接文档的内容
• target="_self" - 始终在当前窗口中打开链接的文档
• target="_parent" - 在父框架中打开链接文档
• target="_top" - 在顶部框架中的打开链接文档
• target="window_name/frame_name" - 在名为 window_name 的窗口或名为 frame_name 的框架中打开链接的文档

这里我们以 window_name 为例

<h3>表格中的内容</h3>

<ul>
  <li><a href="pref.html" target="view_window">前导</a></li>
  <li><a href="chap1.html" target="view_window">章节 1</a></li>
  <li><a href="chap2.html" target="view_window">章节 2</a></li>
  <li><a href="chap3.html" target="view_window">章节 3</a></li>
</ul>

当访问者首次点击链接时，浏览器会打开一个名为 view_window 的新窗口

如果访问者在窗口 view_window 仍然打开时单击另一个链接，浏览器将在窗口 view_window 中再次打开链接文档 ，替换上次打开的文档的内容

title 属性

HTML 中的 title 属性定义了元素的附加信息

如果 <a> 标签定义了 title 属性，那么当我们将鼠标移到 <a> 标签上时，会在链接上显示提示文本消息

例如

<a href="https://www.twle.cn/" title="欢迎来到简单教程">访问简单教程首页</a>