HTML 链接
几乎所有网页中都可以找到链接。链接允许用户通过点击从一个页面到另一个页面。
HTML 链接 - 超链接
HTML 链接是超链接。 您可以单击链接并跳转到另一个文档。 当您将鼠标移到链接上时,鼠标箭头会变成一只小手。 注意:链接不一定是文本。链接可以是图像或任何其他 HTML 元素!
HTML 链接 - 语法
HTML<a>
标签定义超链接。它具有以下语法:
<a href="*url*">*link text*</a>
元素最重要的属性<a>
链接文本是读者可见的部分。
单击链接文本,会将读者发送到指定的 URL 地址。
例子
此示例显示如何创建 codewhy.net 的链接:
<a href="https://www.codewhy.net/">Visit codewhy.net !</a>
默认情况下,链接在所有浏览器中都会显示如下:
- 未访问的链接带有下划线且呈蓝色
- 访问过的链接带有下划线且呈紫色
- 活动链接带有下划线并呈红色
提示:当然可以使用 CSS 设置链接样式,以获得另一种外观!
HTML 链接 - 目标属性
默认情况下,链接页面将显示在当前浏览器窗口中。要更改此设置,您必须为链接指定另一个目标。
该target
属性指定在哪里打开链接文档。
该target
属性可以具有以下值之一:
_self
- 默认。在单击时的同一窗口/选项卡中打开文档_blank
- 在新窗口或选项卡中打开文档_parent
- 在父框架中打开文档_top
- 在整个窗口中打开文档
例子
使用 target="_blank" 在新的浏览器窗口或选项卡中打开链接文档:
<a href="https://www.codewhy.net/" target="_blank">Visit codewhy!</a>
绝对 URL 与相对 URL
上面的两个示例都在属性中使用绝对 URL(完整网址)href
。
本地链接(指向同一网站内页面的链接)使用相对 URL指定 (不带“https://www”部分
):
例子
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
HTML 链接 - 使用图像作为链接
要使用图像作为链接,只需将<img>
标签放在标签内即可<a>
:
例子
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
链接到电子邮件地址
mailto:
在属性内部使用 href
创建一个打开用户电子邮件程序的链接(让他们发送新电子邮件):
例子
<a href="mailto:[email protected]">Send email</a>
按钮作为链接
要使用 HTML 按钮作为链接,您必须添加一些 JavaScript 代码。 JavaScript 允许您指定某些事件发生的情况,例如单击按钮:
例子
<button onclick="document.location='default.php'">HTML Tutorial</button>
提示:在我们的JavaScript 教程中了解有关 JavaScript 的更多信息。
链接标题
该title
属性指定有关元素的额外信息。当鼠标移动到元素上时,该信息通常显示为工具提示文本。
例子
<a href="https://www.codewhy.net/html/" title="Go to codewhy HTML section">Visit our HTML Tutorial</a>
有关绝对 URL 和相对 URL 的更多信息
例子
使用完整的 URL 链接到网页:
<a href="https://www.codewhy.net/html/default.asp">HTML tutorial</a>
例子
链接到当前网站 html 文件夹中的页面:
<a href="/html/default.asp">HTML tutorial</a>
例子
链接到与当前页面位于同一文件夹中的页面:
<a href="default.asp">HTML tutorial</a>
章节总结
- 使用
<a>
元素定义链接 - 使用
href
属性定义链接地址 - 使用该
target
属性定义在何处打开链接文档 - 使用
<img>
元素(内部<a>
)将图像用作链接 - 使用属性
mailto:
内的方案href
创建打开用户电子邮件程序的链接