样式

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

在所有浏览器中，链接的默认外观是：

  • 未被访问的链接带有下划线而且是蓝色的
  • 活动链接带有下划线而且是红色的
  • 已被访问的链接带有下划线而且是紫色的

链接默认样式

1
2
3
4
a:link {color: blue;text-decoration: underline;}    /* 未访问的链接 */
a:hover {color: blue;text-decoration: underline;}    /* 鼠标移动到链接上 */
a:active {color: red;text-decoration: underline;}     /* 鼠标按下但还未收起时的链接 */
a:visited {color: purple;text-decoration: underline;}    /* 已访问的链接 */

<a>不能自闭合，必须有开始标识与结束标识。

href

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

如果没有href属性，<a> 标签会表现的像是一个行内元素<span>标签，甚至没有默认的样式。如果href属性没有值或者值为空字符串则点击 <a> 标签会刷新当前页面。

href 属性的值可以是任何URL或URL片段。如果用户选择了 <a> 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。

href的值可以有很多种：

  • 绝对 URL - 指向另一个站点（href="http://www.example.com/index.html"）
  • 相对 URL - 指向站点内的某个文件（href="index.html"）
  • 锚 URL - 指向页面中的锚（href="#top"）
  • javascript代码 - 执行javascript代码(href="javascript:alert('a is clicked');")
  • 本地文件地址 - 在浏览器中打开本地文件(href="file:///Users/work/Desktop/test.txt")
  • 邮件地址 - 发送邮件(href="mailto://somebody@example.com")
  • 电话号码 - 打电话(href="tel:+86-10010")

⚠️注意事项

  • 除了相对URL和锚点，其它的表现都和在地址栏中输入相应href类似。
    亦和window.location.href=?差不多，值得注意的是，在console执行 window.location.href="file:///Users/work/Desktop/test.txt" 时会报错 Not allowed to load local resource:file:///Users/work/Desktop/test.txt 而执行 window.location.href="tel:+86-10010" 则根本没反应

  • 如果不是采用hash方式进行页面内导航的话，可以使用 href="#top" 或者 href="#" 链接返回到页面顶部 HTML5

target

<a> 标签的 target 属性规定在何处打开链接文档。

值 含义
_blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self 默认值，它使得目标文档载入并显示在相同的frame或者window中作为源文档。
_parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
<framename> 在指定的frame中打开被链接文档。

rel

<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。与 <link> 标签的 rel 属性类似，事实上许多值两者通用。
搜索引擎可以利用该属性获得更多有关链接的信息，在跳转的时候某些值也有特殊的用处。

值 含义
alternate 文档的可选版本（例如打印页、翻译页或镜像）
author 作者链接
bookmark 表明这个超链接是当前页面的一个永久链接（可被加入书签的）
external 表明指向外部链接
licence 描述版权信息
next 集合中的下一个文档
nofollow Google 使用 “nofollow”用于指定 Google 搜索引擎不要跟踪链接
noopener 防止新打开的页面通过window.opener访问父级页面
noreferrer 防止新打开页面时在http请求的header添加referrer字段
prev 集合中的前一个文档
help 指向帮助文档
tag 描述当前页面标识的页面

⚠️注意事项

  • 使用target时，考虑添加 rel="external noopener noreferrer" 以防止针对 window.opener API 的恶意行为。

download HTML5

<a> 标签的 download 属性指示浏览器下载URL而不是导航到它，因此将提示用户将链接（href）指向地址保存为本地文件。如果属性有一个值，那么它将在Save提示符中作为预填充的文件名使用（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是/和\会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。

⚠️注意事项

  • 此属性仅适用于同源 URLs。
  • 尽管HTTP URL需要位于同一源中，但是可以使用 blob: URLs 和 data: URLs ，以方便用户下载 JavaScript 方式生成的内容（例如使用在线绘图的Web应用创建的照片）。
  • 如果HTTP头的Content-Disposition赋予了一个不同于此属性的文件名，HTTP头属性Content-Disposition优先于此属性。
  • 如果HTTP头属性Content-Disposition被设置为inline(即Content-Disposition=’inline’)，那么Firefox优先考虑HTTP头Content-Disposition属性，就像文件名的情况，而Chrome优先考虑download属性。

type

该属性指定在一个 MIME type 链接目标的形式的媒体类型。其仅提供建议，并没有内置的功能。

废弃属性

以下属性在HTML5中已废弃，不推荐使用

  • charset
  • coords
  • name
  • rev
  • shape