Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML 教程

HTML 主页 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 样式 HTML 格式化 HTML 引号 HTML 注释 HTML 颜色 HTML CSS HTML 链接 HTML 图片 HTML Favicon HTML 页面标题 HTML 表格 HTML 列表 HTML 块级和内联元素 HTML Div HTML 类 HTML Id HTML Iframes HTML JavaScript HTML 文件路径 HTML Head HTML 布局 HTML 响应式 HTML 代码元素 HTML 语义 HTML 样式指南 HTML 实体 HTML 符号 HTML 表情符号 HTML 字符集 HTML URL 编码 HTML vs. XHTML

HTML 表单

HTML 表单 HTML 表单属性 HTML 表单元素 HTML 输入类型 HTML 输入属性 输入表单属性

HTML 图形

HTML Canvas HTML SVG

HTML 媒体

HTML 媒体 HTML 视频 HTML 音频 HTML 插件 HTML YouTube

HTML API

HTML 地理位置 HTML 拖放 HTML Web 存储 HTML Web 工作线程 HTML SSE

HTML 示例

HTML 示例 HTML 编辑器 HTML 测验 HTML 练习 HTML 网站 HTML 面试准备 HTML 集训营 HTML 证书 HTML 总结 HTML 无障碍

HTML 参考

HTML 标签列表 HTML 属性 HTML 全局属性 HTML 浏览器支持 HTML 事件 HTML 颜色 HTML Canvas HTML 音频/视频 HTML 文档类型 HTML 字符集 HTML URL 编码 HTML 语言代码 HTTP 消息 HTTP 方法 PX 到 EM 转换器 键盘快捷键

HTML 链接


链接在几乎所有网页中都能找到。链接允许用户点击链接从一个页面跳转到另一个页面。


HTML 链接 - 超链接

HTML 链接是超链接。

您可以点击链接并跳转到另一个文档。

当您将鼠标悬停在链接上时,鼠标箭头会变成一个小手。

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


HTML 链接 - 语法

HTML <a> 标签定义超链接。它具有以下语法

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

<a> 元素最重要的属性是 href 属性,它指示链接的目的地。

链接文本是读者可以看到的部分。

点击链接文本,将把读者发送到指定的 URL 地址。

示例

此示例展示如何创建指向 W3Schools.com 的链接

<a href="https://w3schools.org.cn/">访问 W3Schools.com!</a>
亲自尝试 »

默认情况下,链接在所有浏览器中的显示方式如下

  • 未访问的链接带下划线且为蓝色
  • 已访问的链接带下划线且为紫色
  • 活动的链接带下划线且为红色

提示: 当然,可以使用 CSS 对链接进行样式设置,以获得不同的外观!


HTML 链接 - target 属性

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

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

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

  • _self - 默认值。在与单击它相同的窗口/标签中打开文档
  • _blank - 在新窗口或标签中打开文档
  • _parent - 在父框架中打开文档
  • _top - 在窗口的整个主体中打开文档

示例

使用 target="_blank" 在新的浏览器窗口或标签中打开链接文档

<a href="https://w3schools.org.cn/" target="_blank">访问 W3Schools!</a>
亲自尝试 »

绝对 URL 与相对 URL

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

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

示例

<h2>绝对 URL</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>相对 URL</h2>
<p><a href="html_images.asp">HTML 图片</a></p>
<p><a href="/css/default.asp">CSS 教程</a></p>
亲自尝试 »


HTML 链接 - 使用图像作为链接

要使用图像作为链接,只需将 <img> 标签放在 <a> 标签中

示例

<a href="default.asp">
<img src="smiley.gif" alt="HTML 教程" style="width:42px;height:42px;">
</a>
亲自尝试 »

链接到电子邮件地址

href 属性中使用 mailto: 创建打开用户电子邮件程序的链接(让他们发送新电子邮件)

示例

<a href="mailto:[email protected]">发送电子邮件</a>
亲自尝试 »

按钮作为链接

要使用 HTML 按钮作为链接,您必须添加一些 JavaScript 代码。

JavaScript 允许您指定在某些事件发生时会发生什么,例如点击按钮

示例

<button onclick="document.location='default.asp'">HTML 教程</button>
亲自尝试 »

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


链接标题

title 属性指定有关元素的额外信息。这些信息通常在鼠标移动到元素上时以工具提示文本的形式显示。

示例

<a href="https://w3schools.org.cn/html/" title="转到 W3Schools HTML 部分">访问我们的 HTML 教程</a>
亲自尝试 »

更多关于绝对 URL 和相对 URL 的信息

示例

使用完整 URL 链接到网页:

<a href="https://w3schools.org.cn/html/default.asp">HTML 教程</a>

亲自尝试 »

示例

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

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

亲自尝试 »

示例

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

<a href="default.asp">HTML 教程</a>

亲自尝试 »

您可以在 HTML 文件路径 章节中了解更多关于文件路径的信息。


章节总结

  • 使用 <a> 元素定义链接
  • 使用 href 属性定义链接地址
  • 使用 target 属性定义链接文档的打开位置
  • 使用 <img> 元素(在 <a> 中)使用图像作为链接
  • href 属性中使用 mailto: 方案,可以创建打开用户电子邮件程序的链接。

HTML 链接标签

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

有关所有可用 HTML 标签的完整列表,请访问我们的 HTML 标签参考



视频:HTML 链接

Tutorial on YouTube
Tutorial on YouTube


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.