HTML a 标签 - 绿叶网

HTML a 语法

在 HTML 中，a 标签用于创建一个链接（超链接）。超链接可以指向其他网页、文件、电子邮件地址等。

语法：

<a href="链接地址" target="打开方式">链接内容</a>

说明：

a 标签有以下两个主要属性。

href：定义该链接跳转的路径（地址），该路径可以是绝对路径，也可以是相对路径。
target：定义链接的打开方式，常用取值如下表所示。

a 标签 target 属性取值
属性值	说明
_self（默认值）	在原窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开超链接

提示: 大多数情况下，target 属性只会用到 “_blank” 这一种取值。小伙伴们也只需要记住这一个就够了，其他 3 种取值不需要深究。

除了 href 和 target 两个主要属性之外，a 标签还支持以下属性。

title：定义鼠标悬停时的显示文本。
rel：指定链接与目标页面的关系，比如 rel="nofollow"。
download：定义可被下载的目标（如文件、图片等）。
type：定义被连接文档的 MIME 类型。
media：定义被链接文档为何种媒介 / 设备优化的。

HTML a 摘要

属于	HTML 链接
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML a 示例

接下来，我们通过几个简单的例子来讲解一下 HTML a 标签是如何使用的。

示例 1：a 标签创建文本链接

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="https://www.lvyenet.com">绿叶网</a>
</body>
</html>

页面效果如下图所示。

HTML a标签创建文本链接

分析：

当我们点击 “绿叶网” 这个文本，就会跳转到绿叶首页。

示例 2：a 标签创建图片链接

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="https://www.lvyenet.com">
        <img src="imgs/logo.jpg" alt="绿叶网">
    </a>
</body>
</html>

页面效果如下图所示。

HTML a标签创建图片链接

分析：

当我们点击图片后，就会跳转到绿叶首页。不管是哪种链接，我们都是把文字或图片放到 a 标签内部来实现的。

示例 3：a 标签创建锚点链接

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>
        <a href="#article">推荐文章</a><br>
        <a href="#music">推荐音乐</a><br>
        <a href="#movie">推荐动漫</a><br>
    </div>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>任然-疑心病</li>
            <li>司南-冬眠</li>
            <li>艾辰-错位时空</li>
        </ul>
    </div>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    ……<br>
    <div id="movie">
        <h3>推荐动漫</h3>
        <ul>
            <li>仙逆</li>
            <li>剑来</li>
            <li>遮天</li>
        </ul>
    </div>
</body>
</html>

页面效果如下图所示。

HTML a标签创建锚点链接

分析：

当我们点击 “推荐文章” 、 “推荐音乐” 、 “推荐电影” 这 3 个超链接后，页面就会自动滚动到相应的部分。小伙伴们仔细观察这个例子就可以知道，想要实现锚点链接，需要执行以下 2 步才行。

设置目标元素的 id。
将 a 标签的 href 属性指向该 id。

示例 4：a 标签的 target 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>第1个链接：<a href="http://www.lvyenet.com">绿叶网</a></p>
    <p>第2个链接：<a href="http://www.lvyenet.com" target="_blank">绿叶网</a></p>
</body>
</html>

页面效果如下图所示。

HTML a标签的target属性

分析：

从浏览器效果上看，这 2 个链接没什么区别。但当我们分别点击 2 个链接之后，会发现它们打开窗口的方式是不一样的，小伙伴们可以自行试一下。

在实际开发中，当我们使用 target="_blank" 打开 “外部链接” 时，建议始终加上 rel="noopener noreferrer" 属性。这不仅能防止安全漏洞（新页面恶意篡改原页面），还能提升页面性能。

<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">百度一下</a>

注意: _blank 属性是以 “下划线（_）” 开头，而不是 “中划线（-）” 开头。

示例 5：a 标签的 download 属性

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="./imgs/bird.jpg" download="little-bird.jpg">下载图片</a>
</body>
</html>

页面效果如下图所示。

HTML a标签的download属性

分析：

当我们点击超链接后，浏览器就会下载该图片，并且图片名字换成新的文件名 little-bird.jpg。如果我们改为下面这句代码，也就是省略 download 属性的值，则图片会使用旧的文件名 bird.jpg。

<a href="./imgs/bird.jpg" download>下载图片</a>

示例 6：拨打电话与发送邮件

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="tel:10086">拨打 10086</a>
</body>
</html>

页面效果如下图所示。

HTML a标签拨打电话与发送邮件

分析：

在移动端开发中，我们可以通过特殊的协议让 a 标签实现拨号和发邮件功能。