a标签小妙用
a标签小妙用
大家都知道a标签是超链接跳转，发邮箱，打电话，也可以做锚点，页面跳转
超链接跳转
【a标签小妙用】target的属性：
_self默认，当前页面加载_blank新窗口打开_parent父窗口打开，如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同。_top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
百度一下
百度一下不想跳转页面的话，可以使用
href="javascript:void(0)"不跳转发邮箱
Email就是点击
Email会弹出系统的发邮件窗口打电话
12345678901在移动端点击
12345678901，可以拨打电话锚点的使用 页内跳转
a标签的href属性的值设置为 # 和 需要跳转到其他标签的id的这，
#id
页面跳转 - 锐客网
热爱前端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
跳转到热爱前端
跳转到热爱分享
01
02
03
04
05
06
07
08
09
10
热爱分享
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
返回顶部
这里还有个小技巧，就是href的值设置为
#，就可以回到顶部返回顶部不过这里需要注意下： 如果页面不是首页（根目录），是子路由的话，使用
href="https://www.it610.com/article/#"，会跳转到首页的优化返回顶部滚动
这里使用
scroll-behavior: smooth;
这个css样式的话, 会平稳的滚动scroll-behavior MDN教程详解
html{
scroll-behavior: smooth;
}平稳返回顶部
平稳返回顶部 - 锐客网 html{
scroll-behavior: smooth;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
返回顶部
全站返回顶部
想要做全局的返回顶部通用组件，就使用css + js 结合了，也比较简单， 上代码：
download属性下载文件
download的值是下载保存的文件名点击下载使用
download属性将 var link = document.createElement('a');
link.innerHTML = 'download image';
link.addEventListener('click', function(ev) {
link.href = https://www.it610.com/article/canvas.toDataURL();
link.download ="mypainting.png";
}, false);
document.body.appendChild(link);
可以看看这个例子 https://jsfiddle.net/codepo8/V6ufG/2/
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）