共计 3390 个字符，预计需要花费 9 分钟才能阅读完成。
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/
正文完