最新的Web开发教程

HTML链接

❮上一页 下一页章❯

链接是在几乎所有的网页中找到。 链接允许用户从页面点击自己的方式来页。

HTML链接说明

的超链接，或只是一个链路，是对数据的引用，读者可以直接遵循通过单击，攻丝或悬停。

的超链接指向一个整个文档或文档内的特定元素。 超文本是文本超链接。 是从链接的文本被称为锚文本。

该用于查看和建立超文本软件系统是一个超文本系统，并建立一个超链接是超链接（或简单地链接）。 用户以下链接据说导航或浏览的超文本。

HTML链接 - 超链接

HTML链接是超链接。

超链接是文本，或者您可以点击图片，并跳转到另一个文档。

HTML链接 - 语法

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

<a href=" url "> link text </a>

例

<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
试一试»

的href属性指定的目的地址(http://www.w3ii.com/html/default.html)

链接文本是可见部分(Visit our HTML tutorial) 。

点击该链接的文字，会送你到指定的地址。

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

如果没有在子文件夹地址的斜线，你可能会产生两个请求到服务器。 许多服务器将一个斜线会自动添加到地址，然后创建一个新的请求。

本地链接

上面的实施例中使用的绝对URL (A full web address) 。

本地链接(link to the same web site)与相对URL指定的(without http://www.... )

例

<a href="html_images.asp">HTML Images</a>
试一试»

HTML链接 - 颜色

当你在一条链路上移动鼠标时，有两件事情一般发生：

  • 鼠标箭头会变成一个小手
  • 链接元素的颜色会发生变化

默认情况下，链接会出现这样(in all browsers) ：

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

您可以更改默认的颜色，使用样式：

例

<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属性指定在哪里打开链接的文档。

这个例子将在新的浏览器窗口或新选项卡中打开链接的文档：

例

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
试一试»
目标价值 描述
_blank 打开链接的文档在新窗口或标签
_self 打开在同一帧中所链接的文档，因为它被点击(this is default)
_parent 打开链接的文档在父帧
_top 打开链接的文档窗口的全身
framename 打开链接的文档在一个名为框架

如果你的网页被锁定在一个框架，你可以使用target="_top"打出来的框架：

例

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
试一试»

HTML链接 - 图片为链接

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

例

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
试一试»

边界：0被添加到防止IE9 (and earlier)从图像显示周围的边界。

HTML链接 - 创建书签

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

书签是实际的，如果你的网站有很长的页面。

建立书签，您必须首先创建书签，然后添加一个链接到它。

当用户点击该链接时，页面将滚动到以书签的位置。

例

首先，创建了一个书签id属性：

<h2 id="tips">Useful Tips Section</h2>

然后，将链接添加到书签("Useful Tips Section")在同一页面内：

<a href="#tips">Visit the Useful Tips Section</a>

或者，将链接添加到书签("Useful Tips Section")从另一页：

例

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
试一试»

章节总结

  • 使用HTML <a>元素定义链接
  • 使用HTML href属性来定义链接地址
  • 使用HTML target属性来定义在哪里打开链接的文档
  • 使用HTML <img>元件(inside <a> )使用图像作为一个链接
  • 使用HTML id属性( id=" value ")在页面中定义书签
  • 使用HTML href属性( href="# value ")链接到书签

测试自己与练习！

练习1» 练习2» 练习3» 练习4» 练习5»

HTML链接标记

标签 描述
<a> 定义一个超链接

❮上一页 下一页章❯