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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/41315.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PLL和CDR的内部结构及其区别

比较PLL和CDR的内部结构及其区别&#xff1a; 基本结构&#xff1a; PLL&#xff08;相位锁定环&#xff09;&#xff1a; 相位检测器环路滤波器压控振荡器&#xff08;VCO&#xff09;分频器&#xff08;可选&#xff0c;用于频率合成&#xff09; CDR&#xff08;时钟数据恢复…

windows电脑网络重置后wifi列表消失怎么办?

我们的电脑网络偶尔会出现异常&#xff0c;我们通常会下意识选择网络诊断&#xff0c;运行完诊断后一般会让我们选择重置网络&#xff0c;然而&#xff0c;重置后wifi列表突然消失&#xff0c;无法愉快地上网了&#xff0c;找了一圈&#xff0c;都说是更改适配器选项&#xff0…

4、SSD主控

简述 主控是个片上系统&#xff0c;由硬件和固件组成一个功能完整的系统&#xff1b;上文所述的FTL就属于主控的固件范畴。主控闪存构成了整个SSD&#xff0c;在闪存确定的情况下&#xff0c;主控就反映了各家SSD的差异。实时上各家SSD的差异也主要反应在主控上&#xff0c;毕…

小学英语语法

目录 a和an的用法名词的单复数be动词和人称代词&#xff08;主格&#xff09;指示代词形容词物主代词名词所有格双重所有格方位介词some&#xff0c;any和no的用法How many和How much的用法情态动词can的用法祈使句人称代词&#xff08;宾格&#xff09;常见实义动词的用法一般…

【Odoo开源ERP】别把ERP与进销存软件混为一谈

导读&#xff1a;企业使用ERP软件能够实现管理升级&#xff0c;多方信息集成&#xff0c;按照既定策略逻辑运算&#xff0c;生成计划建议&#xff0c;减少人力成本&#xff0c;提高准确率的同时提高经营能力。 ERP&#xff0c;是MRP II的下一代软件&#xff0c;除了MRP II已有的…

项目一 nfs 共享服务器 Haproxy 代理 Keepalive 高可用集群

深入理解程序的数据存储 配置NFS服务器 配置ansible环境

满足GMSL静电防护要求的方案

什么是GMSL&#xff1f;它是做什么用的&#xff1f;它有什么优点&#xff1f;设计GMSL防静电有啥难度&#xff1f; 带着这些疑问我们先了解下什么是GMSL。 一&#xff0e;简述 GMSL GMSL&#xff08;Gigabit Multimedia Serial Link&#xff09;即千兆多媒体串行链路&#xf…

每日复盘-20240705

今日关注&#xff1a; 20240705 六日涨幅最大: ------1--------300391--------- 长药控股 五日涨幅最大: ------1--------300391--------- 长药控股 四日涨幅最大: ------1--------300391--------- 长药控股 三日涨幅最大: ------1--------300391--------- 长药控股 二日涨幅最…

【qt】如何通过域名获得IP地址?

域名是什么呢?像www.baidu.com的baidu.com就是域名. 域名相当于是网站的门牌号. 域名可以通过 DNS 解析将其转换为对应的 IP 地址. 用我们获取IP地址的方式就可以,但是现在没有可以用另一种方法. 槽函数的实现: void MainWindow::lookupHost(const QHostInfo &hostInf…

c++重定向输出和输出(竞赛讲解)

1.命令行重定向 在命令行中指定输出文件 指令 .\重定向学习.exe > 1.txt 效果 命令行输入和输出 指令 .\重定向学习.exe < 2.txt > 1.txt 效果 代码 #include<bits/stdc++.h> using namespace std; int n; int main(){cin>>n;for(int i=0;i<n;i…

Docker:二、常用命令

&#x1f341;docker常用命令 官方帮助文档&#xff1a;https://docs.docker.com/reference/ &#x1f332;帮助命令&#xff08;版本信息&#xff09; docker -v # 显示docker版本 docker version # 显示docker版本信息 docker info # 显示docker系统信息 docker 命…

信号量(semaphore)

一、信号量简介 前面介绍的消息队列主要用于传输数据&#xff1a;任务与任务之间、任务与中断之间 在有些情况下&#xff0c;不需要传输数据&#xff0c;只需要传递状态即可 • 车开出停车位&#xff0c;你的车可以停进来了 • 课已经录制完成&#xff0c;你可以进行观看了 1.…

解决前后端同一个端口跨域问题

前端起了一个代理 如果url是api开头的自动代理访问8080端口&#xff08;解决前后端端口不一致要么是前端代理&#xff0c;要么是后端加过滤器&#xff09; proxy:{/api:{target:http://localhost:8080,changeOrigin : true,// 替换去掉路径上的api// rewrite:(path)>path.r…

常规情况与opencv图像中,计算直线与矩形框的交点

文章目录 1、普通方式1.1、普通计算过程1.2、优化方式 2、图像中的情况2.1、常规处理2.2、opencv中的处理2.2.1、cv::clipLine函数2.2.2、测试代码2.2.3、测试结果 1、普通方式 已知矩形框左上(x1,y1)、右下(x2,y2&#xff09;点&#xff0c;直线方程 y kxb&#xff0c;求交点…

tinyshop商城学习

1、使用badboy屏幕录制工具&#xff0c;获得服装购物业务的结果&#xff0c;生成.jmx文件 2、在JMeter中新建线程组&#xff0c;导入.jmx文件 3、完成进入商城&#xff0c;登录&#xff0c;服装页面进入&#xff0c;随机选择服装&#xff0c;添加购物车&#xff0c;开始结算&…

SpringBoot整合Dubbo的快速使用教程

目录 一、什么是Dubbo? 二、SpringBoot整合Dubbo 1、父工程引入依赖 2、各个Dubbo服务子模块引入依赖 3、服务提供者 &#xff08;1&#xff09;启动类添加注解EnableDubbo &#xff08;2&#xff09;服务类添加注解DubboService &#xff08;3&#xff09;配置文件…

Patch SCN使用说明---惜分飞

软件说明 该软件是惜分飞&#xff08;https://www.xifenfei.com&#xff09;开发&#xff0c;仅用来查看和修改Oracle数据库SCN(System Change Number),主要使用在数据库因为某种原因导致无法正常启动的情况下使用该工具进行解决.特别是Oracle新版本中使用隐含参数,event,orad…

Java核心 - 泛型详解

文章目录 一、概述1、什么是泛型2、用泛型最直接的优点3、分类 二、泛型详解1、泛型类&#xff08;1&#xff09;概述&#xff08;2&#xff09;代码实例 2、泛型派生类&#xff08;1&#xff09;概述&#xff08;2&#xff09;代码实例&#xff08;3&#xff09;扩展&#xff…

10元 DIY 一个柔性灯丝氛围灯

之前TikTok上特别火的线性氛围灯Augelight刚出来的时候一度卖到80多美金&#xff0c;国内1688也能到400多人民币。 随着各路国内厂商和DIY创客的跟进&#xff0c;功能变多的同时价格一路下滑&#xff0c;虽然有的质感的确感人&#xff0c;但是便宜啊。 甚至关注的up有把成本搞到…

【24年一博研讨会总结】BJ0705

1.工艺边据PCB边缘 >5mm. 2.IPC-A-600G Pitch < 1.25mm H<0.025mm,小于0.4mm,取消丝印框&#xff0c;防止锡膏不匀虚焊&#xff1b; 3.表面镀金与镍厚度 金厚度 um镍厚度 um0.0192.7830.0213.3610.0453.6640.0314.378 4.多层板&#xff0c;层间距>20mil 可以认…