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

HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)

超链接 a 标签主要有以下功能:

跳转到其他页面

 <a href="https://www.baidu.com/" target="_blank" >百度</a>
  • href:目标页面的 url 地址或同网站的其他页面地址,如 detail.html
  • target:打开目标页面的方式
    • _self:在同一个网页中显示(默认值)
    • _blank:在新的窗口中打开【常用】
    • _parent:在父窗口中显示
    • _top:在顶级窗口中显示

锚点 – 页内滚动

回到页面顶部

<a href="#">回到顶部</a>

滚动到指定元素

<a href="#title2">页内滚动到标题2</a>
  • href:# + 指定元素的 id 或 name

在这里插入图片描述

<template><div class="page"><h1>标题1</h1><p>段落1</p><p>段落2</p><h1 id="title2">标题2</h1><div class="menuBox"><a href="#title2">页内滚动到标题2</a></div></div>
</template><style lang="scss" scoped>
.page {height: 2000px;
}
.menuBox {position: fixed;right: 20px;bottom: 20px;
}
</style>

跳转到其他页面并滚动到指定元素

<a href="index.html#menu">打开首页,并滚动到菜单</a>

刷新页面

<a href="">刷新页面</a>
  • href 为空

下载文件

<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>
  • href:目标文件的 url 地址
  • download:指定下载后文件的名称,若无,则使用默认文件名
txt、png、jpg 等浏览器支持直接打开的文件必须添加 download 属性,否则不会执行下载任务,而会直接打开文件。

访问接口,返回文件流进行下载时,也会用到 !

// 根据接口返回的文件流数据 data, 创建 blob 对象
const blob = new Blob([data], { type: headers['content-type'] })
// 生成指向 blob 对象的临时 URL
const downUrl = window.URL.createObjectURL(blob)
// 创建 a 链接
const dom_a = document.createElement('a')
// a 链接的 href 属性为 blob 对象的临时 URL
dom_a.href = downUrl
// a 链接的 download 属性为进行URL解码的 fileName
dom_a.download = decodeURIComponent(fileName)
// a 链接的 display 样式为 none,避免在页面上显示
dom_a.style.display = 'none'
// 将 a 链接添加到 body 标签中
document.body.appendChild(dom_a)
// 点击 a 链接,触发文件的下载
dom_a.click()
// 将 a 链接从父标签(此处为 body )中移除
dom_a.parentNode.removeChild(dom_a)
// 清除指向 blob 对象的临时 URL
window.URL.revokeObjectURL(url)

相关文章:

HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)

超链接 a 标签主要有以下功能&#xff1a; 跳转到其他页面 <a href"https://www.baidu.com/" target"_blank" >百度</a>href&#xff1a;目标页面的 url 地址或同网站的其他页面地址&#xff0c;如 detail.htmltarget&#xff1a;打开目标页面…...

Nginx+Tomcat群集

一.实验环境 二.安装多台Tomcat服务器 1.在安装Tomcat之前必须先安装JDK。 JDK的全称是Java Development Kit&#xff0c;是sun公司提供的JAVA语言的软件开发工具包&#xff0c;其中包含Java虚拟机&#xff08;JVM&#xff09;&#xff0c;编写好的Java源程序经过编译可形成Ja…...

DBA 数据库管理 部署Mysql 服务,基础查询

数据库&#xff1a;存储数据的仓库 数据库服务软件&#xff1a; 关系型数据库&#xff1a; 存在硬盘 &#xff0c;制作表格的 数据库的参数 [rootmysql50 ~]# cat /etc/my.cnf.d/mysql-server.cnf 主配置文件 [mysqld] datadir/var/lib/mysql 存放数据库目录…...

AIGC:构筑创意新时代的神奇力量

在当今数字化浪潮中&#xff0c;AIGC&#xff08;人工智能生成内容&#xff09;正以其强大的创造力和应用价值&#xff0c;引领着一场前所未有的创意革命。从文本生成到音乐创作&#xff0c;从图像设计到电影制作&#xff0c;AIGC的触角已延伸至文化艺术的各个领域&#xff0c;…...

前端Din字体和造字工房力黑字体文件

Din 字体是一种经典的、简洁的无衬线字体&#xff0c;它源自1930年代的德国交通标志设计。 造字工房力黑字体适用于数字&#xff0c;驾驶舱标题等统计界面 DIN-Medium.otf 案例 造字工房力黑.TTF 案例...

Studying-代码随想录训练营day33| 动态规划理论基础、509.斐波那契函数、70.爬楼梯、746.使用最小花费爬楼梯

第33天&#xff0c;动态规划开始&#xff0c;新的算法&#x1f4aa;(ง •_•)ง&#xff0c;编程语言&#xff1a;C 目录 动态规划理论基础 动态规划的解题步骤 动态规划包含的问题 动态规划如何debug 509.斐波那契函数 70.爬楼梯 746.使用最小花费爬楼梯 总结 动态…...

【康复学习--LeetCode每日一题】724. 寻找数组的中心下标

题目&#xff1a; 给你一个整数数组 nums &#xff0c;请计算数组的 中心下标 。 数组 中心下标 是数组的一个下标&#xff0c;其左侧所有元素相加的和等于右侧所有元素相加的和。 如果中心下标位于数组最左端&#xff0c;那么左侧数之和视为 0 &#xff0c;因为在下标的左侧不…...

LeetCode-刷题记录-前缀和合集(本篇blog会持续更新哦~)

一、前缀和&#xff08;Prefix Sum&#xff09;算法概述 前缀和算法通过预先计算数组的累加和&#xff0c;可以在常数时间内回答多个区间和相关的查询问题&#xff0c;是解决子数组和问题中的重要工具。 它的基本思想是通过预先计算和存储数组的前缀和&#xff0c;可以在 O(1)…...

【中项第三版】系统集成项目管理工程师 | 第 4 章 信息系统架构③ | 4.6

前言 第4章对应的内容选择题和案例分析都会进行考查&#xff0c;这一章节属于技术相关的内容&#xff0c;学习要以教材为准。本章分值预计在4-5分。 目录 4.6 网络架构 4.6.1 基本原则 4.6.2 局域网架构 4.6.3 广域网架构 4.6.4 移动通信网架构 4.6.5 软件定义网络 4.6…...

知识图谱入门笔记

自学参考&#xff1a; 视频&#xff1a;斯坦福CS520 | 知识图谱 最全知识图谱综述 详解知识图谱的构建全流程 知识图谱构建&#xff08;概念&#xff0c;工具&#xff0c;实例调研&#xff09; 一、基本概念 知识图谱&#xff08;Knowledge graph&#xff09;&#xff1a;由结…...

常见的气体流量计有哪些?

1.气体涡轮流量计 适用场合&#xff1a;流量变化小&#xff0c;脉动流频率小&#xff0c;中低压洁净天然气优点 1.精度高&#xff0c;重复性好 2.测量范围广&#xff0c;压损小&#xff0c;安装维修方便 3.具有较高的抗电磁干扰和抗震动能力缺点&#xff1a;分辨率低&#xff…...

AI推介-大语言模型LLMs论文速览(arXiv方向):2024.07.01-2024.07.05

文章目录&#xff5e; 1.LLM Internal States Reveal Hallucination Risk Faced With a Query2.Fine-Tuning with Divergent Chains of Thought Boosts Reasoning Through Self-Correction in Language Models3.Investigating Decoder-only Large Language Models for Speech-t…...

Android IP地址、子网掩码、默认网关、首选DNS服务器、备用DNS服务器校验

Android IP地址、子网掩码、默认网关、首选DNS服务器、备用DNS服务器校验 public String isIP(String ip) {String regex = "(25[0-5]|2[0-4]\\d|1\\d{2}|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d{2}|[1-9]?\\d)){3}";Pattern p = Pattern.compile(regex)...

铁威马NAS教程丨为什么修复文件系统、为卷扩容、增加及删除 SSD 缓存等操作失败?

适用机型&#xff1a; 所有 TNAS 型号 适用版本&#xff1a; 所有 TOS 版本 问题现象&#xff1a; 在尝试修复文件系统、为卷扩容、增加或删除 SSD 缓存时(TOS 5)&#xff0c;可能因卷被其他进程占用而操作失败。 解决方法&#xff1a; 为了成功执行上述操作&#xff0c;您…...

【深度学习】第3章——回归模型与求解分析

一、回归分析 1.定义 分析自变量与因变量之间定量的因果关系&#xff0c;根据已有的数据拟合出变量之间的关系。 2.回归和分类的区别和联系 3.线性模型 4.非线性模型 5.线性回归※ 面对回归问题&#xff0c;通常分三步解决 第一步&#xff1a;选定使用的model&#xff0c;…...

Maven的基本使用

引入依赖 1.引入Maven仓库存在的依赖&#xff0c;直接引入&#xff0c;刷新Maven <dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.2.12.RELEASE</version> </dependency…...

【笔记】finalshell中使用nano编辑器GNU

ctrl O 保存 enter 确定 ctrl X 退出 nano编辑 能不用就不用吧 因为我真用不习惯 nano编辑的文件也可以用vim编辑的...

markdown文件转pdf

步骤&#xff1a;md转html转pdf pom引入 <!--markdown 转pdf--><dependency><groupId>com.vladsch.flexmark</groupId><artifactId>flexmark-all</artifactId><version>0.64.8</version></dependency><dependency&g…...

课设:二手车交易管理系统(Java+MySQL)

简易数据库课程设计~分享 技术栈 本项目使用以下技术栈构建&#xff1a; Java: 作为主要编程语言&#xff0c;负责业务逻辑的实现。MySQL: 用于数据存储&#xff0c;管理用户、车辆和订单信息。JDBC: 用于Java与MySQL数据库之间的连接和操作。Swing GUI: 提供用户图形界面&am…...

vue3实现无缝滚动 列表滚动 vue3-seamlessscroll

vue3框架内使用无缝滚动&#xff0c;使用一个插件比较合适&#xff08;gitee地址&#xff09;&#xff1a; vue3-seamless-scroll: Vue3.0 无缝滚动组件 具体更多配置请看&#xff1a; 组件配置 | vue3-scroll-seamless 1. 安装&#xff1a; npm install vue3-seamless-sc…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤:1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现:客户端实现:4. Axi…...