a 标签在前端应用中十分广泛. 下面介绍几类常用的应用.
1. 第一个当然是跳转链接了.
<a href="https://www.baidu.com">baidu</a>
2. 第二个能力是打电话.
<a href="tel:18877776666">call 我 </a>
3. 第三个是发邮件的功能.
<a href="mailto:10086@139.com"> 点我发邮件 </a>
4. 最后一个才是重点, a 标签的锚点作用.
<a href="#1">a 标签锚点作用, 点击不刷新页面哦 </a>
形式跟 id 选择器类似.
有啥作用?
用作置顶
单页面应用
4.1 用作置顶
案例演示:
- <div id="top">header</div>
- <div style="height: 3000px;">content</div>
- <div style="border:1px solid red; position:fixed; bottom:100px; right:20px;">
- <a href="#top"> 置顶 </a>
- </div>
如上给置顶按钮定位在页面右下角, 当垂直方向滚动条滚动到任意位置时, 点击置顶按钮, 页面就会跳转到设置有 id 为 top 元素的位置.
其实除了置顶外, 还可以定位到页面任意位置, 只要给锚点定位到的位置设置一个单独的 id 就行了.
4.2 单页面应用
上面的锚点操作你可能会发现页面的 url 地址多了一些字符, 而这些字符正好是 href 属性的值.
其实每次点击 a 标签都会给 url 添加 href 属性值 (覆盖并不会累加), 这个值叫做哈希值 (hash), 而且最重要的是, 手动改变 url 的哈希值, 对于浏览器来说, 页面都不会刷新. 而对于用户来说体验更好.
跟单页面有什么关系呢? 单页面应用简单来说就是字面意思, 整个网站或者应用都在一个页面, 而点击某一模块, 并不会跳转新页面或者不会再本页刷新. 由于 a 标签锚点的特性所以应用在单页面开发中再合适不过.
H5 中在 history 对象中新增了用于单页面开发的新方法. pushState 和 replaceState
来源: http://www.jianshu.com/p/a48f56972d90