HTML - a 标签_HTML 菜鸟教程

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="zh-CN">

<head>
    <title>HTML a 标签示例</title>
</head>

<body>
    <!-- 创建超链接文本-->
    <p>访问
        <a href="/index.html">启科普主页</a>
    </p>
</body>

</html>

<a> 标签空白目标

以下将 href=“” 值保持为 null。由于没有向 href 属性提供链接目标，因此如果用户单击链接，则不会发生任何事情。


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>HTML a 标签</title>
</head>

<body>
    <!-- 创建超链接文本 -->
    <!-- 这不会重定向到任何地方，但会打开空白HTML -->
    <p>访问
        <a href="">首页</a>
    </p>
</body>

</html>

在新标签页中打开链接

以下使用 <a> 标签及其 href 属性创建一个超链接，将目标属性值为 target = '_blank'，当用户单击链接时，超链接目标将在新窗口中打开。


<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <title>HTML a 标签</title>
</head>

<body>
   <!-- 在新选项卡中打开链接 -->
   <a href=/index.html target="_blank">qikepu</a>
</body>

</html>

链接到e-mail和电话号码

下面创建两个超链接，一个是打开默认邮件应用程序发送邮件。另一个将打开电话功能拨打号码。


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>HTML a 标签</title>
</head>

<body>
    <!-- 链接到电子邮件地址和电话号码  -->
    <p>您可以联系我们</p>
    <ul>
        <li><a href="tel:020-10000" name=Call>打电话</a></li>

        <li><a href="mailto:example@qikepu.com" name=Mail>发邮件</a></li>
    </ul>
</body>

</html>

创建内部页面锚点

以下创建页面内部导航。


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>HTML a 标签</title>
    <style>
    div{
        margin-top: 1500px;
        border: 1px solid black;
    }
    </style>
</head>

<body>
    <a href="#section1">转到第一节</a>
    <br>
    <a href="#section2">转到第二节</a>
    <!-- 创建内部页面锚点  -->
    <div>
        <h3 id="section1">第一节</h3>
    </div>
    <div>
        <h3 id="section2">第二节</h3>
    </div>
    
</body>

</html>

下载附加的链接文件

使用带有锚 <a> 标签的 download 属性，我们只需单击链接或特定图像即可从浏览器下载本地图像。


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>HTML a 标签</title>
</head>

<body>
    <div>
        <!-- 正在下载附加的链接文件 -->
        <p>点击这个 
            <a href="/images/logo.png" name=‘image’ download>下载</a> 按钮
        </p>

    </div>
</body>

</html>

支持浏览器

标签
<a>	Yes	Yes	Yes	Yes	Yes

<< HTML - video 标签 HTML - link 标签 >>