HTML链接

上一节: HTML_CSS样式 下一节: HTML图像

几乎在所有网页中都可以找到链接。链接允许用户从一个页面点击到另一个页面。将鼠标移到链接上时,鼠标箭头会变成一只小手。 小白教程

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

语法

<a href="url">链接文本</a> 最重要的属性是属性href,它表示链接的目的地值。 链接文本是读者可见的部分。


示例

<a href="https://www.xiaobai.wang">小白教程</a>

默认情况下,链接将在所有浏览器中显示如下:

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

提示:链接当然可以用 CSS 设置样式,所以上面的这些展示也是不一定的。


target 属性

默认情况下,链接页面将显示在当前浏览器窗口中。要更改此设置,您必须为链接指定另一个目标。

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

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

  • _self 默认。在单击时在同一窗口/选项卡中打开文档
  • _blank 在新窗口或选项卡中打开文档
  • _parent 在父框架中打开文档
  • _top 在整个窗口中打开文档


示例

使用 target=

<a href="https://www.xiaobai.wang" target="_blank">小白教程</a>

绝对 URL 与相对 URL

上面的两个示例都在href属性中使用了绝对 URL(完整的网址) 。

使用相对 URL 指定本地链接(指向同一网站内页面的链接) (没有“https://www”部分):

示例

<!DOCTYPE html>
<html>
<body>

<h2>绝对URL</h2>
<p><a href="https://www.qq.com/">W3C</a></p>
<p><a href="https://www.xiaobai.wang/">Google</a></p>

<h2>相对URL</h2>
<p><a href="/index.php?title=首页">首页</a></p>

</body>
</html>

使用图像作为链接

要将图像用作链接,只需将<img> 标签放在标签内<a>:

示例

<a href="/">
<img src="/favicon.ico" alt="小白教程" style="width:42px;height:42px;">
</a>

链接到电子邮件地址

在href属性内部使用mailto:来创建打开用户电子邮件客户端,客户端会填充收件人地址:


示例

<a href="mailto:[email protected]">发送邮件</a>

按钮作为链接

要将 HTML 按钮用作链接,须添加一些 JavaScript 代码。JavaScript 允许指定在某些事件(例如单击按钮)时发生的事情:


示例

<p>点击按钮会跳转到http://www.xiaobai.wang</p>
<button onclick="document.location='http://www.xiaobai.wang'">小白教程</button>

提示:在我们的中了解有关 JavaScript 的更多信息。

链接标题

该title属性指定有关元素的额外信息。当鼠标移到元素上时,该信息通常显示为提示文本。

示例

<a href="http://www.xiaobai.wang" title="点击访问小白教程" target="_blank">小白教程</a>

绝对 URL 和相对 URL

示例

使用完整 URL 链接到网页:

<a href="http://www.xiaobai.wang" title="点击访问小白教程" target="_blank">小白教程</a>


示例

链接到位于当前网站的 html 文件夹中的页面:

<a href="/index.php/首页" title="点击访问小白教程" target="_blank">小白教程</a>


示例

链接到与当前页面位于同一文件夹中的页面:

<a href="首页" title="点击访问小白教程" target="_blank">小白教程</a>


链接颜色

示例

<!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="http://wwww.xiaobai.wang/rand" target="_blank">链接</a> 

</body>
</html>

添加 id 属性实现书签功能

HTML 链接可用于创建书签,以便读者可以跳转到网页的特定部分。比如当前网站右侧的链接就是书签,点击后可以调整到页面对应的章节。

创建书签

使用id属性创建章节 <h2 id="C4">章节4</h2>

然后,在同一页面中添加一个指向书签的链接(“跳转到第 4 章”):

<a href="#C4">跳转到第4章</a>


示例

<a href="#C4">跳转到第4章</a>
<div style="height:1000px">内容</div>
<h2 id="C4">章节4</h2>
上一节: HTML_CSS样式 下一节: HTML图像
此页面最后编辑于2022年8月6日 (星期六) 10:05。