1. IT分享知识网首页
  2. 未分类

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

老牧童 • • 未分类

a标签常用属性——你是否都用过？本文详细介绍了 HTML 中 a 标签的常用属性 包括 target top blank self parent framename 用于控制链接在何处打开 href 属性的各种用途 如跳转

大家好，欢迎来到IT知识分享网。

目录

内容介绍

  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>
  • 唤起
<!-- 唤起 --> <li><a href="tencent://message/?Menu=yes&uin=" data-type="">唤起</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:?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: #; 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> <!-- 唤起 --> <li><a href="tencent://message/?Menu=yes&uin=" data-type="">唤起</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:?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

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

欢迎评论留言!

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/110953.html

赞 (0)
老牧童老牧童
0
上一篇 2026-01-28 09:26
下一篇 2026-01-28 09:46

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信