当前位置：首页 > article >正文

每天总结一个html标签——a标签

article 2025/9/15 21:02:21

文章目录

- 一、定义与使用说明
- 二、支持的属性
- 三、支持的事件
- 四、默认样式
- 五、常见用法
- - 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>

每天总结一个html标签——a标签

文章目录一、定义与使用说明二、支持的属性三、支持的事件四、默认样式五、常见用法1. 文本链接2. 图片链接3. 导航栏在前端开发中，a标签（锚点标签）是最常用的HTML标签之一，主要用于创建超链接，实现页面间的跳转或下…...

编程日记 2025/9/7 7:36:56

在Babylon.js中创建3D文字：简单而强大的方法

引言在3D场景中添加文字是许多WebGL项目的常见需求。Babylon.js提供了多种创建3D文字的方法，其中使用TextBlock结合平面网格是一种简单而高效的方式。本文将介绍如何使用Babylon.js的GUI系统在3D空间中创建美观的文字效果。方法概述 Babylon.js的GUI系统允许我…...

编程日记 2025/8/14 22:51:47

CSS 渐变完全指南：从基础概念到实战案例（线性渐变/径向渐变/重复渐变）

一、什么是 CSS 渐变？ 渐变是网页设计中常用的视觉效果，指两种或多种颜色之间的平滑过渡。CSS 提供了强大的渐变功能，无需依赖图片即可创建复杂的色彩过渡效果，主要分为线性渐变和径向渐变两大类。二、线性渐变（Line…...

编程日记 2025/8/2 1:44:12

初识Docker：容器化技术的入门指南

初识Docker：容器化技术的入门指南一、Docker是什么：容器化技术的核心概念二、Docker的核心优势2.1 环境一致性2.2 高效部署与快速迭代2.3 资源利用率高三、Docker的安装与基本使用3.1 安装Docker3.2 Docker基本概念3.3 第一个Docker容器体验四、Docke…...

编程日记 2025/7/31 2:03:21

android binder（1）基本原理

一、IPC 进程间通信（IPC，Inter-Process Communication）机制，用于解决不同进程间的数据交互问题。不同进程之间用户地址空间的变量和函数是不能相互访问的，但是不同进程的内核地址空间是相同和共享的，我们可…...

编程日记 2025/9/7 7:36:46

行业分析---小米汽车2025第一季度财报

1 背景最近几年是新能源汽车的淘汰赛，前短时间比亚迪再次开始了降价，导致一片上市车企的股价大跌，足见车圈现在的敏感度。因此笔者会一直跟踪新势力车企的财报状况，对之前财报分析感兴趣的读者朋友可以参考以下博客：…...

编程日记 2025/9/8 18:03:29

边缘计算网关支撑医院供暖系统高效运维的本地化计算与边缘决策

一、项目背景医院作为人员密集的特殊场所，对供暖系统的稳定性和高效性有着极高的要求。其供暖换热站传统的人工现场监控方式存在诸多弊端，如人员值守成本高、数据记录不及时不准确、故障发现和处理滞后、能耗难以有效监测和控制等，难以满足…...

编程日记 2025/9/7 7:36:39

GO环境配置

Go 语言环境安装指南（Windows 版） 以下是在 Windows 系统上安装 Go 语言环境的完整步骤： 准备工作操作系统要求：Windows 7 或更高版本（推荐 Windows 10/11）系统架构：64位&#xff08…...

编程日记 2025/8/24 22:03:35

`docker run`、`docker start`、`docker exec` 区别

🧠 先给你一句话理解： docker run ≈ docker create docker start docker exec（第一次） ✅ 三者的区别一览表命令作用类比真实生活常用场景docker run创建启动执行命令（一次性）你买了一台新电脑&am…...

编程日记 2025/7/7 20:22:33

简单了解string类的特性及使用（C++）

string的特性 string类不属于STL，它属于标准库但由于它具有数据结构的特性，所以从归类的角度，可以将string类归类到容器里面去在C标准库中，std::string 是一个特化的类型，实际上是 std::basic_string 的别名。std…...

编程日记 2025/9/11 1:59:46

FastAPI+Pyomo实现线性回归解决饮食问题

之前在 FastAPI介绍-CSDN博客中介绍过FastAPI，在 Pyomo中线性规划接口的使用-CSDN博客中使用Pyomo解决饮食问题，这里将两者组合，即FastAPI在服务器端启动，通过Pyomo实现线性回归；客户端通过浏览器获取饮食的最优解。…...

编程日记 2025/9/12 8:52:46

16.FreeRTOS

目录第1章 FreeRTOS 实时操作系统 1.1 认识实时操作系统 1.1.1 裸机的概念 1.1.2 操作系统的概念 1.2 操作系统的分类 1.3 常见的操作系统 1.4 认识实时操作系统 1.4.1 可剥夺型内核与不可剥夺型内核 1.4.2 嵌入式操作系统的作用 1.4.3 嵌入式操作系统的发展 1.4.4…...

编程日记 2025/9/9 7:58:48

Redis最佳实践——购物车优化详解

Redis在电商购物车高并发读写场景下的优化实践一、购物车业务场景分析典型操作特征读/写比例 ≈ 8:2高峰QPS可达10万单用户最大商品数500操作类型：增删改查、全选/反选、数量修改技术挑战高并发下的数据一致性海量数据存储与快速访问实时价格计算与库存校验分…...

编程日记 2025/9/7 7:36:24

【计算机网络】传输层UDP协议

🔥个人主页🔥：孤寂大仙V 🌈收录专栏🌈：计算机网络 🌹往期回顾🌹： 【计算机网络】应用层协议Http——构建Http服务服务器 🔖流水不争，争的是滔滔不…...

编程日记 2025/9/11 0:18:04

安全漏洞修复导致SpringBoot2.7与Springfox不兼容

项目基于 springboot2.5.2 实现的，用 springfox-swagger2 生成与前端对接的 API 文档；pom.xml 中依赖如下 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId>&l…...

编程日记 2025/9/10 10:25:28

从法律层面剖析危化品证书：两证一证背后的安全逻辑

《安全生产法》第 24 条明确规定，危化品单位主要负责人和安全管理人员 “必须考核合格方可上岗”。这并非仅仅是行政要求，而是通过法律来筑牢安全防线。在某危化品仓库爆炸事故中，由于负责人未持证，导致事故责任升级，企…...

编程日记 2025/9/7 7:36:11

C语言——获取变量所在地址（uint8和uint32的区别）

前言： 1.使用uint8 *的原因在C语言中，获取或操作一个4字节地址（指针）时使用uint8_t*（即unsigned char*）而不是uint32_t*，主要基于以下关键原因： 1.1. 避免违反严格别名规则&…...

编程日记 2025/8/13 22:04:47

2 Studying《Effective STL》

目录 0 引言 1 容器 1. 慎重选择容器类型 3. 确保容器中的对象副本正确且高效 4. 调用empty()而不是检查size()是否为0 5. 区间成员函数优先于与之对应的单元素成员函数 7. 如果容器中包含了通过new创建的指针，切记析构前将指针delete掉 9. 慎重选择删除元素…...

编程日记 2025/7/14 16:21:35

深入理解复数加法与乘法：MATLAB演示

在学习复数的过程中，复数加法与乘法是两个非常基础且重要的概念。复数的加法和乘法操作与我们常见的实数运算有所不同，它们不仅涉及到数值的大小，还有方向和相位的变化。在这篇博客中，我们将通过MATLAB演示来帮助大家更好地理解复…...

编程日记 2025/9/11 11:49:21

【设计模式-3.6】结构型——桥接模式

说明：本文介绍结构型设计模式之一的桥接模式定义桥接模式（Bridge Pattern）又叫作桥梁模式、接口（Interface）模式或柄体（Handle and Body）模式，指将抽象部分与具体实现部分分离&a…...

编程日记 2025/9/7 7:36:04

【前端】性能优化篇

长期更新，建议关注收藏点赞。目录性能优化具体指标监控工具/系统解决方案htmlcssjsvuereact包体积静态资源图片优化白屏首屏加载速度缓存优化网络优化web worker动画面试题汇总怎么实现无限加载，如果有一亿条数据怎么优化性能优化本文仅是列出常见…...

编程日记 2025/9/10 16:26:41

【redis实战篇】第六天

摘要： 本文介绍了基于Redis的秒杀系统优化方案，主要包含两部分：1）通过Lua脚本校验用户秒杀资格，结合Java异步处理订单提升性能；2）使用Redis Stream实现消息队列处理订单。方案采用Lua脚本保证库…...

编程日记 2025/8/2 23:41:48

力扣题解654：最大二叉树

一、题目内容题目要求根据一个不重复的整数数组 nums 构建最大二叉树。最大二叉树的构建规则如下： 创建一个根节点，其值为 nums 中的最大值。递归地在最大值左边的子数组前缀上构建左子树。递归地在最大值右边的子数组后缀上构建右子树。返回由 nums 构…...

编程日记 2025/9/7 7:35:25

项目仓库：https://gitee.com/bossDuy/hand-tear-collection-series 基于b站up生生大佬：https://www.bilibili.com/video/BV1Kp5tzGEc5/?spm_id_from333.788.videopod.sections&vd_source4cda4baec795c32b16ddd661bb9ce865 LinkedList package com…...

编程日记 2025/8/16 16:20:26

Android bindservice绑定服务，bindServiceAsUser补充

Android bindservice绑定服务，并同步返回service对象的两个方法-CSDN博客补充反射并调用bindServiceAsUser的方法： private boolean initService2(final Context context){if(deviceServicenull){latch new CountDownLatch(1);HandlerThread handler…...

编程日记 2025/9/12 13:37:22

[蓝桥杯]交换次数

交换次数题目描述 IT 产业人才需求节节攀升。业内巨头百度、阿里巴巴、腾讯（简称 BAT ）在某海滩进行招聘活动。招聘部门一字排开。由于是自由抢占席位，三大公司的席位随机交错在一起，形如：BABTATT，这使…...

编程日记 2025/9/12 17:04:55

95套HTML高端大数据可视化大屏源码分享

概述在大数据时代，数据可视化已成为各行各业的重要需求。这里精心整理了95套高端HTML大数据可视化大屏源码，这些资源采用现代化设计风格，可帮助开发者快速构建专业的数据展示界面。主要内容 1. 设计风格与特点采用…...

编程日记 2025/9/7 7:35:13

系统架构设计综合知识与案例分析

system-architect 软考高级-系统架构设计师-综合知识与案例分析：软件工程、网络工程、结构化分析方法、面向对象分析方法、软件质量数量、传统数据库、分布式数据库、系统架构等。 —— 2025 年 3 月 20 日甲辰年二月二十一春分目录 system-architect1、计算机基…...

编程日记 2025/8/7 23:43:26

scale up 不能优化 TCP 聚合性能

scale up 作为一种系统扩展优化的方法，旨在提高系统组件的执行效率，比如替换更高性能的硬件或算法。是否可以此为依据优化 TCP 呢，例如通过多条路径聚合带宽实现吞吐优化(对，还是那个 MPTCP)，答案是否定的。因为 TCP…...

编程日记 2025/9/14 11:11:02

Python-matplotlib库之核心对象

matplotlib库之核心对象 FigureFigure作用Figure常用属性Figure常用方法Figure对象的创建隐式创建（通过 pyplot）显式创建使用subplots()一次性创建 Figure 和 Axes Axes（绘图区）Axes创建方式Axes基本绘图功能Axes绘图的常用参数Ax…...

编程日记 2025/9/7 21:09:16