链接和锚标签的区别




链接和锚标签的区别

在开发网站时,我们可能会遇到需要创建指向另一个网页或网页的特定部分的超链接的情况(这些链接可点击)。此外,可能还需要使用外部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>



HTML 精选笔记
怎样自动将网页重定向到另一个URL如何在具有隐藏溢出的元素中显示省略号?如何使HTML的< dt >和< dd >元素保持同行HTML 如何使文本输入框不可编辑如何增加点线边框之间的间距?如何在打印大型HTML表格时处理分页问题如何将水平线分成多个部分HTML 如何在两列中显示无序列表HTML 如何显示具有嵌套计数器的有序列表如何在HTML中禁用自动换行如何禁用HTML表单和输入字段上的浏览器自动填充和自动完成如何强制< Div>元素的内容保持在同一行上?如何控制项目符号和< li>元素之间的间距HTML 如何创建mailto表单如何创建一个带可点击标签的复选框?HTML 如何创建带有换行的按钮如何创建一个具有固定左列和可滚动主体的HTML表格HTML 如何创建一个具有固定宽度右列的两栏Div布局如何在HTML中创建一个水滴形状如何在HTML中创建带有短划线的列表HTML 如何创建一个无换行或水平间距的隐藏 divHTML 如何给单选按钮分配一个已选中的初始值HTML 如何使文件输入类型仅接受图像文件HTML 如何只允许输入正数如何在HTML中设置单元格的宽度和高度如何从一个HTML页面重定向如何在HTML中创建表格边框HTML 如何设置网页的背景图片如何在HTML中创建带有数字编号的有序列表如何限制HTML输入框只接受数字输入HTML的优缺点使用table标签及其属性设计一个表格如何更改标签的Title属性的样式HTML 如何在元素之间添加空白?如何在HTML中创建表格?如何在HTML文件中包含另一个HTML文件?如何在HTML中更改链接的颜色?HTML中的表格rowspan和colspan是什么?如何在HTML中设置单元格间距?如何调整iframe的宽度和高度以适应其中的内容HTML?如何在HTML中创建多行文本输入(文本区域)?如何在HTML中设置标题的对齐方式?如何在HTML中合并表格列?如何使用HTML表单发送电子邮件?如何在HTML页面中使用动画图片?如何在HTML中合并表格单元格?如何在HTML中去除链接的下划线?如何使用HTML代码嵌入视频?如何限制表单输入文本域中允许的字符数?如何在HTML中给文字添加下划线?如何在HTML页面中创建页面链接如何使用li元素创建项目符号如何在HTML中采用移动优先的方式使用媒体查询?如何在HTML页面插入图片?如何在HTML中居中对齐表格单元格中的文本?如何在HTML中居中文本?解释HTML的布局结构RGB vs RGBA颜色格式的区别普通链接和活动链接之间的区别链接和锚标签的区别blink标记的替代方法使用CSS内容添加HTML实体如何在 HTML 中设置字体颜色?如何在HTML页面中插入超链接?如何在HTML中设置文本对齐?如何在HTML中设置背景色?如何在HTML中使用图像作为链接?