链接标签和锚点标签的区别


在开发网站时,我们可能会遇到需要创建指向另一个网页或网页特定部分的超链接的情况(这些链接是可点击的)。此外,我们可能还需要使用外部 CSS 对网站内容添加样式(这些不可点击)。这些行为可以通过使用 HTML 的 <link> 和 <a> 锚点标签来实现。

HTML <link> 标签

在 HTML 中,<link> 标签用于链接外部资源,例如 CSS 样式表,或向网站添加 favicon(浏览器选项卡中页面标题旁边显示的小图像)。它不是页面上的可见内容。

以下是一些最常与 HTML <link> 标签一起使用的属性:href、hreflang、rel、title、type 等。

示例

在以下示例中,我们尝试使用 HTML 的 <link> 标签将外部 CSS 文件链接到我们的 HTML 文档中。以下是 HTML 文档 -

<!DOCTYPE html>
<html>
<head>
   <title>Link Tag in HTML</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
   <div>
      <h2>Hello, tutorialspoint</h2>
      <p>Tutorialspoint.com is a dedicated website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects. This website was launched by an AMU alumni, Mr. Mohtashim, with a single tutorial on HTML in year 2006.</p>
   </div>
</body>
</html>

以下是外部 CSS 文件 -

body {
   background-color: bisque;
}
h2 {
   color: green;
}
div {
   text-align: center;
}

输出

当我们执行 HTML 文件时,我们可以看到背景颜色和 <h2> 元素发生的样式变化。这些行为是通过将外部 CSS 文件链接到我们的 HTML 文档来实现的。

HTML 锚点 <a> 标签

在 HTML 中,锚点 <a> 标签用于在网站上创建超链接。此超链接用于从一个网页链接到另一个网页或同一网页的某个部分。以下是一些最常与 HTML 锚点 <a> 标签一起使用的属性:href、hreflang、media、ping、rel、type 等。

示例

在以下示例中,我们使用 HTML 锚点 <a> 标签创建指向另一个网页的超链接。

<!DOCTYPE html>
<html>
<head>
   <title>Anchor tag in HTML</title>
</head>
<body>
   <a href="https://tutorialspoint.com/index.htm"> Click here for tutorialspoint...</a>
</body>
</html>

正如我们在下面的输出中看到的,<a> 标签创建了一个指向 tutorialspoint 网站的超链接。

HTML <link> 和锚点 <a> 标签的区别 -

下表展示了 HTML 中 <link> 和 <a> 标签的区别 -

<link> 标签

<a> 锚点标签

HTML <link> 标签用于将外部文档链接到我们的 HTML 文档。

HTML <a> 锚点标签用于创建指向其他网页或网页特定部分的超链接。

此标签用于 <head> 部分。

此标签用于 <body> 部分。

它不可见且不可点击,因为它仅用于内部目的。

它以超链接格式显示,标签内提供了名称,用户可以与其交互。

由于它是一个空元素,因此不能包含嵌套元素。

由于它不是空元素,因此它可能包含多个嵌套项。

链接标签 -<head><link rel="stylesheet" type="text/css" href="file_name.css"></head>

<a> 锚点标签 -<a href="www.example.com">虚拟网站</a>

更新于: 2023年8月29日

4K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告