- HTML 教程
- HTML 教程
- HTML - 简介
- HTML - 编辑器
- HTML - 基本标签
- HTML - 元素
- HTML - 属性
- HTML - 标题
- HTML - 段落
- HTML - 字体
- HTML - 块和内联元素
- HTML - 样式表
- HTML - 文本格式化
- HTML - 引用
- HTML - 注释
- HTML - 颜色
- HTML - 图像
- HTML - 图像映射
- HTML - iframe
- HTML - 短语标签
- HTML - 类
- HTML - ID
- HTML - 背景
- HTML 表格
- HTML - 表格
- HTML - 表格标题
- HTML - 表格样式
- HTML - 表格 Colgroup
- HTML - 嵌套表格
- HTML 列表
- HTML - 列表
- HTML - 无序列表
- HTML - 有序列表
- HTML - 定义列表
- HTML 链接
- HTML - 文本链接
- HTML - 图片链接
- HTML - 电子邮件链接
- HTML 颜色名称和值
- HTML - 颜色名称
- HTML - RGB 和 RGBA 颜色
- HTML - 十六进制颜色
- HTML - HSL 和 HSLA 颜色
- HTML 表单
- HTML - 表单
- HTML - 表单属性
- HTML - 表单控件
- HTML - 输入属性
- HTML 媒体
- HTML - 视频元素
- HTML - 音频元素
- HTML - 嵌入多媒体
- HTML 标头
- HTML - 头部
- HTML - 网站图标
- HTML - JavaScript
- HTML 布局
- HTML - 布局
- HTML - 布局元素
- HTML - CSS布局
- HTML - 响应式网页设计
- HTML - 特殊符号
- HTML - 表情符号
- HTML - 样式指南
- HTML 图形
- HTML - SVG
- HTML - 画布
- HTML API 接口
- HTML - Geolocation API
- HTML - 拖放 API
- HTML - Web Workers API
- HTML - WebSockets
- HTML - Web 存储
- HTML - 服务器发送事件
- HTML 杂项
- HTML - 数学标记语言
- HTML - 微观数据
- HTML - 索引数据库
- HTML - Web 消息传递
- HTML - CORS
- HTML - Web RTC
- HTML 演示
- HTML - 音频播放器
- HTML - 视频播放器
- HTML - Web 幻灯片台
- HTML 工具
- HTML - 二维码
- HTML - Modernizr
- HTML - 验证器
- HTML 备忘单
- HTML - 标签参考
- HTML - 属性参考
- HTML - 事件参考
- HTML - 字体参考
- HTML - ASCII 代码参考
- HTML - 实体
- MIME 媒体类型
- HTML - URL 编码
- HTML - ISO 语言代码
- HTML - 字符编码
- HTML - 已弃用的标签和属性
HTML - a 标签
HTML <a> 标签定义了一个超链接。它用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性,它指示链接的目标。
带有 href 属性的锚标记 (<a>) 创建指向网页的超链接,其中 href 属性指示链接的目的地。默认情况下点击链接后,它将在所有浏览器中显示如下。如果锚标记中存在 href 属性,则在焦点位于 <a> 标记上时按 Enter 键将激活它。
语法
<a href="...">Content...</a>
属性
<a> 标签支持 HTML 的 全局属性 和 事件属性。也接受一些特定的属性,这些属性在下面列出。
属性 | 值 | 描述 |
---|---|---|
download | filename | 允许用户在用户单击超链接时下载链接的文件。 |
href | URL | 指定我们想要将用户发送到的链接页面。 |
hreflang | language_code | 具体说明所附链接的语言。 |
media | media_query | 指定针对链接文档优化的媒体/设备。 |
ping | list_of_URLs | 指定以空格分隔的 URL 列表。 |
referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
指定要与链接一起发送的反向链接信息。 |
rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
定义当前 url 文档和链接的 url 文档之间的关系。 |
target | _blank _parent _self _top |
指定打开链接文档的方式和位置。 |
type | media_type | 指定墨迹填入的 url 文档的媒体类型。 |
<a> 标签的示例
下面的示例将说明<a> 标签的用法。在何处、何时以及如何使用<a> 标签以及如何超链接,我们可以使用 CSS 为<a> 标签设置样式。
使用<a> 标签创建超链接
在以下示例中,我们将使用 <a> 标签及其 href 属性创建一个超链接,该超链接会将用户发送到我们的主页。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML a Tag</title>
</head>
<body>
<!-- Creating Hyperlink Text-->
<p>Visit our
<a href="/index.htm">
Home Page
</a>
</p>
</body>
</html>
<a> 标签的空白目标
在以下示例中,我们将 href=“” 值保持为 null。由于我们没有向 href 属性提供链接目标,因此如果用户单击链接,则不会发生任何事情。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML a Tag</title>
</head>
<body>
<!-- Creating Hyperlink Text-->
<!-- This will not redirect to anywhere
but will open HTML ide
-->
<p>Visit our
<a href="">
Home Page
</a>
</p>
</body>
</html>
在新标签页中打开链接
以下是 HTML 锚标记 (<a>) 的另一个示例。在这里,我们使用 <a> 标签及其 href 属性创建一个超链接,我们将链接目的地提供给 href 属性作为 Qikepu 网站的落地页面,即:是。index.htm”。"https://www.qikupu.com/
我们将目标属性值为 target = '_blank',当用户单击链接时,链接目标将在新窗口中打开。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML a Tag</title>
</head>
<body>
<!-- Opening Links in New Tab -->
<a href=/index.htm
target=" _blank"
name=‘QikepuCom’>
QikepuCom
</a>
</body>
</html>
链接到电子邮件地址和电话号码
在此示例中,我们将创建两个超链接,如果我们访问这些链接,则将打开默认邮件应用程序以在 href 属性中提到的邮件 ID 上发送邮件。另一个将打开呼叫功能以在 href 中呼叫上述号码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML a Tag</title>
</head>
<body>
<!-- Linking to Email Addresses and Phone Numbers -->
<p>You can contact with us</p>
<ul>
<li><a href="tel:+910000000" name=Call>
Call Us
</a></li>
<li><a href="mailto:example@xyz.com" name=Mail>
Mail Us
</a></li>
</ul>
</body>
</html>
创建内部页面锚点
在以下示例中,我们将创建页面导航链接。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML a Tag</title>
<style>
div{
margin-top: 1500px;
border: 1px solid black;
}
</style>
</head>
<body>
<a href="#section1">Go to Section 1</a>
<br>
<a href="#section2">Go to Section 2</a>
<!-- Creating Internal Page Anchors -->
<div>
<h3 id="section1">Section 1</h3>
</div>
<div>
<h3 id="section2">Section 2</h3>
</div>
</body>
</html>
下载附加的链接文件
使用带有锚 <a> 标签的 download 属性,我们只需单击链接或特定图像即可从浏览器下载本地图像。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML a Tag</title>
</head>
<body>
<div>
<!-- Downloading attached Linked file-->
<p>
Click the
<a href=
"/images/logo.png"
name=‘image’ download>
Download
</a>
Button
</p>
</div>
</body>
</html>
支持的浏览器
浏览器 | |||||
---|---|---|---|---|---|
<a> | Yes | Yes | Yes | Yes | Yes |