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

属性值	说明
_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>

五、预览

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

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

欢迎评论留言!

a标签常用属性——你是否都用过？相关推荐

Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架一.input标签常用属性表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
附录3-form标签常用属性
目录 1 action 2 target 3 method 4 enctype 1 action 如果form表单未指定action值,action的默认值为当前页面的URL地址如果你指定 ...
Audio标签常用属性
前景过程: 在经历了一个星期的小项目,在做网易云音乐的时候,补充了新的知识点:audio的属性的使用. audio标签概述: 用来定义声音.下面看看属性们.测试的时候手上没有音乐的话src可以用我的 ...
5中div标签有没有url属性_[网页编程]-03 CSS 常用属性
字体处理常用属性 <!DOCTYPE html> <html><head><meta charset="utf-8"><tit ...
html5 ins标签,HTML ins标签常用的用法有哪些？HTML ins常用属性的介绍
HTML ins标签常用的用法有哪些?HTML ins常用属性的介绍都在这里,本篇文章主要介绍了html ins标签用法和定义都有什么,还有一些html ins标签常用属性的介绍 HTML ins标签 ...
bean标签的常用属性
这篇文章总结spring中bean标签的常用属性. bean标签常用属性有: id name class factory-method factory-bean init-method destory ...
html5语言在tr下下拉列表,5-HTML列表， table表格标签及其属性-Go语言中文社区
一.有序列表 (ordered list) 格式: 有序列表有序列表有序列表语义及运用: 给一堆数据添加列表语义,数据有先后之分.常运用于歌单,排行榜等需要列出先后顺序的列表. 注意点: 1. ...
html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构网页的内容二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
常用的HTML标签和属性解释
基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等 <TITLE>---</TITLE>,包含 ...

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

目录

内容介绍

一、target属性

二、href属性

1、跳转

2、假链接

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

4、锚点跳转

5、打开本地资源或目录

6、返回顶部

三、download属性

四、完整代码

五、预览

a标签常用属性——你是否都用过？相关推荐

最新文章

热门文章