关于A标签的几种用法及属性
一.a标签的四个状态:
1.link'未访问状态
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{color: blue;}
</style>
</head>
<body>
<a href="###">这是一个a标签</a>
</body>
</html>
2.visited访问过状态:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:visited{color: black;}
</style>
</head>
<body>
<a href="###">这是一个a标签</a>
</body>
</html>
变成黑色点击不变色
3.hover鼠标经过状态:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:hover{color: orange;}
</style>
</head>
<body>
<a href="###">这是一个a标签</a>
</body>
</html>
鼠标滑过变成橘黄色.
4.active鼠标按住状态:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:active{color: green;}
</style>
</head>
<body>
<a href="###">这是一个a标签</a>
</body>
</html>
鼠标长摁变成绿色.
二.用a标签实现跳转:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="#1F">三国演义</a>
<a href="#2F">水浒传</a>
<a href="#3F">西游记</a>
<a href="#4F">红楼梦</a>
<a href="#5F">封神演义</a>
<hr />
<a name="1F"></a>
掉蚕丝吕布
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="2F"></a>
阎婆惜
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="3F"></a>
唐僧
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="4F"></a>
林黛玉
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="5F"></a>
哪吒
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
点击相应的a标签实现跳转.
注:
去a标签下划线
a{
/*去除a标签下划线*/
text-decoration: none;
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！