HTML5 A链接
1.基本使用
- a标签常用属性：
| 属性名 | 说明 |
|---|---|
| href | 规定链接的目标 URL |
| target | 已什么形式打开这个连接 |
- target属性有以下几个值
| 属性名 | 说明 |
|---|---|
| _self | 默认，当前页面跳转 |
| _blank | 新窗口打开 |
| _parent | 在父窗口中打开链接 |
| _top | 在当前窗体打开链接，并替换当前的整个窗体(框架页) |
| framename | 在指定的框架中打开被链接文档，通俗的说在特定新窗口打开 |
- 示例代码
<a href="http://www.baidu.com">百度一下 (默认，当前页面跳转。)</a>
<br />
<a href="http://www.baidu.com" target="_blank">百度一下 新窗口打开</a>
<br />
<a href="http://www.baidu.com" target="_1">百度一下 特定窗口打开</a>
<br />
<a href="http://www.taobao.com" target="_1">淘宝 特定窗口打开</a>
- PS：这里解释一下：target="_blank"和target="_1"都会使用新窗口打开目标链接，但是target="_blank"每次点击都会创建新的窗口，而target="_1"初次点击时打开新窗口，以后所有使用target="_1"的窗口都会覆盖刚刚打开的窗口，相当于是一个被命名的新窗口打开。所以后面2个链接重复点击会在一个窗口中相互覆盖
2.下载文件
- 当目标 URL返回的文档类型是html，img之类能被浏览器直接打开的文件时，浏览器会直接预览这个文件
- 如果返回的文档类型浏览器无法直接打开，例如表格文件，压缩包等，会弹窗提示用户是否保存
- 如果想下载img之类能直接预览的文档，则需要添加download属性（这个值就是文件下载时的文件名。默认是链接的文件名）
- 跨域时 download 属性无效，所以跨域资源能预览的直接预览，不能预览的的直接下载
同源资源：
<body>
<a href="./resource/kof.jpg">预览图片</a>
<br />
<!-- 文件名默认为 热血足球.jpg-->
<a href="./resource/热血足球.xlsx">下载文档</a>
<br />
<!-- 文件名默认为 kof.jpg-->
<a href="./resource/kof.jpg" download>下载图片</a>
<br />
<!-- 文件名默认为 xxx.jpg-->
<a href="./resource/kof.jpg" download="xxx">下载图片 (改名)</a>
<br />
<!-- 文件名默认为 a.jpg-->
<a href="./resource/热血足球.xlsx" download="a">下载文档(改名)</a>
</body>
跨域资源：
<body>
<!-- 跨域时 download 属性无效-->
<!-- 下载文件名 热血足球.xlsx-->
<a href="http://127.0.0.1:8090/热血足球.xlsx">跨域下载文档</a>
<br />
<!-- 下载文件名 热血足球.xlsx 改名无效-->
<a href="http://127.0.0.1:8090/热血足球.xlsx" download="xxx">跨域下载文档 (改名)</a>
<br />
<!-- 无法下载 直接预览打开-->
<a href="http://127.0.0.1:8090/kof.jpg" download="xxx">跨域下载图片 (改名)</a>
</body>
3.使用js下载资源
- 如果是资源是浏览器无法直接打开的类型，那么直接跳转到指定url即可，代码如下
<script>
window.open('http://127.0.0.1:8090/热血足球.xlsx')
</script>
- 如果资源是图片类型，这种方法就会直接预览图片，需要创建一个a链接，设定download属性来下载（无法下载跨域的图片资源文件，只能预览）
<script>
var btn = document.querySelector('#btn')
btn.onclick = function(){
//window.location = 'http://127.0.0.1:8090/kof.jpg'
downloadImg('./resource/kof.jpg','filename')
}
function downloadImg(url,name){
//创建a标签
var node_a = document.createElement('a')
//添加属性
node_a.innerHTML = '下载图片'
node_a.href = url
node_a.download = name || ''
//触发点击事件
console.log('触发点击事件')
node_a.click()
}
</script>
4.下载跨域服务器的图片资源
- 原生的方法无法直接下载跨域图片资源，这里使用一些方法避开这个限制，把图片转换成base64，来达到下载跨域服务器的图片资源的功能
<script>
var btn = document.querySelector('#btn')
btn.onclick = function(){
//window.location = 'http://127.0.0.1:8090/kof.jpg'
downloadImg2('./resource/kof.jpg','filename')
}
// 使用iamge对象还在url对应的托
// 使用canvas加载图片并转换成base64格式
function downloadImg2(url,name){
//1.创建iamge对象加载图片
var image = new Image()
image.src = url
image.onload = function(){
//2.加载成功，贮备绘制到canvas中
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
//2.1设定canvas大小
canvas.width = image.width;
canvas.height = image.height;
//2.2绘制图片
ctx.drawImage(image,0,0)
//2.3转换成base64
var imgurl = canvas.toDataURL("image/png")
//3.创建a标签
var node_a = document.createElement('a')
//3.1添加属性
node_a.innerHTML = '下载图片'
node_a.href = url
node_a.download = name || ''
//3.2触发点击事件
console.log('触发点击事件')
node_a.click()
}
}
</script>
5.全局控制
- 通过base标签指定网页内部的所有相对 URL 的计算基准，不建议使用
<head>
<base href="https://www.example.com/files/" target="_blank">
</head>
HTML5 A链接的更多相关文章
- HTML5：链接与路径
链接与路径 一.路径 绝对路径——指包含服务器协议的完全路径 相对路径——指被链接文档相对于当前文档的路径. 二.超链接<a> 1.语法: <a href=“目标”>链接文本& ...
- html5学习链接
http://www.runoob.com/tags/html-colorpicker.html
- 你所不知道的html5与html中的那些事（五）——web图像
文章简介: 现在的页面,一般都离不开图像,而怎么做才能让我们的页面中的图像加载的又快又好呢?在优化页面速度的时候还有什么事是你所不知道的呢? 下面看看今天我为大家带来了哪些关于we ...
- 网页设计、java、Andorid资源清单整理
多学多练做笔记很重要. 赤裸裸的干货非鸡汤 网页设计的主要技术: Html, Js, Css, Ps HTML/HTML5 网页的基础Html必须知道的.但 ...
- App是什么，可以分为几类？及其相关解释。
App,是应用程序,Application的缩写,事实上,严格说来,目前市面上的APP大致可分为以下十类,即移动UGC,移动搜索,移动浏览,移动支付,移动广告,移动即时信息,SNS,LBS,AR以及 ...
- 腾讯alloyteam团队前端代码规范
来源于:http://alloyteam.github.io/CodeGuide/ 命名规则 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规 ...
- spring boot 学习(二)spring boot 框架整合 thymeleaf
spring boot 框架整合 thymeleaf spring boot 的官方文档中建议开发者使用模板引擎,避免使用 JSP.因为若一定要使用 JSP 将无法使用. 注意:本文主要参考学习了大神 ...
- 池建强 博客 Mac使用技巧 第一季
第1天: 今天推送的Mac技巧: 使用OS X,我们可以充分利用系统提供的多个Space,把不同的程序放到不同的Space,让我们的系统更有扩展性.如何增加Space呢?四指上推,在桌面的最上方会出现 ...
- java资料
HTML5+CSS3视频教程:http://pan.baidu.com/s/1hsyOjze 密码:c3uw JavaScript视频教程:链接:http://pan.baidu.com/s/1 ...
- HTML 5的革新——更简洁的结构
今天我们阐述HTML 5的革新之一:更简洁的结构. 新的文档类型 DOCTYPE 先来解释一下文档类型 DOCTYPE:文档类型位于HTML源文件的第一行,在HTML4的标准中,DOCTYPE在被归在 ...
随机推荐
- AI假图检测：Deepfake层出不穷，怎么才能“有图有真相”？
随着AIGC技术的迅猛发展,互联网上涌现出各种逼真的篡改照片和视频."有图有真相"已经成为历史.而证件.票据.账单.流水等文件P图这些更为常见的伪造活动,也在AI技术的加持下如虎添 ...
- 靠着这篇笔记，我拿下了16k车载测试offer！
如何写简历 个人技能 个人技能一般不要超过10条,一般在8条内. 一.测试流程和技术 1.熟悉车载系统研发和测试流程,能独立编写各种测试文档. 2.熟悉车载系统测试用例设计思路,能独立编写仪表和车 ...
- JDBC——API详解
DiverManager DriverManager(驱动管理类)作用: 1. 注册驱动 MySQL 5之后的版本 不再需要手动写这行注册驱动的代码了(可以省略) // 1.注册驱动 Class.fo ...
- 2023年3月中国数据库排行榜：开源OTO揽获前三，传统达梦、GBase触机便发
东风何时至,已绿湖上山. 春风送来了2023年3月的 墨天轮中国数据库流行度排行,本月共有260个数据库参与排名,本月榜单前十可以用一句话概括为:榜单前八较上月岿然不动,GBase 奋勇向前重返第九. ...
- 妙用编辑器：把EverEdit变成计算器
妙用编辑器:把EverEdit变成计算器 应用场景 日常工作过程中,会存在需要计算一些数据的场景,调用系统的计算器当然可以完成这项工作,但是需要来回切换,且系统自带的计算器没有表达式计算功能,真是不方 ...
- 通过自定义字符串内插处理程序(InterpolatedStringHandler)和CallerArgumentExpression特性来实现一个好玩的场景
背景知识介绍 什么是自定义字符串内插处理程序? 简单来讲就是自定义一个高性能的字符串拼接程序 通过 $"{a}{b}"的方式. 什么是CallerArgumentExpressio ...
- .NET使用Graphql的演示
Graphql是什么?先来一段AI给的回答: GraphQL是一种为API设计的查询语言,与REST相比,它提供了更高效.强大和灵活的方法来与数据交互.GraphQL由Facebook于2012年开发 ...
- 开启 Calico eBPF 数据平面实践
简介 Calico 从 v3.13 开始,集成了 eBPF 数据平面. 关于什么是 eBPF, 以及 Calico 为什么引入了 eBPF , 并不是本篇文章的重点,感兴趣的朋友可以自行阅读相关文档. ...
- T3 出行云原生容器化平台实践
公司简介 T3 出行是南京领行科技股份有限公司打造的智慧出行生态平台,由中国第一汽车集团有限公司.东风汽车集团有限公司.重庆长安汽车股份有限公司发起,联合腾讯.阿里巴巴等互联网企业共同投资打造.公司以 ...
- 云原生爱好者周刊：揪出 Prometheus 中时间戳抖动
开源项目推荐 O11y toolkit O11y toolkit 是一个工具集,用来维护.调试和增强你的可观测性系统,改善我们日常对指标.日志和链路追踪的使用体验.例如 oy-scrape-jitte ...