a标签常⽤属性——你是否都⽤过？
⽬录
内容介绍
  a标签常⽤属性：target，href，download。
⼀、target属性
属性值说明
_top在整个窗⼝中打开
_parent在⽗窗⼝打开
_self默认，在当前框架下打开
_blank在新窗⼝打开_framename在指定框架下打开⼆、href属性
1、跳转
使⽤绝对路径和相对路径跳转指定URL
<!-- 使⽤绝对路径和相对路径跳转指定URL -->
<li><a href="baidu">跳转⽹址 baidu</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、发短信、发送邮件、等
详情：
<!-- -->
<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?subject=testSubject">给某⼈发邮件，内容为"testSubject"</a></li>
<!-- 按钮同理 -->
<li><button id="button">给10086打电话</button></li>
// 点击按钮
let button = ElementById("button")
window.location.href ="tel:10086"
}
4、锚点跳转
本页⾯锚点跳转
<!-- 锚点跳转(本页⾯) -->
<li><a href="#missionTable">锚点跳转——本页⾯跳转</a></li>
其他页⾯锚点跳转
<!-- 锚点跳转(其他页⾯) -->
<li><a href="blog.csdn/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{
href标签怎么用
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 >属性值</th>
<th >说明</th>
</thead>
<tbody id="missionTables">
<tr>
<td>_top</td>
<td>在整个窗⼝中打开</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="baidu">跳转⽹址 baidu</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="blog.csdn/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?subject=testSubject">给某⼈发邮件，内容为"testSubject"</a></li>
<!-- 按钮同理 -->
<li><button id="button">给10086打电话</button></li>
<h6>返回顶部</h6>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。