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>

支持的浏览器

浏览器 Chrome Edge Firefox Safari Opera
<a> Yes Yes Yes Yes Yes