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>