HTML - <a> 标签

HTML <a> 标签定义超链接。它用于在一个页面之间建立链接。<a> 元素最重要的属性是 href 属性，它指示链接的目标。

锚点标签 (<a>) 及其 href 属性创建指向网页的超链接，其中 href 属性指示链接的目标。默认情况下，点击链接后，它将在所有浏览器中显示如下。如果锚点标签中存在 href 属性，则在 <a> 标签获得焦点时按 Enter 键将激活它。

语法

<a href="...">Content...</a>

属性

HTML a 标签支持 HTML 的全局和事件属性。还接受一些特定的属性，如下所示。

属性	值	描述
download	文件名	允许用户在点击超链接时下载链接的文件。
href	URL	指定要将用户发送到的链接页面。
hreflang	语言代码	指定附加链接的语言。
media	媒体查询	指定链接文档针对的媒体/设备。
ping	URL 列表	指定以空格分隔的 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	媒体类型	指定链接 URL 文档的媒体类型。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

HTML a 标签示例

下面的示例将说明 a 标签的使用。在哪里、何时以及如何使用锚点标签以及如何使用 CSS 样式化锚点元素。

使用 a 标签创建超链接

在下面的示例中，我们使用 <a> 标签及其 href 属性创建一个超链接，该链接将用户发送到我们的主页。

Open Compiler

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
</head>

<body>
    <!-- Creating Hyperlink Text-->
    <p>Visit our
        <a href="https://tutorialspoint.com/index.htm">
            Home Page
        </a>
    </p>
</body>

</html>

使用 a 标签的空目标

在下面的示例中，我们将 href="" 值保留为空。由于我们没有为 href 属性提供链接目标，因此如果用户点击链接，则不会发生任何事情。

Open Compiler

<!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 属性创建一个超链接，我们将链接目标作为 Tutorialspoint 网站的登录页面提供，即："https://tutorialspoint.com/ 是 index.htm"。

我们将 target 属性值设置为target = ‘_blank’，当用户点击链接时，链接目标将在新窗口中打开。

Open Compiler

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML a Tag</title>
</head>

<body>
   <!-- Opening Links in New Tab -->
   <a href=https://tutorialspoint.com/index.htm 
      target="_blank" 
      name=‘tutorialspoint’>
       TutorialsPoint
   </a>
</body>

</html>

链接到电子邮件地址和电话号码

在此示例中，我们将创建两个超链接，如果我们点击这些链接，一个将打开默认的邮件应用程序以将邮件发送到 href 属性中提到的邮件 ID。另一个将打开呼叫功能以呼叫 href 属性中提到的号码。

Open Compiler

<!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>

创建内部页面锚点

在下面的示例中，我们正在创建页面内导航链接。

Open Compiler

<!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 属性，我们可以通过点击链接或特定图片来从浏览器下载本地图片。

Open Compiler

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML a Tag</title>
</head>

<body>
    <div>
        <!-- Downloading attached Linked file-->
        <p>
            Click the 
            <a href=
"https://tutorialspoint.com/images/logo.png"
               name=‘image’ download>
                 Download
            </a> 
            Button
        </p>

    </div>
</body>

</html>

支持的浏览器

标签
a	是	是	是	是	是

html_tags_reference.htm

打印页面