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

置顶人间小美味695

已于 2022-11-19 21:53:02 修改

阅读量1.4w

点赞数 23

分类专栏：前端 # JavaScript 文章标签： html a标签 href

于 2021-05-07 10:03:29 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/116296294

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 7 订阅

订阅专栏

前端

25 篇文章 8 订阅

订阅专栏

属性值	说明
_top	在整个窗口中打开
_parent	在父窗口打开
_self	默认，在当前框架下打开
_blank	在新窗口打开
_framename	在指定框架下打开

<!-- 拨打电话 -->
<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>