精华内容
下载资源
问答
  • 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:28
    a标签常用属性: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、群发短信、发送邮件、拨打电话等

    详情:使用 a标签 和 js 群发短信

    <!-- 拨打电话 -->
    <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:40
    a标签属性 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:31
    download属性是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:17
    a标签的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:41
    a href="URL">链接文本</a> 属性 值 描述 download filename 指定下载链接 href URL 规定链接的目标 URL。 hreflang language_code 规定目标 URL 的基准语言。仅在 href ...
  • a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。 href和download是我们下载文件所需要的两个属性: href:是指这个超链接指向的url地址; download:...
  • a标签 rel属性

    千次阅读 2018-12-10 14:28:15
    a标签常用rel属性 rel=’external’ 此属性的意思是告诉搜索引擎,这个链接不是本站链接,其实作用相当于target=‘_blank’。 为什么要这样写呢?因为有些网站因为是采用严格的DOCTYPE声名的,如果你在网页源码中的...
  • html中a标签及其属性的使用

    千次阅读 2020-03-04 15:53:57
    a标签:该标签是链接标签 用href表示该链接的地址 href属性:当该属性的值为#表示为该链接留一个占位符,没有任何意义,单纯表示超链接,也表示回到该页面的底部,若我们想回到页面的任意位置我们可以把该值设为#...
  • 首先 ,大家要知道: a标签 是没有disable 属性的 , 如果想用disable 禁止a标签的点击事件,也是可以实现的;往下看1. a标签 要用 disable 属性,必须和 pointer-events属性一起使用 ,例子 如下: HTML 部分...
  • 这里面因为涉及到了后台api,所以是异步行为,这时候不能直接给a标签href属性赋值,因为点击a标签的时候会同时执行onClick方法和href属性,所以这里使用document.createElement(‘a’)动态生成a标签来实现异步下载...
  • a标签download属性修改文件名失效

    万次阅读 2018-10-17 16:08:43
    &lt;a href="'+fileurl+'" download="'+filename+'"&gt; fileName为下载文件要修改的名字 ...在谷歌和火狐浏览器a标签download属性修改文件名失效是因为网络原因:注意访...
  • a标签download属性不起作用

    万次阅读 多人点赞 2019-01-18 17:05:11
    a标签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:10
    a标签的href属性长度限制 最近在前端使用JS处理数据然后保存成Excel表格,发现数据量太大时,a标签的href属性就不会生效。(通过a标签的download属性和href属性实现下载) 然后google了一下, 第一个回答: ...
  • # coding=utf-8 from bs4 import BeautifulSoup ...# 定义一个获取url页面下label标签的attr属性的函数 def getHtml(url, label, attr): response = requests.get(url) response.encoding = 'utf-8' ...
  • 示例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:31
    a标签没有disabled属性,那么当我们想禁用a标签的点击事件的时候按照下面方法设置。 下面是html代码:  进入 js代码如下: $(“#entry”).attr("disabled",true); $("#entry").css("pointer-events","none...
  • a标签的title属性

    千次阅读 2017-08-13 12:19:29
    a标签的title属性 【一】title属性 可以让鼠标悬停在超链接上的时候显示该超链接的文字注释 <a herf="123.html" title="这是一个123界面的网页">点击这里跳转到123网页</a>如果希望注释多行显示的,可以使用 ;...
  • a 标签 download 属性不起作用,或者下载的图片无法查看 问题描述 download 是 a 标签 html5 的新属性,可以点击下载文件,初次使用,经常会出现无法点击的情况,可能以下原因,排除下: 解决方案 必须设置 ...
  • div 属性介绍,对DIV可加属性有哪些,DIV属性一览表DIVCSS5整理 DIVCSS5给大家整理DIV标签内常用属性,同时通过div各属性小实例,让大家认识各属性并掌握属性。 div标签内常用属性列表 1、style 设置css样式(扩展...
  • 超链接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:48
    1. 简单设置a标签的disabled属性就可以阻止事件(onclick)还有href吗? 锚标签本身不支持disabled,所以简单设置了disabled属性是没有任何效果的 2. 如何阻止href? 首先看一下 关于a标签的onclick与href的执行...
  • import requests import urllib.parse url = "...amp;housename=%BB%EB%BA%D3%B1%A4%C4%CF46%A1%A247%A1%A254&amp;HouseLocation=%B6%AB%C1%EA%C7%F8%...
  • onclick的事件被先执行,其次是href中定义的(页面跳转或者javascript) 同时存在两个定义的时候(onclick与href都定义了),如果想阻止href的动作,在onclick必须加上return false;...如果页面过长滚动条,且...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 693,179
精华内容 277,271
关键字:

属于a标签的属性有