链接和锚标签的区别

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

HTML `<link>`标签

在HTML中，<link>标签用于链接外部资源，比如CSS样式表，或者向网站添加一个网页标题旁边显示的小图标（favicon）。它在页面上不可见。

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

示例

在以下示例中，我们尝试使用HTML < link>标签来链接我们的HTML文档中的外部CSS文件。下面是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://www.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 href="www.example.com">虚拟网站</a>`