每天总结一个html标签——a标签
文章目录
- 一、定义与使用说明
- 二、支持的属性
- 三、支持的事件
- 四、默认样式
- 五、常见用法
- 1. 文本链接
- 2. 图片链接
- 3. 导航栏
在前端开发中，
a标签（锚点标签）是最常用的HTML标签之一，主要用于创建超链接，实现页面间的跳转或下载资源。
一、定义与使用说明
a标签的基本语法如下：
<a href="目标地址">链接文本</a>
href属性指定跳转的目标地址，可以是网页、文件、邮箱等。- 链接文本是用户可见并可点击的部分。
二、支持的属性
a标签常用属性如下：
| 属性名 | 值 | 描述 |
|---|---|---|
| download | filename | 指定下载文件的名称。 当存在此属性时，点击链接将下载而不是导航。 仅适用于同源 URL。 |
| href | 绝对URL | 用于链接到其他网站的完整URL |
| 相对URL | 用于链接到同一网站内的其他页面 | |
| #fragment | 用于页面内部锚点跳转 | |
| mailto:email | 用于打开邮件客户端 | |
| tel:number | 用于拨打电话 | |
| javascript:code | 用于执行JavaScript代码 | |
| hreflang | 语言代码（如en、zh-CN） | 说明链接文档的语言 |
| media | 媒体查询字符串 | 规定目标 URL 是为何种媒介/设备优化的 |
| rel | alternate | 表示文档的替代版本 |
| author | 指向文档作者页面 | |
| bookmark | 指向最近的章节标题 | |
| help | 指向帮助文档 | |
| license | 指向许可证信息 | |
| next | 指向系列文档的下一篇 | |
| nofollow | 告诉搜索引擎不要追踪此链接 | |
| noreferrer | 不发送引用来源信息 | |
| noopener | 防止新页面访问window.opener | |
| prev | 指向系列文档的上一篇 | |
| search | 指向文档的搜索工具 | |
| tag | 表示当前文档的关键字 | |
| target | _blank | 在新窗口/标签页中打开 |
| _self | 在当前窗口/标签页中打开 | |
| _parent | 在父框架中打开,如果没有父框架，与_self相同 | |
| _top | 在整个窗口中打开 | |
| framename | 在指定的框架中打开 | |
| type | MIME 类型 | 规定目标文档的 MIME 类型 |
三、支持的事件
a标签支持大多数常见的DOM事件，常用的有：
onclick：点击时触发onmouseover：鼠标移入时触发onmouseout：鼠标移出时触发onfocus：获得焦点时触发onblur：失去焦点时触发
示例：
<a href="#" onclick="alert('你点击了链接！')">点击提示</a>
四、默认样式
a标签默认是行内元素（inline）：
不独占一行不可设置宽高，宽高由内容撑开上下边距通常不会生效，只能设置左右边距
/*-webkit-any-link:
WebKit和Blink内核浏览器（如Chrome、Safari）中内置的一个CSS伪类选择器，用于匹配所有“链接”元素*/
a:-webkit-any-link{
/*-webkit-link并不是标准的颜色名称，
而是WebKit浏览器内部定义的一个特殊关键字，通常对应于未访问链接的默认蓝色（如 #0000EE）*/color: -webkit-link;cursor: pointer;text-decoration: underline;
}
五、常见用法
1. 文本链接
<head><style>a{color: black;text-decoration: none;font-size: 20px;font-weight: 500;border-bottom: 2px solid transparent;}a:hover{border-color: #e74c3c;}</style>
</head>
<body><a href="kunighting.blog.csdn.net">我的博客</a>
</body>
2. 图片链接
<head>
<style>a {display: inline-block;position: relative;}img {width: 100px;height: 80px;}a::after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: #e74c3c;transition: width 0.3s ease;}a:hover::after {width: 100%;}
</style>
</head>
<body>
<a href="https://kunighting.blog.csdn.net"><img src="./csdn.png">
</a>
</body>
3. 导航栏
<style>
nav {background: #2c3e50;padding: 15px;border-radius: 8px;display: flex;justify-content: center;gap: 20px;}nav a {color: #ecf0f1;text-decoration: none;padding: 12px 25px;font-size: 16px;font-weight: 500;border: 2px solid transparent;border-radius: 6px;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);position: relative;background: rgba(255, 255, 255, 0.1);}nav a.active,nav a:hover {background: rgba(255, 255, 255, 0.2);border-color: #e74c3c;transform: scale(1.05);}
</style>
<nav><a href="/home">首页</a><a href="/about">关于我们</a><a href="/contact">联系我们</a>
</nav>