-
2019-04-03 08:50:19
a标签的属性:
download:规定被下载的超链接目标。
href:规定链接指向的页面的 URL。
hreflang:规定被链接文档的语言。
media:规定被链接文档是为何种媒介/设备优化的。
rel:规定当前文档与被链接文档之间的关系。
target:规定在何处打开链接文档。
type:规定被链接文档的的 MIME 类型。
target属性
-
_blank 新窗口打开链接
-
_self 当前页打开链接
更多相关内容 -
-
a标签常用属性——你是否都用过?
2021-04-30 10:43:28a标签常用属性:target,href,download。内容介绍
a标签常用属性:target,href,download。
一、target属性
属性值 说明 _top 在整个窗口中打开 _parent 在父窗口打开 _self 默认,在当前框架下打开 _blank 在新窗口打开 _framename 在指定框架下打开 二、href属性
1、跳转
- 使用绝对路径和相对路径跳转指定URL
<!-- 使用绝对路径和相对路径跳转指定URL --> <li><a href="http://baidu.com">跳转网址 http://baidu.com</a></li>
- 跳转至指定page页面(.html)
<!-- 跳转至指定page页面(.html) --> <li><a href="/index.html">跳转指定页面 index.html</a></li>
- 打开指定文件资源
<!-- 打开指定文件资源 --> <li><a href="./image/1.jpg">打开指定文件资源 1.jpg</a></li>
- 唤起QQ
<!-- 唤起QQ --> <li><a href="tencent://message/?Menu=yes&uin=1434154130" data-type="qq">唤起QQ</a></li>
2、假链接
- 使用javascript:void(0);禁止跳转
<!-- 使用javascript:void(0);禁止跳转 --> <li><a href="javascript:void(0);">使用javascript:void(0);禁止跳转</a></li>
- 使用javascript:;禁止跳转
<!-- 使用javascript:;禁止跳转 --> <li><a href="javascript:;">使用javascript:;禁止跳转</a></li>
- 禁止默认跳转,执行自定义方法
<!-- 禁止默认跳转,执行自定义方法 --> <li><a href="javascript:;" onclick="selfMethod()">禁止默认跳转,执行自定义方法</a></li>
// 假链接,执行自定义方法 function selfMethod() { console.log("点击a标签:", new Date()); }
3、群发短信、发送邮件、拨打电话等
<!-- 拨打电话 --> <li><a href="sms:10086">给10086发短信</a></li> <!-- 发送短信 --> <li><a href="sms:10086?body=qxdy">给10086发短信,内容为"qxdy"</a></li> <!-- 群发短信 --> <li><a href="sms:10086,10000?body=qxdy">给10086和10000发短信,内容为"qxdy"</a></li> <!-- 发送邮件 --> <li><a href="mailto:10086@qq.com?subject=testSubject">给某人发邮件,内容为"testSubject"</a></li> <!-- 按钮同理 --> <li><button id="button">给10086打电话</button></li>
// 点击按钮拨打电话 let button = document.getElementById("button") button.onclick = function() { window.location.href = "tel:10086" }
4、锚点跳转
- 本页面锚点跳转
<!-- 锚点跳转(本页面) --> <li><a href="#missionTable">锚点跳转——本页面跳转</a></li>
- 其他页面锚点跳转
<!-- 锚点跳转(其他页面) --> <li><a href="https://blog.csdn.net/cainiaoyihao_/article/details/115868578#htmltable">锚点跳转——其他页面跳转</a></li>
5、打开本地资源或目录
<!-- 打开本地资源 --> <!-- file 报错"Not allowed to load local resource:"html文件在本地直接打开 --> <li><a href="file:\\\C:\qingshan\1.jpg">打开本地资源</a></li> <li><a href="file:\\\C:\qingshan\">打开本地资源目录</a></li>
无法打开本地文件:HTML文件要在本地直接打开
6、返回顶部
<!-- # 返回顶部 --> <li><a href="#">网页返回顶部</a></li>
三、download属性
<!-- download属性 --> <!-- 不加download属性,默认打开预览,download值为文件重命名 --> <!-- 网络图片download无效,点击为预览 --> <li><a href="./image/本地上传.png" download="test">点击下载本地文件,重命名为"test"</a></li>
四、完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>a标签常用属性</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } a { text-decoration: none; } .cons { position: absolute; top: 10%; left: 50%; transform: translate(-50%, 0%); } .lists { min-width: 200px; max-width: 70vw; margin: 0 auto; } li { width: 100%; list-style: none; min-height: 30px; line-height: 20px; text-align: center; font-size: 16px; margin-bottom: 20px; } li:nth-of-type(2n+1) a { color: green; } li:nth-of-type(2n) a { color: red; } #button { padding: 5px 15px; border-radius: 5px; } h6 { height: 20px; line-height: 20px; text-align: center; margin-bottom: 15px; background-color: #ccc; border-style: groove; outline: 0.5px #999 dashed; } .missionTable { width: 70vw; font-size: 13px; margin: 0 auto; margin-bottom: 20px; table-layout: fixed; border-bottom: none; border: 0.3px solid #999; } caption { height: 30px; line-height: 30px; border: 1px dashed #999; background-color: #ddd; } .missionTable, thead, th, tr, td { text-align: center; border-collapse: collapse; } .missionTable thead { border-radius: 6px 6px 0px 0px; border-bottom: 1px solid #D5D5D5; } .missionTable th { height: 25px; line-height: 25px; font-size: 14px; font-family: PingFang SC; color: #222222; border: 1px solid #999; background: #FCFDFD; } tbody tr { height: 25px; line-height: 25px; background: #FFFFFF; border-bottom: 0.4px solid #999; } tbody td { border-right: 1px solid #999; } </style> </head> <body> <div class="cons"> <ul class="lists"> <!-- target属性 --> <!-- _top :在整个窗口中打开--> <!-- _blank :在新窗口打开--> <!-- _self :默认,在当前框架下打开--> <!-- _parent :在父窗口打开--> <!-- _framename :在指定框架下打开--> <h6>target属性</h6> <table cellpadding="0" id="missionTable" class="missionTable"> <caption>target属性</caption> <thead> <th style="width:35%;">属性值</th> <th style="width:65%;">说明</th> </thead> <tbody id="missionTables"> <tr> <td>_top</td> <td>在整个窗口中打开</td> </tr> <tr> <td>_blank</td> <td>在新窗口打开</td> </tr> <tr> <td>_self</td> <td>默认,在当前框架下打开</td> </tr> <tr> <td>_parent</td> <td>在父窗口打开</td> </tr> <tr> <td>_framename</td> <td>在指定框架下打开</td> </tr> </tbody> </table> <!-- href属性 --> <h6>href属性——跳转</h6> <!-- 跳转 --> <!-- 使用绝对路径和相对路径跳转指定URL --> <li><a href="http://baidu.com">跳转网址 http://baidu.com</a></li> <!-- 跳转至指定page页面(.html) --> <li><a href="/index.html">跳转指定页面 index.html</a></li> <!-- 打开指定文件资源 --> <li><a href="./image/1.jpg">打开指定文件资源 1.jpg</a></li> <!-- 唤起QQ --> <li><a href="tencent://message/?Menu=yes&uin=1434154130" data-type="qq">唤起QQ</a></li> <h6>href属性——假链接</h6> <!-- 假链接 --> <!-- 使用javascript:void(0);禁止跳转 --> <li><a href="javascript:void(0);">使用javascript:void(0);禁止跳转</a></li> <!-- 使用javascript:;禁止跳转 --> <li><a href="javascript:;">使用javascript:;禁止跳转</a></li> <!-- 禁止默认跳转,执行自定义方法 --> <li><a href="javascript:;" onclick="selfMethod()">禁止默认跳转,执行自定义方法</a></li> <h6>href属性——锚点跳转</h6> <!-- 锚点跳转(本页面) --> <li><a href="#missionTable">锚点跳转——本页面跳转</a></li> <!-- 锚点跳转(其他页面) --> <li><a href="https://blog.csdn.net/cainiaoyihao_/article/details/115868578#htmltable">锚点跳转——其他页面跳转</a></li> <h6>href属性——打开本地资源或目录</h6> <!-- 打开本地资源 --> <!-- file 报错"Not allowed to load local resource:"html文件在本地直接打开 --> <li><a href="file:\\\C:\qingshan\1.jpg">打开本地资源</a></li> <li><a href="file:\\\C:\qingshan\">打开本地资源目录</a></li> <h6>download属性</h6> <!-- download属性 --> <!-- 不加download属性,默认打开预览,download值为文件重命名 --> <!-- 网络图片download无效,点击为预览 --> <li><a href="./image/本地上传.png" download="test">点击下载本地文件,重命名为"test"</a></li> <h6>跳转调用功能</h6> <!-- 拨打电话 --> <li><a href="sms:10086">给10086发短信</a></li> <!-- 发送短信 --> <li><a href="sms:10086?body=qxdy">给10086发短信,内容为"qxdy"</a></li> <!-- 群发短信 --> <li><a href="sms:10086,10000?body=qxdy">给10086和10000发短信,内容为"qxdy"</a></li> <!-- 发送邮件 --> <li><a href="mailto:10086@qq.com?subject=testSubject">给某人发邮件,内容为"testSubject"</a></li> <!-- 按钮同理 --> <li><button id="button">给10086打电话</button></li> <h6>返回顶部</h6> <!-- # 返回顶部 --> <li><a href="#">网页返回顶部</a></li> </ul> </div> <script> // 点击按钮拨打电话 let button = document.getElementById("button") button.onclick = function() { window.location.href = "tel:10086" } // 假链接,执行自定义方法 function selfMethod() { console.log("点击a标签:", new Date()); } </script> </body> </html>
五、预览
标签:a标签,href,download,target
更多演示案例,查看 案例演示
欢迎评论留言!
-
a标签及属性
2021-07-26 10:43:40a标签及属性 1. a 标签的作用 ...一个a标签必须有href属性 跳转的是地址,地址前要加上http://或者https:// <a href="http://news.baidu.com/">百度新闻</a> <br><br><br&a标签及属性
1. a 标签的作用
就是用于控制页面之间跳转
2. a 标签的格式
<a href="跳转的目标界面">展示内容</a>
3. 注意点
- a 标签不仅可以让文字可以点击。还有图片也可以点击跳转
- 一个a标签必须有href属性
- 跳转的是地址,地址前要加上http://或者https://
-
<a href="http://news.baidu.com/">百度新闻</a> <br><br><br>
<a href="https://baike.baidu.com/item/%E8%82%96%E6%88%98/18866899?fr=aladdin"> <img src="../photo/sean/gg2.jpg" width="100"></a> <a href="a.href标签.html" tagert="_self">返回</a> </center>
4. a标签的属性
- a标签中有一个target属性,这个属性就是用来控制如何跳转的。
- self: 用于当前页面跳转。
- blank:用于在新的页面跳转。
- a标签中还有一个title属性,和img中的提title一样,都是用来控制鼠标悬停显示的提示文本。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="test.html" tagert="_self"title="点击就能看到神奇的东西">idol</a> <a href="a标签.html" tagert="_blank"title="点击就能看到神奇的东西">点我</a> </body> </html>
-
a标签download属性
2020-04-14 17:14:31download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,download属性为下载后的文件名 用法1:下载该本地图片,并默认命名 <a href="../../assets/img/213.png" download ...download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,download属性为下载后的文件名
用法1:下载该本地图片,并默认命名
<a href="../../assets/img/213.png" download target="_blank"> 下载图片</a>
用法2:下载该本地图片,并命名为img
<a href="../../assets/img/213.png" download="img" target="_blank"> 下载图片</a>
注意: href属性的地址必须是前端js非跨域的地址(限于同源文件),如果引用的是第三方的网站或者是调用后台的接口,这时download就会不起作用。
在这种情况下如果你是下载浏览器无法解析的文件,例如.exe,.xlsx…那么浏览器也会自动下载,但是如果你使用浏览器可以解析的文件,比如.txt,.png…浏览器就会采取预览模式,所以无论如何你都无法直接弹出下载框。如下图所示:
<a href="http://pengxi.honggv.cn:9099/image/5be411a7-0800-49a2-8e5b-866fc5c70b19.png" download="username" target="_blank"> 下载</a>
所以如果真的出现上述情况,那么只有一种办法,提示用户进行手动的右键保存。
参考:https://blog.csdn.net/zgjsxzlx/article/details/86543022另一种解决方案是通过后台修改配置.
参考:https://www.cnblogs.com/liujiacai/p/11732654.html -
a标签的target属性
2019-10-31 17:00:17a标签的target属性前端a标签最重要的属性是href属性,实现页面的跳转。但是在当前页面显示还是在新页面中显示需要使用target属性控制 前端a标签最重要的属性是href属性,实现页面的跳转。但是在当前页面显示还是在新... -
设置a标签属性样式
2019-12-22 23:15:01设置a标签的属性样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; ... -
Html a标签 download属性失效原因
2021-06-11 08:06:53因此,download 是属于HTML5的新属性,失效原因分析如下:1、没有声明html5,需要再html文件头声明声明必须是 HTML 文档的第一行,位于 标签之前。声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML ... -
HTML【a】标签属性大全!!!
2020-05-22 09:38:41a href="URL">链接文本</a> 属性 值 描述 download filename 指定下载链接 href URL 规定链接的目标 URL。 hreflang language_code 规定目标 URL 的基准语言。仅在 href ... -
设置a标签的download属性实现下载功能
2020-07-23 23:07:27a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。 href和download是我们下载文件所需要的两个属性: href:是指这个超链接指向的url地址; download:... -
a标签 rel属性
2018-12-10 14:28:15a标签常用rel属性 rel=’external’ 此属性的意思是告诉搜索引擎,这个链接不是本站链接,其实作用相当于target=‘_blank’。 为什么要这样写呢?因为有些网站因为是采用严格的DOCTYPE声名的,如果你在网页源码中的... -
html中a标签及其属性的使用
2020-03-04 15:53:57a标签:该标签是链接标签 用href表示该链接的地址 href属性:当该属性的值为#表示为该链接留一个占位符,没有任何意义,单纯表示超链接,也表示回到该页面的底部,若我们想回到页面的任意位置我们可以把该值设为#... -
如何禁用 a 标签的点击事件 disabled属性 和 pointer-events属性值详解
2018-05-02 11:34:11首先 ,大家要知道: a标签 是没有disable 属性的 , 如果想用disable 禁止a标签的点击事件,也是可以实现的;往下看1. a标签 要用 disable 属性,必须和 pointer-events属性一起使用 ,例子 如下: HTML 部分... -
React中使用动态创建的a标签href属性异步下载文件
2020-07-15 14:21:32这里面因为涉及到了后台api,所以是异步行为,这时候不能直接给a标签href属性赋值,因为点击a标签的时候会同时执行onClick方法和href属性,所以这里使用document.createElement(‘a’)动态生成a标签来实现异步下载... -
a标签download属性修改文件名失效
2018-10-17 16:08:43<a href="'+fileurl+'" download="'+filename+'"> fileName为下载文件要修改的名字 ...在谷歌和火狐浏览器a标签download属性修改文件名失效是因为网络原因:注意访... -
a标签download属性不起作用
2019-01-18 17:05:11a标签download属性不起作用 首先要明白的是,download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,如果填写指就会更改你的下载名称,比如: <a href="/images/a.... -
a标签download属性修改文件名
2020-01-16 14:57:20静态文件下载时,可通过downloads属性修改文件名,如下所述: ...注意事项:a标签download属性只支持谷歌和火狐浏览器,不支持IE(IE不支持html5 新特性a标签download属性)。同时访问的域名与a标签内href的域... -
a标签的href属性长度限制
2018-02-28 09:35:10a标签的href属性长度限制 最近在前端使用JS处理数据然后保存成Excel表格,发现数据量太大时,a标签的href属性就不会生效。(通过a标签的download属性和href属性实现下载) 然后google了一下, 第一个回答: ... -
python爬虫获取任意页面的标签和属性(包括获取a标签的href属性)
2019-12-07 21:04:08# coding=utf-8 from bs4 import BeautifulSoup ...# 定义一个获取url页面下label标签的attr属性的函数 def getHtml(url, label, attr): response = requests.get(url) response.encoding = 'utf-8' ... -
scrapy css选择器提取a标签内href属性值
2019-05-16 10:47:07示例Html: <div class='abc'> <a href='https://blog.csdn.net/weixin_41767339'> Hello word! </a> </div>...response.css("div.abc a::attr(href)").extract()[0] ... -
a标签没有disabled属性
2017-07-20 20:49:31a标签没有disabled属性,那么当我们想禁用a标签的点击事件的时候按照下面方法设置。 下面是html代码: 进入 js代码如下: $(“#entry”).attr("disabled",true); $("#entry").css("pointer-events","none... -
a标签的title属性
2017-08-13 12:19:29a标签的title属性 【一】title属性 可以让鼠标悬停在超链接上的时候显示该超链接的文字注释 <a herf="123.html" title="这是一个123界面的网页">点击这里跳转到123网页</a>如果希望注释多行显示的,可以使用 ;... -
a 标签 download 属性不起作用,或者下载的图片无法查看
2018-11-26 19:18:54a 标签 download 属性不起作用,或者下载的图片无法查看 问题描述 download 是 a 标签 html5 的新属性,可以点击下载文件,初次使用,经常会出现无法点击的情况,可能有以下原因,排除下: 解决方案 必须设置 ... -
div 属性 DIV标签属性有什么如何设置属性
2019-09-19 15:03:59div 属性介绍,对DIV可加属性有哪些,DIV属性一览表DIVCSS5整理 DIVCSS5给大家整理DIV标签内常用属性,同时通过div各属性小实例,让大家认识各属性并掌握属性。 div标签内常用属性列表 1、style 设置css样式(扩展... -
超链接a标签的属性target的可选值有哪些以及区别
2015-04-06 23:52:46超链接a标签的属性target的可选值有哪些以及区别 1、 2、 3、 4、 5、 -
【a标签的使用和属性】
2017-05-14 00:51:32【a标签的使用和属性】 a标签的使用和属性 a标签的使用 属性(属性值) 1、href(需要跳转到哪个页面)(存放跳转的地址url) 2、target(打开目标的形式)(定义在何处打开链接)... -
给<a>标签添加不可用属性
2018-01-20 14:41:481. 简单设置a标签的disabled属性就可以阻止事件(onclick)还有href吗? 锚标签本身不支持disabled,所以简单设置了disabled属性是没有任何效果的 2. 如何阻止href? 首先看一下 关于a标签的onclick与href的执行... -
a 标签herf 属性链接 url有中文 乱码的问题解决方法
2018-12-19 11:42:46import requests import urllib.parse url = "...amp;housename=%BB%EB%BA%D3%B1%A4%C4%CF46%A1%A247%A1%A254&HouseLocation=%B6%AB%C1%EA%C7%F8%... -
a标签的href和onclick属性同时存在点击事件先触发
2019-06-04 20:58:59onclick的事件被先执行,其次是href中定义的(页面跳转或者javascript) 同时存在两个定义的时候(onclick与href都定义了),如果想阻止href的动作,在onclick必须加上return false;...如果页面过长有滚动条,且...