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不能设置有无下划线(总是有的)。

举例:伪类的常见状态值

<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即可。

时间: 2024-10-14 10:52:25

HTML 链接<a>标签的相关文章

1.5 页面链接&lt;A&gt;标签

<A>标签用于创建超级链接(简称为超链接),它是到另一个文档或文件(图形.音频.视频)甚至到同一文档的另一部分的链接.当用户单击超级链接时,就会进入链接中指定的URL.超级链接可链接到:同一文档的特定部分,其他文档,其他文件——图像.音频.视频剪辑,其他站点等. 要创建超级链接,应指定以下两个组件: (1) 要链接文件的完整地址或URL. (2) 将提供链接的热点.热点可以是文本行,也可以是图像.当用户单击热点时,浏览器将读取URL中指定的地址并“跳”到新的位置. 锚记<A>标签用

织梦当前文章带链接TAG标签

global $cfg_cmspath; $tags = GetTags(@me); $revalue = ''; $tags = explode(',', $tags); foreach($tags as $key => $value){ if($value){ $revalue .= '<a href="'.$cfg_cmspath.'/tags.php?/'.$value.'/">'.$value.'</a> '; } } @me = $revalu

AspCms标签。链接地址:http://biaoqian.iasp.com.cn/

网站通用标签 基本语法 {aspcms:sitepath} 网站终极目录(可放在二级目录,其它语言则在三级目录) {aspcms:languagepath} 语言目录 {aspcms:siteurl} 网站地址 {aspcms:sitelogo} LOGO地址 {aspcms:sitetitle} 网站标题 {aspcms:additiontitle} 网站附加标题 {aspcms:sitekeywords} 网站关键词 {aspcms:sitedesc} 网站描述 {aspcms:defaul

HTML标签 链接 随笔3

4-1 <a>标签  网页链接 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签. 语法: <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 例如: <a href="http://www.imooc.com" title="点击进入慕课网">click here!</a>

Day48:HTML(form标签)、CSS选择器

一.表单标签<form> 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互. 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select.fieldset和 label标签. 表单属性 action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/web method: 表单的提交方式 post/get默认取值就是ge

DEDECMS标签调用汇总啊

非常有用的标签调用的方法 关键描述调用标签: <meta name="keywords" content="{dede:field name='keywords'/}"> <meta name="description" content="{dede:field name='description' function='html2text(@me)'/}"> ----------------------

AspCms标签

一.网站通用标签 {aspcms:sitepath} 网站终极目录(可放在二级目录,其它语言则在三级目录) {aspcms:languagepath} 语言目录 {aspcms:siteurl} 网站地址 {aspcms:sitelogo} LOGO地址 {aspcms:sitetitle} 网站标题 {aspcms:additiontitle} 网站附加标题 {aspcms:sitekeywords} 网站关键词 {aspcms:sitedesc} 网站描述 {aspcms:defaultte

(四)认识标签(3)

(四)认识标签(3) 一,<a>标签,链接到另一个页面 语法: <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 例如: <a href="http://www.imooc.com" title="点击进入慕课网">click here!</a> 上面例子作用是单击click here!文字,网页链接到http://www.im

初学HTML 常见的标签(三) 列表标签

第三篇博客, 这次说的是插入链接类标签, 我们平常在网页中经常能看到蓝色的链接类标签, 或者是一张图片, 一个电邮, 这些都是插入链接类的标签起的作用. <a></a>链接标签 <a>链接标签可实现超链接, 它在网页中是无处不在的, 只要有链接的地方, 就会有这个标签, 它的语法和其他的标签不太相同, 对于初学者而言, 刚开始学的时候毕竟初学者并不在标签中添加属性等等, <a>的语法是 <a href = "目标网址" title