普通链接和活动链接之间的区别




普通链接和活动链接之间的区别

超链接,也称为链接,是现今网站中至关重要的组件。这些链接可以被点击,并且可用于在源网页与不同页面或同一网页中的不同部分之间导航。

在大多数网站中,链接会显示为下划线和不同的颜色。链接分为以下几种类型:

  • 未访问的链接



  • 已访问的链接

  • 活动链接

让我们在本文中进一步讨论上述链接,并提供适当的示例。

未访问的链接

在HTML中,未访问的链接是用户尚未点击的超链接。默认情况下,未访问的链接将以蓝色和下划线形式呈现。然而,我们可以使用CSS属性( a:link )自定义样式。

示例

在下面的示例中,我们创建了一个没有使用CSS属性进行任何自定义的超链接。

<html>
<head>
   <title>Difference between normal links and active links</title>
</head>
<body>
   <h3>Click here to visit → <a href="https://www.tutorialspoint.com/">Tutorialspoint</a>
   </h3>
</body>
</html>

从输出结果中可以看出,超链接以默认的蓝色和带有下划线的样式显示。

访问过的链接

访问过的链接是用户点击过的超链接。这些链接表示之前已经访问过。默认情况下,在大多数浏览器中,访问过的链接将以紫色和带有下划线的样式显示出来。然而,我们可以使用CSS属性(a:visited)自定义访问过的链接的样式。

例子

在下面的例子中,我们创建了一个超链接,并使用CSS属性自定义了样式。

<html>
<head>
   <title>Difference between normal links and active links</title>
   <style>
      a:visited {
         color: purple;
         background-color: transparent;
         text-decoration: none;
      }
   </style>
</head>
<body>
   <h3>Click here to visit → <a href="https://www.tutorialspoint.com/">Tutorialspoint</a>
   </h3>
</body>
</html>

在点击链接后,它会将您重定向到目标页面,如果您返回原始页面,您会发现链接的颜色变为紫色。这表示您已经点击了链接并访问了目标页面。

活跃链接

活跃链接是用户当前正在与之交互的超链接。每当用户按住鼠标按钮不放,或者右键单击链接时,链接的颜色会变为红色,这时链接处于活动状态。 活动状态是临时的,在用户释放鼠标按钮后即结束。但是,我们可以使用CSS属性(a:active)自定义活动链接的样式。

示例

在以下示例中,我们创建了一个超链接,并使用CSS自定义了其样式。

<html>
<head>
   <title>Difference between normal links and active links</title>
   <style>
      a:hover {
         color: red;
         background-color: transparent;
         text-decoration: underline;
      }
      a:active {
         color: yellow;
         background-color: transparent;
         text-decoration: underline;
      }
   </style>
</head>
<body>
   <h3>Click here to visit → <a href="https://www.tutorialspoint.com/">Tutorialspoint</a>
   </h3>
</body>
</html>

如果你将鼠标悬停在链接上或右键点击链接,它的颜色会变为红色。这是用户与链接互动时发生的情况。





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中使用图像作为链接?