18910140161

Css

首页 >> 前端开发 >> Css

一个标签的小神奇效果

顺晟科技

2021-09-09 10:56:05

187

a标签小妙用

大家都知道a标签是超链接跳转，发邮箱，打电话，也可以做锚点，页面跳转

超链接跳转

target的属性：

_self 默认，当前页面加载_blank 新窗口打开_parent 父窗口打开，如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同。_top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.baidu.com" target="_blank">百度一下</a>

不想跳转页面的话，可以使用 href="javascript:void(0)"

<a href="javascript:void(0)">不跳转</a>

发邮箱

<a href="mailto:m.bluth@example.com">Email</a>

就是点击Email会弹出系统的发邮件窗口

打电话

<a href="tel:12345678901">12345678901</a>

在移动端点击12345678901，可以拨打电话

锚点的使用

页内跳转

a标签的href属性的值设置为 # 和 需要跳转到其他标签的id的这， #id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面跳转</title>
</head>
<body>
    <h1 id="h1">热爱前端</h1>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div>28</div>
    <div>29</div>
    <div>30</div>
    <a href="#h1">跳转到热爱前端</a>
    <a href="#h2">跳转到热爱分享</a>
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
    <div>08</div>
    <div>09</div>
    <div>10</div>
    <h2 id="h2">热爱分享</h2>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div>28</div>
    <div>29</div>
    <div>30</div>
</body>
</html>

返回顶部

这里还有个小技巧，就是href的值设置为#，就可以回到顶部

<a href="#">返回顶部</a>

不过这里需要注意下： 如果页面不是首页（根目录），是子路由的话，使用href="#"，会跳转到首页的

优化返回顶部滚动

这里使用 scroll-behavior: smooth; 这个css样式的话, 会平稳的滚动

scroll-behavior MDN教程详解

<style>
    html{
        scroll-behavior: smooth;
    }
</style>
<a href="#">平稳返回顶部</a>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平稳返回顶部</title>
    <style>
        html{
            scroll-behavior: smooth;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div>28</div>
    <div>29</div>
    <div>30</div>
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
    <div>08</div>
    <div>09</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div>28</div>
    <div>29</div>
    <div>30</div>
    <a href="#">返回顶部</a>
</body>
</html>

全站返回顶部

想要做全局的返回顶部通用组件，就使用css + js 结合了，也比较简单， 上代码：

download属性下载文件

download的值是下载保存的文件名

<a href="./img/lufei.png" download="lufei.png">点击下载</a>

使用download属性将 <canvas> 保存为 PNG 格式

var link = document.createElement('a');
link.innerHTML = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

可以看看这个例子 https://jsfiddle.net/codepo8/V6ufG/2/

上一篇：一个不起眼但非常实用的功能介绍 下一篇：CSS的移动端适应原理(1) -屏幕
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！