a标签常用属性——你是否都用过？

- - - 内容介绍
    - 一、target属性
    - 二、href属性
    - - 1、跳转
      - 2、假链接
      - 3、群发短信、发送邮件、拨打电话等
      - 4、锚点跳转
      - 5、打开本地资源或目录
      - 6、返回顶部
    - 三、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:[email protected]?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\" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >打开本地资源目录</a></li>

a标签常用属性——你是否都用过？

无法打开本地文件：

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\" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >打开本地资源目录</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:[email protected]?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标签常用属性——你是否都用过？

标签：a标签，href，download，target

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

欢迎评论留言!

a标签常用属性——你是否都用过？

目录

内容介绍

一、target属性

二、href属性

1、跳转

2、假链接

3、群发短信、发送邮件、拨打电话等

4、锚点跳转

5、打开本地资源或目录

6、返回顶部

三、download属性

四、完整代码

五、预览

继续阅读

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令详解

Compile workrave under windows &ndash; My exprience 在Windows上编译Workrave

没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！

门户通专访草根站长九天狼：做站贵在坚持

[转]如何成长为一名全栈工程师全栈工程师

tabpanel 使用问题

为什么把CSS放头部，script放下面

underscore模板功能的使用和学习

CSS之折叠菜单

web开发之前后端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

JavaScript的那些坑之事件代理事件代理事件阶段

ACS基本配置-权限等级管理

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题