<a></a > 是 html 中非常常用且重要的标签, 本文将会介绍 < a></a > 的各种属性以及一些使用经验.
属性
href
href 是 < a></a > 中最重要的标签之一, 如果不加 href 属性,<a></a > 标签在浏览器中的表现会和 < span></span > 一致, 失去了 < a></a > 的基本样式.
- <a href="www.baidu.com">
- 链接
- </a>
- 最普通的用法, 点击跳转, 发出 http 的 get 请求.
- <a href="#">
- 返回顶部
- </a>
- 当 href 为 "#" 或者 "#top" 时, 点击
- < a>
- </a>
- 标签页面会跳转到顶部, 不发出 http 请求
- <a href="javascript: alert('Hello');">
- Hello
- </a>
这种写法被称为 JavaScript 伪协议, 在 JavaScript: 的后面添加 JavaScript 代码就可以点击执行, 但是强烈不推荐.
download
该属性是 Html5 新增的属性, 有经验的前端开发者都知道, 当 < a > 标签的链接指向一个文件的地址时, 如果该文件是. text,.PDF,.PNG 这种浏览器可以打开的文件类型时, 点击链接会直接将该文件在浏览器中打开, 但是如果加上 download, 则会直接下载到本地, 而不是在浏览器中打开. 但是注意, 该属性必须遵循浏览器的同源协议, 否则不会生效
- <a href="www.aaa.com/test.txt" download>
- 文本文件
- </a>
- target
target 表示目标网页在哪里打开
- <a href="www.baidu.com" target="_self">
- 百度
- </a>
- 在本页面打开新页面, 默认值
- <a href="www.baidu.com" target="_blank">
- 百度
- </a>
- 在新的窗口打开新页面
- <a href="www.baidu.com" target="_parent">
- 百度
- </a>
- 一般搭配
- < iframe>
- 使用, 在父级对象中打开网页
- <a href="www.baidu.com" target="_top">
- 百度
- </a>
- 一般搭配
- < iframe>
- 使用, 在顶级对象中打开网页
- <a href="www.baidu.com" target="自定义名字">
搭配 < iframe > 的 name 属性使用, 在 target 中填对应 < iframe > 的 name, 则可以在指定 < iframe > 中打开网页
题外话: Google 搜索中打开新网页是在本页面打开的, 这与国内用户的习惯可能不太符合, 在 Google 搜索的设置 -> 搜索设置中可以修改成在新窗口打开.
来源: http://www.jianshu.com/p/c3661181c8b9