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/