简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

HTML <a> download属性使用方法详解

藏色散人
发布： 2018-09-01 14:36:28
原创
9241 人浏览过

点击下载文件或者图片是我们在网页上寻找资源的日常操作，那么我们自己在设计HTML页面的时候，如果需要实现让别人下载文件的功能，我们该如何是去做呢？其实这种功能实现并没有很复杂，反而是很简单的。本篇文章就给大家详细得介绍a标签中的download属性，只要掌握了这个属性就可以实现点击下载文件图片等功能。

一段简单的带有a标签download属性的html代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML a标签download属性使用示例</title>
</head>
<body>
<p>给a标签添加了download属性：</p>
<a href="/test/img/2.png"  download="2.png">点击下载</a>
</body>
</html>
登录后复制

我在本地测试效果如下图：

a14e35c46a1cf2428e2aa9c86a9a678.png

如图我是用火狐浏览器进行访问的，并且成功下载打开图片。相信大家如果自己动手测试的话，对download属性已经有所概念。这里a标签href的值是表示，你要下载某个文件或图片的地址。download的值则表示你要下载保存的文件名称或者图片名称。

但是大家也要注意html中a download属性并不是在所有浏览器里奏效的。目前a download属性只在火狐和谷歌浏览器有效。其余的如IE、Safari、Opera浏览器都是没有用的。

综上所述，所以想要实现点击下载某文件或图片只要掌握好a标签中的download属性用法即可，如果你只给a标签中加了href的文件地址而没有download属性的话，那么就只会出现预览的效果而无法下载！

本篇文章具有一定的参考价值，希望对有需要的朋友有一定的帮助！

以上是HTML <a> download属性使用方法详解的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
a标签download属性
来源：php.cn
上一篇：xhtml与html之间有什么区别？xhtml与html之间的异同分析 下一篇：html中b标签和strong标签的区别是什么？b和strong区别的总结
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
网页抓取：缺少 href 属性 - 需要模拟鼠标点击进行网页抓取吗？ 对于一个有趣的网络抓取项目，我想从ttps://www.nhl.com/stats/teams收集NHL数据。有一个可点击的Excel导出标签，我可以使用selenium和bs4找...
来自于 2024-04-04 10:32:06
0
1
3473
如何使用CSS选择器来定位包含特定属性或标签的div元素？ 我正在使用一个生成网站的POS系统。大部分代码是专有的，因此我无法编辑很多内容。我有一个输出的类别列表，其中一些图像作为类别浮动。我想隐藏主页上列出的前3个。我尝试使用div:nt...
来自于 2024-04-03 22:25:59
0
1
277
MySQL自连接缺失数据 我想在表上执行自连接，以按列方式呈现值。对于每个对象，都有多个属性（最多达到已知限制），但并非所有对象的所有属性都被存储。我尝试过各种连接，但总是缺少行，我希望使用空值。起始表：对...
来自于 2024-03-31 10:07:32
0
1
263
多个 JSON-LD Schema.org 标签可以代表同一个'对象”吗？ 我有一个网站，客户端请求JSON-LD（不是微数据）schema.org标签。他们想要的其中一个是每个页面上都有一个基本的“WebPage”标签，其中包含有关每个页面上的内容的一些...
来自于 2024-03-30 11:58:39
0
1
412
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！