精华内容
下载资源
问答
我要提问
  • 属于a标签的属性有 a标签有哪些属性 万次阅读
    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

    更多演示案例，查看 案例演示

    欢迎评论留言!

    收起
    展开全文
    html href

  • 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>
    收起
    展开全文
    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

    收起
    展开全文
    javascript download

  • 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 css

  • 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 ...
    收起
    javascript css html

  • 设置a标签的download属性实现下载功能

     千次阅读 2020-07-23 23:07:27
    a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。 href和download是我们下载文件所需要的两个属性： href：是指这个超链接指向的url地址； download：...
    收起
    下载文件

  • a标签 rel属性

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

  • html中a标签及其属性的使用

     千次阅读 2020-03-04 15:53:57
    a标签：该标签是链接标签 用href表示该链接的地址 href属性：当该属性的值为#表示为该链接留一个占位符，没有任何意义，单纯表示超链接，也表示回到该页面的底部，若我们想回到页面的任意位置我们可以把该值设为#...
    收起
    html css3

  • 如何禁用 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标签来实现异步下载...
    收起
    href 异步下载文件

  • 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....
    收起
    href download

  • 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了一下， 第一个回答： ...
    收起
    html 文件下载

  • 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' ...
    收起
    Python爬虫 Python

  • 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: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 属性不起作用，或者下载的图片无法查看

     千次阅读 2018-11-26 19:18:54
    a 标签 download 属性不起作用，或者下载的图片无法查看 问题描述 download 是 a 标签 html5 的新属性，可以点击下载文件，初次使用，经常会出现无法点击的情况，可能有以下原因，排除下： 解决方案 必须设置 ...
    收起

  • div 属性 DIV标签属性有什么如何设置属性

     千次阅读 2019-09-19 15:03:59
    div 属性介绍，对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、
    收起
    HTML 面试题

  • 【a标签的使用和属性】

     千次阅读 2017-05-14 00:51:32
    【a标签的使用和属性】 a标签的使用和属性 a标签的使用 属性（属性值） 1、href（需要跳转到哪个页面）（存放跳转的地址url） 2、target（打开目标的形式）（定义在何处打开链接）...
    收起
    html css

  • 给<a>标签添加不可用属性

     千次阅读 2018-01-20 14:41:48
    1. 简单设置a标签的disabled属性就可以阻止事件（onclick）还有href吗？ 锚标签本身不支持disabled，所以简单设置了disabled属性是没有任何效果的 2. 如何阻止href？ 首先看一下 关于a标签的onclick与href的执行...
    收起
    html

  • a 标签herf 属性链接 url有中文 乱码的问题解决方法

     千次阅读 2018-12-19 11:42:46
    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%...
    收起

  • a标签的href和onclick属性同时存在点击事件先触发

     千次阅读 2019-06-04 20:58:59
    onclick的事件被先执行，其次是href中定义的（页面跳转或者javascript） 同时存在两个定义的时候（onclick与href都定义了），如果想阻止href的动作，在onclick必须加上return false;...如果页面过长有滚动条，且...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 693,179
精华内容 277,271
热门标签
关键字：

属于a标签的属性有