HTML 链接<a>标签

定义和用法

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

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

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

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

提示：您可能已经注意到了，W3School 站点内的链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类向文本超链接添加复杂而多样的样式。

提示和注释

提示：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属。

提示：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。

提示：请使用 CSS 来设置链接的样式。

属性

5 ：HTML5中的新属性

属性	值	描述	例子	浏览器支持
download 5	filename（规定作为文件名来使用的文本。）	规定被下载的超链接目标。	<a href="/images/myw3schoolimage.jpg" `download="w3logo"`></a>	只有 Firefox 和 Chrome 支持
href	url 超链接的 URL。可能的值：绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"）相对 URL - 指向站点内的某个文件（href="index.htm"）锚 URL - 指向页面中的锚（href="#top"）	规定链接指向的页面的 URL。	<a href="http://www.w3school.com.cn"> W3School </a>	所有浏览器都支持
hreflang	hreflang="value" 双字符的语言代码，指定被链接文档的语言。	规定被链接文档的语言。	<a href="http://www.w3school.com.cn" hreflang="zh"> W3School </a>	主流的浏览器几乎都不支持
media 5	media_query	规定被链接文档是为何种媒介/设备优化的。该属性用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的。该属性可接受多个值。只能在 href 属性存在时使用。	<a href="att_a_media.asp?output=print" `media="print and (resolution:300dpi)"`> 打开用于打印的 media 属性页面 </a>
rel	text	规定当前文档与被链接文档之间的关系。用于 <a> 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 <a> 标签中同时使用。 rel 或 rev 属性的值都是以空格分隔的关系列表。实际的关系名和它们的含义取决于你自己：HTML 或 XHTML 标准并没有正式提出这两种属性。例如，一系列文档中的某个文档可能会在链接中包含它的关系：	<a rel="friend" href="http://www.w3c.com/">w3c</a>	所有浏览器都支持 rel 属性。
target	_blank (在新窗口中打开被链接文档。) _self (默认。在相同的框架中打开被链接文档。) _parent (在父框架集中打开被链接文档。) _top (在整个窗口中打开被链接文档。) framename (在指定的框架中打开被链接文档。)	规定在何处打开链接文档。	<a href="http://www.w3school.com.cn/" target="_blank"> Visit W3School! </a>
type 5	被链接文档的 MIME 类型。	规定被链接文档的的 MIME 类型。只能在 href 属性存在时使用。	<a href="http://www.w3school.com.cn" `type="text/html"`> W3School </a>

超链接样式
一组专门的预定义的类称为伪类，主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符＋样式规则来控制。伪类选择符包括：
总: a表示所有状态下的连接如 a{color:red}
① a:link：未访问链接 ,如 a:link {color:blue}
② a:visited：已访问链接 ,如 a:visited{color:blue}
③ a:active：激活时（链接获得焦点时）链接的颜色 ,如 a:active{color:blue}
④ a:hover：鼠标移到链接上时 ,如 a:hover {color:blue}
一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。
前三者分别对应body元素的link、vlink、alink这三个属性。
四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。
另外，a:active不能设置有无下划线（总是有的）。

举例：伪类的常见状态值

a{font-size:16px;}

a:link{color:blue;text-decoration:none;} //未访问：蓝色，无下划线。

a:active{color:red;} // 激活：红色。

a:visited{color:purple;text-decoration:nonr;} //已访问：紫色，无下划线

a:hover{color:red;text-decoration:underline;} //鼠标移近：红色，下划线

</style>

如何去掉<a>的下划线：

对超链接下划线设置使用代码"text-decoration"

语法：

text-decoration : none || underline || blink || overline || line-through

text-decoration参数：
none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　贯穿线
overline : 　上划线
去掉下划线的方法就是将其text-decoration设置为none即可。