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搭建過程及出現問題