精华内容
下载资源
问答
我要提问
  • a标签download属性无效
    万次阅读
    2019-05-21 12:01:50

    起初遇到这个问题是因为在QQ浏览器中，a链接无法下载浏览器插件(.crx文件)，既没有弹出下载窗口，在下载记录里面也找不到下载文件，后面就给a标签添加了这个download属性。

    download属性的作用是强制弹出下载窗口，属性值可以自定义，一般定义为要下载的文件名。了解更详细用法

    但是在之后又遇到了问题，网站协议由http改成了https协议，a链接的下载链接中忘记修改，所以下载窗口没有弹出来。

    由此可见download由于浏览器安全策略不支持跨域

     

     

    更多相关内容

  • a标签download属性无效_html常用标签

     2020-11-22 00:22:56
    a标签（HTTP GET（获取） 请求）1，target 目标 _self当前 在当前窗口打开内容2，_blank空白 在新的窗口打开内容3，_parent 在父亲窗口打开内容 如嵌套2层 在最外面嵌套中打开4，_top在顶层窗口打开，嵌套N层，在最...

    a标签（HTTP GET（获取） 请求）

    1，target 目标 _self当前 在当前窗口打开内容 2，_blank空白 在新的窗口打开内容 3，_parent 在父亲窗口打开内容 如嵌套2层 在最外面嵌套中打开 4，_top在顶层窗口打开，嵌套N层，在最外面嵌套中打开 3和4 结合ifarme标签理解 
       1, <a href="" target="_self">qq</a>
   2, <a href="" target="_blank">qq</a>
   3, <a hrref="" target="_parent">qq</a>
   4, <a href=""target="top">qq</a>

    a标签下载属性

    加入download下载html网页，

    <a href="http://qq.com" download>下载</a>

    ef8da609623c70f2d6b9347c080c237f.png

    a标签href属性，超链接

    第一个/的意思是协议，当前页面是HTTP协议，点击链接就是HTTP协议，如果当前页面是本地file协议，点击链接就是file协议链接，1和2的写法实现效果一样 

    1，<a href="//qq.com">qq</a>
2，<a href="http/qq.com">qq</a>

    3，href="#" 页面内跳转不发请求

    <

    4，href里面不是#号，会发起请求，如下图

    4，<a href="?name=frank">qq</a>

    5，href里面写js代码可以执行，写一个a标签不想它跳转可以写成 <a href="javascript:;">qq</a>这样a标签不会跳转也不会跳转到页面开头伪协议

    5，<a href="javascript:alert(1)">qq</a>  <a href="javascript:;">qq</a>

    c22e9f6a5c25c6c51cce5e2d7e660dc0.png

    4ee1cc9f50767f1e628d3090e4384773.png

    iframe标签：

    <iframe name=”xxx” src=”路径” frameborder=”0”></iframe>

    <a target=”xxx”(这里引用了上面iframe的namexxx) href=”http://qq.com”>qq</a>

    <a target=”xxx”(这里引用了上面iframe的namexxx) href=”http://baidu.com”>百度</a>

    意思是：name：点击a链接时在iframe里打开a里面target为xxx的链接

    frameborder：清除本身的边框

    form(HTTP POST(上传）请求）

    form加载input外层写上属性 发送请求form请求可以得到第四部分见图2 a标签也可以发生请求

    <

    445b4f512d88ecc07e29241feed8ee56.png

    219ae10c1ed167bdcfabf3d81058108f.png

    input标签

    如果form里面buttom标签不写type值，那么button标签会当做提交按钮（submit）

    35f95c2f06977427e4ea2f089bf9b5ec.png

    form里面input type button 这个只是普通按钮不会当做提交按钮

    16ad8157a1276f9ddd984305e491e369.png

    form里面input type submit 这个才是提交按钮。点击会发生post请求

    60f668c165271c0f1ac37c476f7b23ce.png

    checkbox

    多选框 此时点击网页小方框会打勾勾，但是点击你好文字不会打勾，体验比较差，

    6de852f414c9afa653acad17743fb0ec.png

    bb7cba0ce782b982f26d07c3daf79653.png

    修改代码加上lable标签写上属性，在input里添加id对应lable属性，此时点击你好文字会打上勾

    28ec8d506fa253a89c2b448e641adda8.png

    408e7d7b89829b07d32314433f7394cb.png

    还可以设置文本框，这样点击用户名，文本框会聚焦

    7e3a61ab06154435a856191d5a39a8d8.png

    44468df59c68ff17c73e9ef204e8833a.png

    优化写法，直接用label标签把input标签包裹

    e1315dc7e90638bc67bf614da7a2d1a5.png

    input标签必须要写上name值，这样提交上去才会有保存，GET提交就到输入栏里面（不推荐）

    10308c61c4db4845dacb371c9facd0b9.png

    6d85526022158bb105aa0c46913e44cb.png

    a3c497673eaf137b63531838da0fc6b7.png

    radio 单选框 n个单选框共同有1个name这样才能是单选框，没有同一个name的话就可以点很多（不推荐）

    0e1726e6a6280fc36bdf76e7ffadfdb9.png

    3c10b61bd19bacfd9d0f1b1b0083bc29.png

    下拉列表

    select(挑选）option(选项)disabled（失去，不能选中）selected（默认选中）

    mltiple（多选，可以选中多个选项）

    cab435f96cefba18eeb113111d3cd0d0.png

    bb500625790bdae08c3116dc28d7dba6.png

    textarea

    文本域，cols列 控制宽 rows行 控制高 一般用css控制宽高

    5820f89dee5b9c9785dbd0e65bcb44b3.png

    91699cbe4713f706b3d4c88ff3501353.png

    table

    e8b45690a5730a76eb094daf2ee2cc0e.png

    c814e763c2af22094f3c62108b944c58.png

    加上colgroup表格列属性 col表示每一列的属性

    28b377f1a11c70652ec55ae0acfb8acc.png

    94399e11ad8f87fcbeb6e9cb741d680b.png
    收起
    展开全文

  • a标签download属性无效_HTML 空标签，可替换标签

     2020-11-22 03:38:41
    空元素（empty element）一个空元素 ...在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， <input type="text"></input> 的闭标签是无效的 HTML。在 HTML 中有以下这些空元素：<area&g...

    e1cfd37f5eb897a14de4900ad35609dc.png

    空元素（empty element）

    一个空元素 可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， <input type="text"></input> 的闭标签是无效的 HTML。

    在 HTML 中有以下这些空元素：

    <area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<keygen>(HTML 5.2 草稿已移除)
<link>
<meta>
<parm>
<source>
<track>
<wbr>

    可替换元素（replaced element）

    CSS 里，可替换元素的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。

    CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和一些auto值。

    需要注意的是，一部分（并非全部）可替换元素，本身具有尺寸和基线（baseline），会被像vertical-align之类的一些 CSS 属性用到。

    参考：

    Web 技术文档

    收起
    展开全文

  • a标签download属性无效_HTML标签 a form iframe table

     2020-11-22 11:45:16
    标签定义超链接，用于从一个页面链接到另一个页面。如：<a href="www.baidu.com">点击后在当前页面打开百度首页</a><a> 元素最重要的属性是 href 属性，它指定链接的目标。通常在当前浏览器窗口...

    dcf472dcb60a2fa352b2b01ce63a1b4f.png

    <a> 标签定义超链接，用于从一个页面链接到另一个页面。

    如：

    <a href="www.baidu.com">点击后在当前页面打开百度首页</a>

    <a> 元素最重要的属性是 href 属性，它指定链接的目标。

    通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。

    target有五种属性值可以选：

    _self / _blank / _parent / framename / _top

    如：

     <a href="http://www.baidu.com" target="_self">点击后在默认的页面打开百度</a>
<a href="http://www.baidu.com" target="_blank">点击后在新窗口打开百度</a>
<a href="http://www.baidu.com" target="_parent">点击后在父框架集中打开百度</a>
<a href="http://www.baidu.com" target="framename">点击后在指定框架中打开百度</a>
<a href="http://www.baidu.com" target="_top">点击后在整个窗口中打开百度</a>

    href属性还可以选择 网址 + download ,点击后直接下载，如：

    <a href="http://www.baidu.com" download>下载</a>

    也可以选择 网址 + content-type:text-html ,点击后直接下载，如：

    <a href="http://www.baidu.com" content-type:text-html>下载</a>

    标签<a>还可以写无协议地址，如：

    <a href="//qq.com">QQ</a>

    双斜线的意思是:

    如果你是http协议，我就是http://www.qq.com
如果你是https协议，我就是https://www.qq.com

    令href="#abc"可以使链接被点击后跳转到当前页面的Id名为 abc 的元素处，这种方法叫做设置锚点,如：

    <a href="#abc">跳转到当前页面的某处</a>

    如果你装了node.js和http-server,那么在当前的文件夹内打开 Git Bash，输入 http-server -c-1 可以运行这个服务器

    49b047ea92bd7e7deb63081fdf68c666.png

    复制出现的第一个地址，如：http://192.168.42.167:8080 ,输入到浏览器

    fa1f114c4a2cb03a2067d26040cef04e.png

    我们能看到当前文件夹内的所有文件,在IP地址后加入文件名，可以看到文件运行效果

    9b656136d17bf08486cf4c49cb6d54f4.png

    同时，在命令窗口中，我们也可以看到服务器请求

    35770d3af2726a6901fac78e4467d5d8.png

    如果在文件Example011.html中加入一个跳转链接，如：

    <a href="#abc">跳转到页面内id名为abc的元素处</a>

    然后再点击，可以看到网址后自动加了 #abc

    d63c3c67c2b23dedec7191c2253f25ee.png

    不过跳转到页面内的锚点不发送请求

    如果代码改成

    <a href="#?name=www">跳转</a>

    网址就会变为

    http://192.168.42.167:8080/Example011.html#?name=www

    也可以令href的值为其他路径，如：

    <a href="./yyy.html">跳转到其他文件</a>

    如果要在浏览器显示一个点击后什么都不做的链接，可以用以下方法：

    <a href="javascript:;>这是一个点击后什么都不做的标签</a>

    不建议href="#",因为点击后会跳转到页面顶部，如果是href=" "，则会跳转到页面自身

    <form> 标签用于为用户输入创建 HTML 表单

    表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。

    表单用于向服务器传输数据。

    如：

    <!DOCTYPE html>

    以下为结果：

    727bc0446ab01285e9fb2e6cda110a1a.png

    服务器接收到的用户输入为：

    firstname=aaa&lastname=bbb

    注意：

    标签<input>中的属性type的值必须为submit才能点击提交，如果为button就不可以。

    标签<iframe>用于在一个网页中嵌套一个网页

    相当于打开一扇窗户，在窗户中看另一个网页，如：

    <iframe src="http://www.baidu.com/"></iframe>

    就是在当前页面中打开一个窗口，展示百度首页。

    <table> 标签定义 HTML 表格

    一个 HTML 表格包括 <table> 元素，一个或多个<tr>、<th> 以及<td> 元素。

    <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

    更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。如：

    <!doctype html>

    以下为结果：

    308a8df75c250d4d7f6401d94cf013aa.png
    收起
    展开全文

  • a标签download属性无效_HTML常用的几个标签

     2020-11-21 05:48:45
    本文主要讲述以下内容：<iframe><a>及伪协议<form><input><table>...iframe 标签 用于嵌套页面,新开一个窗口（沙箱隔离，引用第...name属性：与a标签的target属性一起用有奇效，会在ifr...
    收起

  • a标签download属性无效_html常用标签大全

     2020-11-14 13:35:20
    html中标签有很多，每一种标签都有着不同的用处，下面这篇文章给大家总结html常用的标签，每一...font 属性名=”属性值”>文字</font>size:控制字体大小.最小1 ~ 最大7。 如果设置范围不在1~7之间，设置无...
    收起
    html 自动换行

  • Html a标签 download属性失效原因

     千次阅读 2021-06-11 08:06:53
    HTML 4.01 与 HTML 5 之间的差异在 HTML5 中，download 属性是 标签的新属性。因此，download 是属于HTML5的新属性，失效原因分析如下：1、没有声明html5，需要再html文件头声明声明必须是 HTML 文档的第一行，位于 ...
    收起

  • a标签download属性无效_HTML5(1)- 语义化标签和多媒体

     2020-11-02 15:46:53
    新增的标签有：header：头部标签nav：导航标签main：主体标签article：独立的内容标签section：区段标签aside：侧边栏标签footer：尾部标签语义化标准主要针对搜索引擎的新标签在一个页面中可以使用多次IE9中需要把...
    收起

  • a标签download属性无效_（02）② HTML 元素、属性详解 | HTML

     2020-11-19 05:30:50
    本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」❗️❗️❗️以下链接为本文最新勘误篇章——《② HTML 元素、属性详解》< 上方面试题“参考答案详解”，请点击此处查看获取方式！前言： ...
    收起
    html 注释 html实体编码

  • a标签download属性无效_使用这些 CSS 属性选择器来提高前端开发效率

     2020-11-20 09:12:06
    但是不要担心，虽然属性选择器非常复杂和强大，但是它们很容易学习和使用。在本文中，我们将讨论它们是如何运行的，并给出一些如何使用它们的想法。通常将HTML属性放在方括号中，称为属性选择器，如下：[href] { ...
    收起
    css鼠标悬停样式 display属性 div隐藏与显示属性

  • a标签download无效解决办法

     千次阅读 2021-07-01 15:25:50
    a标签download无效解决办法 在开发时遇到要下载附件的需求，当时想到直接a标签herf里填上链接不就行了么。结果发现当附件是txt或者jpg等，这种浏览器可以直接打开文件类型时，浏览器会直接打开，不会下载。 那我们...
    收起
    javascript

  • a标签download属性不起作用

     万次阅读 多人点赞 2019-01-18 17:05:11
    a标签download属性不起作用 首先要明白的是，download属性是HTML5新增的属性，也就是作用在HTML5的基础之上，他可以使a标签的href属性进行下载，如果填写指就会更改你的下载名称，比如： <a href="/images/a....
    收起
    href

  • a标签的download属性修改文件名失效的原因

     千次阅读 2021-11-26 11:24:36
    在谷歌和火狐浏览器a标签download属性修改文件名失效的原因：不同源，访问的域名和href的域名要一致。 解决方法： 使用HTML5 Blob实现文件下载，先把文件以bobl的形式下载到当前页面，再创建a标签。 <a click=...
    收起
    html

  • 前端使用a标签下载文件download属性失效问题

     2022-07-27 14:33:35
    在使用a标签下载文件时，download属性可以更改下载的文件名，但是当a标签的下载链接跨域时，download属性将不会生效，原因是浏览器无法获取到文件，不能对他进行更改html5新特性a标签download属性只支持谷歌和火狐在...
    收起
    javascript html

  • 使用a标签下载跨域文件时，download属性失效

     千次阅读 2022-02-28 19:42:47
    在使用a标签下载文件时，download属性可以更改下载的文件名，但是当a标签的下载链接跨域时，download属性将不会生效，原因是浏览器无法获取到文件，不能对他进行更改 解决办法 将文件使用get请求获取到，转为blob...
    收起

  • js创建a标签下载设置download属性无效

     2021-08-12 15:56:00
    let xRquest = new XMLHttpRequest(); xRquest.open("GET", url, true); xRquest.responseType = "blob"; xRquest.onload = () =>... const a = document.createElement("a"); a.href = url..
    收起

  • a标签download属性IE兼容问题

     2021-12-01 15:41:38
    https://www.runoob.com/tags/att-a-download.html 一、实现下载 exportLeftMarketing(this.searchKeywords).then(res => { let blob = new Blob([res], {type: 'application/vnd.ms-excel'}) const link ...
    收起
    javascript

  • 前端a标签设置download属性失效的原因

     千次阅读 2019-03-12 18:19:38
    ==============小记================= ...在谷歌和火狐浏览器a标签download属性修改文件名失效是因为网络原因：注意访问于域名和href的域名要一致 【注】最好在服务端将文件名、文件类型等属性定义好由前端调用 ...
    收起

  • a标签 download属性不生效，一直还是预览图片BUG

     万次阅读 2018-07-09 15:22:53
    问题描述：前段时间一直想使用前端的a标签实现文件下载，使用的a标签的download属性就能实现。可是FTP服务器的图片还是一直只能预览无法直接下载。 #使用的地址是直接使用的IP端口的，原因就出在这里：当请求...
    收起

  • 解决跨域访问资源，a标签download属性失效的问题

     千次阅读 2020-10-22 14:07:38
    a标签中download属性可以更改下载文件的文件名。但是如果是跨域的话，download属性就会失效。 解决方案： <a click="downloadFile(fileUrl,fileName)">下载文件</a> function downloadFile(url, ...
    收起
    javascript

  • a标签中download属性因链接地址跨域含http://无效

     2017-04-11 01:54:35
    a标签中download属性因链接地址跨域含http://无效，下载不能重命名，有什么简单的解决方案么，最好直接在jsp页面就解决，不用转到后台，求大神解答 ``` <a href="http://...." download="xxx.docx">xxx.docx</a>&...
    收起
    跨域

  • HTML a 标签的 download 属性

     2021-06-11 15:18:01
    今天在“闲逛”之余无意间发现 a 标签居然有个 download 属性！ 定义和用法 download 属性规定被下载的超链接目标。 在 a 标签中必须设置 href 属性。 该属性也可以设置一个值来规定下载文件的名称。所允许的值没有...
    收起

  • a 标签跨域 导致download 属性无法使用的解决办法

     2021-01-18 14:41:59
    h5 中如果 a 标签url指向的 不是 同样域名 可能导致无法下载 或者 下载的 后缀不是自己想要的 怎么解决那 直接上代码 downFromOther(url, fileName){ var download = new XMLHttpRequest(); download.open("GET",...
    收起
    javascript html

  • 超链接静态资源下载中 download属性无效解决方案

     2021-10-06 11:20:55
    一般的，前端对后台的返回的静态数据链接下载是，可以通过动态生成a标签，并给对应标签上的download属性赋值，下载下来的文件就会以download的参数为文件名； 但是，如果是对CDN的链接数据进行动态生成a标签时，...
    收起
    javascript

  • 【vue】【bug】a标签下载文件会打开pdf，download属性设置无效

     千次阅读 2021-05-24 17:25:06
    a :href="form.pdf" :download="form.pdf.substr(form.pdf.lastIndexOf('/') + 1)" target="_blank">{{ form.pdf }}</a> 问题原因 1.pdf是浏览器可以解析的文件，无论如何都无法直接弹出下载框 2.
    收起
    nginx vue.js

  • IE浏览器a标签无法下载问题解决（IE浏览器a标签download属性不兼容问题解决）

     千次阅读 2021-03-09 11:37:45
    IE浏览器a标签无法下载问题解决（IE浏览器a标签download属性不兼容问题解决）
    收起

  • 关于a标签添加了download属性下载文件失败的问题

     千次阅读 2019-10-15 10:38:43
    1.描述 环境：webstorm vue.js 2.问题：下载未发现文件 3. 原因： （1）文件位置没有放对 （2）文件名字包含中文 4.解决 （1）把文件放到static目录（静态资源目录）...（2）上图：【看文件目录和a标签就行了】 ...
    收起

  • 【2017-11-25】a标签中的download属性详解

     万次阅读 2017-11-26 00:26:12
    在H5中，为a标签新增了一个download属性，来直接文件的下载； 一 : 浏览器的支持 ①download属性暂时只支持Google Chrome 和 Mozilla Firefox，其他浏览器均不支持该属性； ②download是H5新增的属性，H5以前...
    收起
    chrome firefox

  • HTML <a> download 属性 无法下载

     2021-05-08 15:10:08
    添加了download属性后，还是打开音频，图片也是，不能下载？？？ <p><img alt="" height="168" src=...
    收起
    vue.js

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,796
精华内容 2,318
热门标签
关键字：

a标签download属性无效