HTML超链接

HTML链接-超链接

HTML链接是超链接。

您可以点击一个链接，跳转到另一个文件。

当鼠标移动到一个链接上时，鼠标箭头将变成一只小手。

注意: 一个链接不必是文本。它可以是一个图像或任何其他HTML元素。

HTML 链接 - 语法

在HTML中，链接使用<a>标签定义：

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

例如：

<a href="http://www.CodingDict.com">编程字典</a>

让我试试

href属性中指定的目标地址（ http://www.CodingDict.com/html/ ）的链接。

链接文本是可见的部分（访问我们的HTML教程）。

点击链接文本将发送到指定的地址。

注意: 无子文件夹地址斜杠，你可能会产生两个请求到服务器。许多服务器会自动向地址添加一个前斜杠，然后创建一个新的请求.。

本地链接

上面的例子使用了绝对URL（一个完整的网址）。

本地链接（链接到同一网站）是一个相对URL指定的（非http: //www.…）。

<p><a href="html_images.html">HTML Images</a>
   网站里面的一个链接页面.</p>

<p><a href="http://www.CodingDict.com/">编程字典</a>
 链接到另一个网站.</p>

让我试试

HTML 链接颜色

默认情况下，将出现这样的链接（在所有浏览器）：

  • 一个未访问的链接下划线和蓝色
  • 一个被访问的链接下划线和紫色
  • 活动链接是下划线和红色的

可以通过使用样式更改默认颜色，例如：

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

让我试试

HTML 链接 - target 属性

target 目标属性指定打开链接文档的位置。

target 目标属性可以具有下列值之一:

  • _blank - 在新窗口或选项卡中打开链接文档.
  • _self - 打开链接文件在同一窗口/标签，因为它被点击（这是默认的）
  • _parent - 在父框架中打开链接文档.
  • _top - 在当前窗口中打开链接文档.
  • framename - 在指定的框架中打开链接文档

下面示例将在新的浏览器窗口/选项卡中打开链接文档：

<a href="http://www.CodingDict.com/" target="_blank">编程字典</a>

<p>设置target为 "_blank",
  链接将在浏览器的新窗口或者标签中打开.</p>

让我试试

提示：如果你的网页被锁定在一个框架，你可以使用target="top"：

<p>锁定在当前frame? <a href="http://www.CodingDict.com" target="_top">点击我</a></p>

让我试试

HTML 链接 - 图片链接

它是常见的使用图像作为链接：

<a href="http://www.CodingDict.com">
  <img src="new_logo.png" alt="编程字典" style="width:250px;height:112px;border:0">
</a>
<p>如果不添加border，有些浏览器默认会添加一个边框.</p>

让我试试

注意: 添加border:0;样式防止IE9（或者早期版本）显示图像边框（当图像是一个链接）。

HTML 链接 - 创建一个书签

HTML书签是用来让读者跳到网页的特定部分。

书签可以是有用的，如果你的网页很长。

要创建书签，必须先创建书签，然后向其添加链接。

当链接被点击时，页面将滚动到书签的位置。

实例

首先，创建带有id属性的书签：

<h2 id="tips">使用tips小节</h2>

然后，添加一个链接到书签（“有用的提示部分”），从同一页内：

<a href="#tips">访问有用的tips小节</a>

或者，添加一个链接到书签（“有用的提示部分”），从另一页：

<p><a href="#c12">跳转到第12章</a></p>

<h2>第1章</h2>
<p>这章讲述了 ba bla bla</p>

<h2>第2章</h2>
<p>这章讲述了 ba bla bla</p>

...

<h2 id="c12">第12章</h2>
<p>这章讲述了 ba bla bla</p>

<h2>第13章</h2>
<p>这章讲述了 ba bla bla</p>

...

让我试试

外部路径

外部页可以用完整URL引用，或与当前网页相对应的路径引用。

这个例子使用一个完整的URL链接到一个网页：

<a href="http://www.CodingDict.com/html/html_intro.html">HTML 教程</a>

这个例子的链接到一个网页的HTML文件夹位于当前Web站点：

<a href="/html/html_intro.html">HTML 教程</a>

这个示例链接到位于当前页的同一文件夹中的页：

<a href="html_intro.html">HTML 教程</a>

本章小结

  • 使用 <a> 元素定义一个链接
  • 使用 href 属性来定义链接地址
  • 使用 target 属性来定义打开链接文档的位置.
  • 使用 <img> 元素 ( <a> 元素内部)作为一个链接
  • 使用 id (id="value") 在页面中定义书签
  • 使用 href 属性 (href="#value") 链接到书签