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

HTML常见标签——超链接a标签

news 2026/2/8 11:40:08

一、a标签简介

二、a标签属性

        href属性

        target属性

三、a标签的作用

        利用a标签进行页面跳转

        利用a标签返回页面顶部以及跳转页面指定区域

        利用a标签实现文件下载

一、a标签简介

        <a>标签用于做跳转、导航，是双标签，记作<a></a>，它是行内标签，不可以直接设置宽度高度，特殊的是，作为行内标签，它可以嵌套文本、行内元素、块级元素。

二、a标签属性

        href属性

        <a>标签中具有href属性，属性用于填写页面或者文件地址，如果href 设置为“#” ，表示不会跳转到其他页面，停留在本页面。它的语法是：

<a href="#"></a>
<a href="XXX.html"></a>

        target属性

        <a> 标签的 target 属性规定在何处打开链接文档。它的语法是：

<a target="_blank|_self|_parent|_top|framename">

        target的值和属性如下，一般常用的是前两个，也就是创建新窗口打开被链接页面或者在当前窗口打开被链接页面。

值        描述
_blank在新窗口打开被链接的页面
_self默认设置，在当前的页面/框架打开被链接的页面
_parent在父框架集中打开被链接的页面
_top在整个窗口中打开被链接的页面
framename在指定框架中打开被链接的页面

三、a标签的作用

        a标签有三个作用

1. 跳转页面

2. 返回页面顶部或者跳转页面指定区域

3. 下载文件

        利用a标签进行页面跳转

        我们设置一个test目录，test目录最外面存放home.html文件，在test目录下有一个pages目录，存放introduction.html和my.html文件。

        我们在home.html写一个<a>标签，链接到其他的页面，代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>home</title>
</head><body><h1>home</h1><a href="./pages/introduction.html">introduction</a><a href="./pages/my.html">my</a>
</body></html>

        界面效果如下，我们可以看到在home.html界面中，出现了introduction和my的超链接。

        分别点击两个超链接，均可完成跳转，此时是在当前窗口打开的，没有一个新窗口，且访问过的链接颜色会发生变化。

        利用a标签返回页面顶部以及跳转页面指定区域

        如果将<a>标签href属性设置为“#”，可以跳转到页面顶部，我们设置一个盒子，撑开页面内容，再设置一个超链接，链接的href属性设置为“#”，代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 2000px;}</style>
</head><body><div></div><a href="#">点我跳转回到顶部</a>
</body></html>

       我们点击超链接可以跳转到页面顶部，效果如下：

        “#”也叫做锚点，可以跳转到页面指定区域，我们设置三个盒子，并给不同颜色，给盒子设置id属性，a标签的href属性设置为“#盒子名称”即可返回到对应的盒子的位置。代码如下：

<body><style>.box-1 {width: 400px;height: 400px;background-color: saddlebrown;}.box-2 {width: 600px;height: 600px;background-color: rgb(99, 107, 107);}.box-3 {width: 1000px;height: 1000px;background-color: skyblue;}</style><div class="box-1" id="box1">box1</div><div class="box-2" id="box2">box2</div><div class="box-3" id="box3">box3</div><a href="#box1">点击跳转到box1</a><a href="#box2">点击跳转到box2</a><a href="#box3">点击跳转到box3</a></body>

        效果如下：

        利用a标签实现文件下载

        <a>标签还可以用于实现文件下载功能，代码如下：

<!-- 下载素材 -->
<a href="./img/1.jpg" download="1.jpg">点击下载素材</a>

         效果如下：

相关文章：

HTML常见标签——超链接a标签

一、a标签简介 二、a标签属性 href属性 target属性 三、a标签的作用 利用a标签进行页面跳转 利用a标签返回页面顶部以及跳转页面指定区域 利用a标签实现文件下载 一、a标签简介 <a>标签用于做跳转、导航&#xff0c;是双标签&#xff0c;记作<a></a>&#…...

编程日记 2024/7/27 15:27:50

Python 爬虫入门（一）：从零开始学爬虫 「详细介绍」

Python 爬虫入门&#xff08;一&#xff09;&#xff1a;从零开始学爬虫 「详细介绍」 前言1.爬虫概念1.1 什么是爬虫&#xff1f;1.2 爬虫的工作原理 2. HTTP 简述2.1 什么是 HTTP&#xff1f;2.2 HTTP 请求2.3 HTTP 响应2.4 常见的 HTTP 方法 3. 网页的组成3.1 HTML3.2 CSS3.…...

编程日记 2024/7/27 15:26:49

Linux嵌入式学习——数据结构——概念和Seqlist

数据结构 相互之间存在一种或多种特定关系的数据元素的集合。 逻辑结构 集合&#xff0c;所有数据在同一个集合中&#xff0c;关系平等。 线性&#xff0c;数据和数据之间是一对一的关系。数组就是线性表的一种。 树&#xff0c; 一对多 图&#xff0c;多对多 …...

编程日记 2024/7/27 15:24:47

iOS ------ Block的相关问题

Block的定义 Block可以截获局部变量的匿名函数&#xff0c; 是将函数及其执行上下文封装起来的对象。 Block的实现 通过Clang将以下的OC代码转化为C代码 // Clang xcrun -sdk iphoneos clang -arch arm64 -rewrite-objc main.m//main.m #import <Foundation/Foundation.…...

编程日记 2024/7/27 15:21:43

conda issue

Conda 是一个跨平台、通用的二进制包管理器。它是 Anaconda 安装使用的包管理器&#xff0c;但它也可能用于其他系统。Conda 完全用 Python 编写&#xff0c;并且是 BSD 许可的开源。通用意味着大部分的包都可以用它进行管理&#xff0c;很像一个跨平台版本的apt或者yum&#x…...

编程日记 2024/7/27 15:20:42

为了解决地图引入鉴权失败的解决方案

在以下文件中需要添加相应代码 app/controller/CollageProduct.php app/view/designer_page/designer_editor.html app/view/designer_page/designer.html app/controller/Freight.php app\controller\Business.php app\controller\DesignerPage.php 只有这样才能保证htt…...

编程日记 2024/7/27 15:19:41

[ptrade交易实战] 第十八篇 期货查询类函数和期货设置类函数

前言 今天主要和大家分享的是期货查询类的函数和期货设置类的函数&#xff01; 具体的开通渠道可以看文章末尾&#xff01; 一、get_margin_rate—— 获取用户设置的保证金比例 保证金是期货交易中的一个重点&#xff0c;这个函数就是用来获取我们设置的保证金比例的&#…...

编程日记 2024/7/27 15:18:39

STM32智能家居控制系统教程

目录 引言环境准备智能家居控制系统基础代码实现&#xff1a;实现智能家居控制系统 4.1 数据采集模块 4.2 数据处理与分析模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;家居监测与优化问题解决方案与优化收尾与总结 1. 引言 智能家居控制系统通…...

编程日记 2024/7/27 15:17:38

FPGA 中的 IOE与IO BANK

IO bank&#xff08;输入/输出bank&#xff09; 定义&#xff1a;IO bank 是 FPGA 中一组 IOE 的集合&#xff0c;通常共享相同的电源电压、时钟域和时序管理。每个 IO bank 包含多个 IOE&#xff0c;它们可以根据需要分配给不同的信号处理任务。作用&#xff1a;IO bank 的存…...

编程日记 2024/7/27 15:15:37

ADetailer模型+Stable Diffusion的inpainting功能是如何对遮罩区域进行修复生成的ADetailer

模型选则&#xff1a; face_yolov8n.pt 和 face_yolov8s.pt&#xff1a; 用途&#xff1a;用于人脸检测。特点&#xff1a;YOLOv8n 是轻量级版本&#xff0c;适合资源有限的设备&#xff1b;YOLOv8s 是标准版本&#xff0c;检测精度更高。 hand_yolov8n.pt&#xff1a; 用途&am…...

编程日记 2024/7/27 15:12:34

【博士每天一篇文献-综述】2024机器遗忘最新综述之一：An overview of machine unlearning

1 介绍 年份&#xff1a;2024 作者&#xff1a; 期刊&#xff1a; High-Confidence Computing&#xff08;2区&#xff09; 引用量&#xff1a;0 Li C, Jiang H, Chen J, et al. An overview of machine unlearning[J]. High-Confidence Computing, 2024: 100254 本文详细提供…...

编程日记 2024/7/27 15:11:33

【机器学习】Jupyter Notebook如何使用之基本步骤和进阶操作

引言 Jupyter Notebook 是一个交互式计算环境&#xff0c;它允许创建包含代码、文本和可视化内容的文档 文章目录 引言一、基本步骤1.1 启动 Jupyter Notebook1.2 使用 Jupyter Notebook 仪表板1.3 在笔记本中工作1.4 常用快捷键1.5 导出和分享笔记本 二、进阶用法2.1 组织笔…...

编程日记 2024/7/27 15:06:28

C++ | Leetcode C++题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; class Solution { public:// 判断是否为完全平方数bool isPerfectSquare(int x) {int y sqrt(x);return y * y x;}// 判断是否能表示为 4^k*(8m7)bool checkAnswer4(int x) {while (x % 4 0) {x / 4;}return x % 8 7;}int numSquares(i…...

编程日记 2024/7/27 15:04:27

Vue 3 响应式高阶用法之 `shallowRef()` 详解

Vue 3 响应式高阶用法之 shallowRef() 详解 文章目录 Vue 3 响应式高阶用法之 shallowRef() 详解简介一、使用场景1.1 深层嵌套对象的性能优化1.2 需要部分响应式的场景 二、基本使用2.1 引入 shallowRef2.2 定义 shallowRef 三、功能详解3.1 浅层响应式3.2 与 ref 的对比 四、…...

编程日记 2024/7/27 15:01:22

流量录制与回放：jvm-sandbox-repeater工具详解

在软件开发和测试过程中&#xff0c;流量录制与回放是一个非常重要的环节&#xff0c;它可以帮助开发者验证系统在特定条件下的行为是否符合预期。本文将详细介绍一款强大的流量录制回放工具——jvm-sandbox-repeater&#xff0c;以及如何利用它来提高软件测试的效率和质量。 …...

编程日记 2024/7/27 14:57:18

内网渗透—内网穿透工具NgrokFRPNPSSPP

前言 主要介绍一下常见的隧道搭建工具&#xff0c;以此来达到一个内网穿透的目的。简单说一下实验滴环境吧&#xff0c;kali作为攻击机&#xff0c;winserver2016作为目标靶机。 kali 192.168.145.171 winserver2016 10.236.44.127 显然它们处于两个不同的局域网&#xff0c…...

编程日记 2024/7/27 14:56:17

嵌入式中传感器数据处理方法

大家好，在传感器使用中，我们常常需要对传感器数据进行各种整理，让应用获得更好的效果，以下介绍几种常用的简单处理方法： 加权平滑：平滑和均衡传感器数据，减小偶然数据突变的影响。 抽取突变：去除静态和缓慢变化的数据背景，强调瞬间变化。 简单移动平均线：保留数据流最…...

编程日记 2024/7/27 14:52:13

生成式 AI 的发展方向，是 Chat 还是 Agent？

据《福布斯》报道&#xff0c;商业的未来是自动化。他们报告说&#xff0c;自动化的应用是不可避免的&#xff0c;“工人们即将被一个圈子和一套规则包围&#xff0c;要严格遵守&#xff0c;不能偏离。得益于聊天机器人ChatGPT于2022年11月推出所带来的强劲加持&#xff0c;202…...

编程日记 2024/7/27 14:50:11

金字塔监督在人脸反欺骗中的应用

介绍 论文地址&#xff1a;https://arxiv.org/pdf/2011.12032.pdf 近年来&#xff0c;人脸识别技术越来越普及。在智能手机解锁和进出机场时&#xff0c;理所当然地会用到它。人脸识别也有望被用于管理今年奥运会的相关人员。但与此同时&#xff0c;人们对人脸欺骗的关注度也…...

编程日记 2024/7/27 14:46:08

vue3——两种利用自定义指令实现防止按钮重复点击的方法

方法一&#xff1a;利用定时器设置时间&#xff0c;下方代码设置时间为1秒 但是有个缺点&#xff1a;请求如果很慢&#xff0c;1秒钟还没有好&#xff0c;那么该方法就没用了 // 利用定时器&#xff1a;1秒之后才能再次点击app.directive(preventReClick, {mounted: (el, bind…...

编程日记 2024/7/27 14:43:05

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2026/2/6 5:38:46

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/2/8 10:56:57

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2026/2/3 22:50:06

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2026/2/4 23:47:47

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2026/1/31 10:58:46

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2026/1/29 2:30:31

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

编程新知 2025/11/18 2:17:20