定义和用法
<a> 标签定义超链接,用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性,它指示链接的目标。
在所有浏览器中,链接的默认外观是:
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
提示:您可能已经注意到了,W3School 站点内的链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类向文本超链接添加复杂而多样的样式。
提示和注释
提示:如果不使用 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属。
提示:被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性)。
提示:请使用 CSS 来设置链接的样式。
属性
5 :HTML5中的新属性
属性 |
值 |
描述 |
例子 |
浏览器支持 |
download 5 |
filename(规定作为文件名来使用的文本。) |
规定被下载的超链接目标。 |
<a href="/images/myw3schoolimage.jpg"
|
只有 Firefox 和 Chrome 支持 |
href |
url 超链接的 URL。 可能的值:
|
规定链接指向的页面的 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"
|
|
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"
|
超链接样式
一组专门的预定义的类称为伪类,主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来控制。伪类选择符包括:
总: 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不能设置有无下划线(总是有的)。
举例:伪类的常见状态值
<style type="text/css">
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即可。