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链接的更多相关文章

  1. HTML5：链接与路径

    链接与路径 一.路径 绝对路径——指包含服务器协议的完全路径 相对路径——指被链接文档相对于当前文档的路径. 二.超链接<a> 1.语法: <a href=“目标”>链接文本& ...

  2. html5学习链接

    http://www.runoob.com/tags/html-colorpicker.html

  3. 你所不知道的html5与html中的那些事（五）——web图像

    文章简介:       现在的页面,一般都离不开图像,而怎么做才能让我们的页面中的图像加载的又快又好呢?在优化页面速度的时候还有什么事是你所不知道的呢?     下面看看今天我为大家带来了哪些关于we ...

  4. 网页设计、java、Andorid资源清单整理

    多学多练做笔记很重要. 赤裸裸的干货非鸡汤 网页设计的主要技术:    Html,    Js,    Css,    Ps       HTML/HTML5     网页的基础Html必须知道的.但 ...

  5. App是什么，可以分为几类？及其相关解释。

     App,是应用程序,Application的缩写,事实上,严格说来,目前市面上的APP大致可分为以下十类,即移动UGC,移动搜索,移动浏览,移动支付,移动广告,移动即时信息,SNS,LBS,AR以及 ...

  6. 腾讯alloyteam团队前端代码规范

    来源于:http://alloyteam.github.io/CodeGuide/ 命名规则 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规 ...

  7. spring boot 学习(二)spring boot 框架整合 thymeleaf

    spring boot 框架整合 thymeleaf spring boot 的官方文档中建议开发者使用模板引擎,避免使用 JSP.因为若一定要使用 JSP 将无法使用. 注意:本文主要参考学习了大神 ...

  8. 池建强 博客 Mac使用技巧 第一季

    第1天: 今天推送的Mac技巧: 使用OS X,我们可以充分利用系统提供的多个Space,把不同的程序放到不同的Space,让我们的系统更有扩展性.如何增加Space呢?四指上推,在桌面的最上方会出现 ...

  9. java资料

     HTML5+CSS3视频教程:http://pan.baidu.com/s/1hsyOjze   密码:c3uw JavaScript视频教程:链接:http://pan.baidu.com/s/1 ...

  10. HTML 5的革新——更简洁的结构

    今天我们阐述HTML 5的革新之一:更简洁的结构. 新的文档类型 DOCTYPE 先来解释一下文档类型 DOCTYPE:文档类型位于HTML源文件的第一行,在HTML4的标准中,DOCTYPE在被归在 ...

随机推荐

  1. Java如何将Object转换成指定Class对象

    在Java中,将Object转换为指定类型的Class对象实际上是两个不同概念的操作: 将Object实例转换为特定类型的实例:这通常涉及到类型转换(如(MyType) myObject)或者通过反射 ...

  2. 《Vue.js 设计与实现》读书笔记 - 第5章、非原始值的响应式方案

    第5章.非原始值的响应式方案 5.1 理解 Proxy 和 Reflect Proxy Proxy 只能代理对象,不能代理非对象原始值,比如字符串. Proxy 会拦截对对象的基本语义,并重新定义对象 ...

  3. USB协议详解第7讲（补充-USB帧和微帧剖析）

    1.概念 (1)USB2.0帧和微帧属于物理层时间基准的概念,低速和全速下每个帧时长为1ms,高速下每个帧又分为8个微帧,即每个微帧时长为125us. (2)USB主机和设备控制器同步后,每个微帧起始 ...

  4. .Net 反射的学习

    // 反射 // 一切从 type 开始 2 种拿到 type 的方式 // 作用:动态的操作对象 获取属性 方法 特性 // 1. 拿到对象的 type // typeof(类); // 2. 拿到 ...

  5. C#中的原始字符串

    // 原始字符串使用 三个引号(至少三对)包裹,ps: 引号单独占用一行 // 原始字符串使用变量需要加两个 $$"""{变量}""" st ...

  6. 什么是 js 事件循环 event loop

    知识储备 : js 的执行 机制 js 的底层执行机制 : 对于 js 代码 分为了同步 和 异步 代码 ,异步代码 较少比如:setInterval setTimeout 等(不会超过10 个) 其 ...

  7. ServiceMesh 3：路由控制（图文总结）

    ★ ServiceMesh系列 1 Istio部署 1.1 连接测试机 进入测试机服务器... 1.2 安装Istio 1.2.1 通过官方网站下载Istio # 下载最新版本的Istio $ cur ...

  8. day13-JavaDoc

    JavaDoc JavaDoc命令是用来生成自己API文档的 参数信息 @author 作者名 @version 版本号 @since 指明需要最早使用的jdk版本 @param 参数名 @retur ...

  9. Java面试题（持续更新中...）

    事务的四大特性 原子性,隔离性,持久性,一致性 事务的隔离级别和现象 读未提交:可能产生脏读,读取到未提交的数据 读已提交:可能产生不可重复读取问题,A事务中读取到B事务已提交的数据,导致两次读取数据 ...

  10. flink同步MySQL数据的时候出现内存溢出

    flink同步MySQL数据的时候出现内存溢出 背景:需要将1000w的某类型数据同步到别的数据源里面,使用公司的大数据平台可以很快处理完毕,而且使用的内存只有很少很少量(公司的大数据平台的底层是fl ...