元素a

HTML文件的基本结构

a
适用DTD:Strict Transitional Frameset   适用浏览器:All
释义 锚元素(anchor)

语法
<a 属性="属性值">~标签内容~</a>

说明
a元素的“标签内容”定义了锚定位。name属性为当前锚点命名,使其成为其它链接的链接目标(目标锚点)。href属性使当前锚点成为某个链接的源锚点,也就是说当前锚点称为超链接的起始点,设置其跳转终点的URI。可见,a元素只是用来定义超链接的锚点位置,至于是目标锚点(超链接指向的目标URI)还是源锚点(超链接起始的位置)则由name属性和href属性决定;如果定义了name属性,则以别处作为源锚点的超链接可以链接到此处(锚点位置),当然,name属性只是预先定义一个目标锚点,至于是否真的有链接指向它都无所谓;如果定义了href属性,那么当前锚点称为源锚点,超链接可以指向href属性指定的目标锚点(表现为某个确切的URI)
a元素是一个行内元素,它可以出现在文档主体内的任何位置,而且出现次数没有限制,但是不能相互嵌套
终止标签不可省略

属性
属性 属性值 说明
href URI 指定链接指向的URI,这是期望当用户激活超链接时打开的文件(类型不限)的URI,此属性是a元素最常用的属性。URI除了可以是标准的URI,一般还可以是JavaScript为协议“javascript:”以及用于电子邮件的“mailto:”
② hreflang 语言名称 说明href属性定义的URI(所指向的文档)所用的基础语言
③ name name名 为当前锚定位设置一个名称,以便它能够被其他链接所定位。如果在一个文档内部定位,那么就相当于在文档内设置了一个“书签”。name属性的属性值在一个文档内必须是独一无二的,而且取值必须符合id和name属性的命名规范。在XHTML中此属性被id属性取代,HTML中也可以使用id取代,但是旧的浏览器可能不支持
④ type MIME类型 这个属性给出目标链接地址的内容类型。对于浏览器设置而言,如果它不支持目标类型,则可以通过该属性给出建议。不过建议设计者慎用这个属性,以避免一些意想不到的不便情况(如链接目标的内容类型与所指定的不符)
⑤ charset 字符集 定义链接目标的字符编码
⑥ rel 链接类型 描述从当前文档到链接资源(href属性的属性值)的关系,可复数指定,属性值之间以空格隔开
⑦ rev 链接类型 描述从链接资源(href属性的属性值)到当前文档的反向链接,可复数指定,属性值之间以空格隔开
⑧ shape 预定义值 该属性用来定义客户端图像映射的一个区域,其值为预定义的关键字:default、rect、circle、poly。默认值是default,表示适合整张图片的形状;rect表示矩形,circle表示圆形,poly表示多边形
⑨ coords 坐标值 根据shape属性定义的图像映射形状,coord属性可以定义相应的坐标值(可点击区域在整个图像中的坐标),以便浏览器能够根据这些坐标在图像范围内产生相应的形状,然后可以利用href属性设置可点击区域的超链接目标。这样,在不切割图片的情况下,把一个分为若干区域,用户点击不同的区域(这样的区域称为热点)就可以打开不同的超链接。图像图像映射的坐标从左上角(0,0)开始,越向右下角越大。这些坐标都以像素为单位度量。
  • 如果shape属性值为rect(矩形),则按照矩形的左上角“x1,y1”像素值和右下角“x2,y2”像素值顺序定义坐标,所以其格式为coords="x1,y1,x2,y2",各值以逗号隔开。
  • 如果shape属性值为circle(圆形),则按照圆心x坐标、圆心y坐标和圆形半径r(像素值)的顺序定义坐标,即coords="x,y,r"。
  • 当shape属性值为poly(多边形),任何一点都可做多边形的起始点,姑表示为“x0,y0”,则相邻点为“x1,y1”、“x2,y2”、“x3,y3”……顺时针方向或者逆时针方向都不会有影响,即表示为coords="x1,y1,x2,y2,x3,y3…"。因为多边形最少要有三个边(三角形也数多边形),所以至少要有3个点(3对x,y坐标值),复杂的多边形需要很多坐标值。如果多边形的第一个和最后一个坐标不相同,则浏览器会自动把第一个点的坐标和最后一个点的坐标相连,从而形成一个完整的闭合多边形。
由此可见,只要每一段边足够短,指定的顶点足够多,就可以模拟出复杂的形状。如果定义的几何形区域有重叠,那么先列出的区域优先
⑩ target 目标框架名 指定超链接打开的目标框架名,框架名可以在设置框架时指定。可能会用到的四个预定义名称:_parent表示超链接在上一级窗口中打开,_blank表示在新窗口中打开,_self表示在当前框架或窗口中打开,_top表示在浏览器整个窗口中打开,忽略任何框架
⑪ tabindex 0~32767的整数 设置页面中超链接的Tab键获得焦点的顺序(按下Tab键从一个超链接移动到下一个超链接),从属性值最小的开始移动
⑫ accesskey 任一字符 指定获得焦点快捷键的文字,快捷键的使用在Windows中使用Alt+快捷键,Macintosh中使用Command+快捷键。属性值应该是一个文字字符
⑬ 通用属性:id、class、title、style、dir、lang、xml:lang 查看
⑭ 内在事件:onfoucs、onblur
nbsp;

示范
建立超链接起始点URI:
<a href="目标链接">链接</a>
建立超链接目标点识别名称:
<a name="识别名称">链接</a>

范例
下面的例子显示了XHTML文件基础结构: 运行打印
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>元素a</title>
</head>
<body>
书签:<a name="doctop">文档顶端</a><hr>
点击这个超链接将进入网站<a href="http://www.baidu.com">www.baidu.com</a><br>
点击这个超链接将进入网站<a href="http://www.google.com">google</a><br>

a元素的href属性指向的URI协议不仅可以是"http://",还可以是“ftp://”、“news://”、“telnet”、“gopher”、“email”等;现在的浏览器都支持JavaScript,所以JavaScript伪协议“javascript:”也是可以的;此外一般操作系统都带有邮件客户端软件,所以“mailto:”一般也是可以的;如果你装有QQ、MSN等即时通讯软件,那么这些软件也都有相应的伪协议。

图片也可以使用超链接,例如:<a href="http://www.w3.org" title="访问www.w3.org"><img src="src/html.gif" border="0"></a>

In the example that follows, the A element defines a link. The source anchor is the text "W3C Web site" and the destination anchor is "http://www.w3.org/":

For more information about W3C, please consult the <A href="http://www.w3.org/">W3C Web site</A>.

This link designates the home page of the World Wide Web Consortium. When a user activates this link in a user agent, the user agent will retrieve the resource, in this case, an HTML document.

in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not. A possible visual rendering of the previous link might be:

For more information about W3C, please consult the W3C Web site. ~~~~~~~~~~~~

To tell user agents explicitly what the character encoding of the destination page is, set the charset attribute:

For more information about W3C, please consult the <A href="http://www.w3.org/" charset="ISO-8859-1">W3C Web site</A>

Suppose we define an anchor named "anchor-one" in the file "one.html".

...text before the anchor... <A name="anchor-one">This is the location of anchor one.</A> ...text after the anchor...
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="189" height="290">
<param name="movie" value="src/bugs.swf"> <param name="quality" value="high">
<embed src="src/bugs.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="189" height="290"></embed></object><a href="src/bugs.swf">下载</a>此动画</p>

<a href="mailto:[email protected]?subject=阅读者反馈">发邮件给我</a> <a href="#doctop">回到文档顶端</a>
</body>
</html>

最常见的用法是用a元素带上href属性在页面中建立超链接,鼠标点击之后窗口就会跳转到其他页面。未打开过的超链接文字样式默认是蓝色带下划线的文字,并且鼠标指针移动到超链接文字上后会变成“小手”的形状,此时浏览器状态栏一般会显示此超链接指向的URI;已经访问过的超链接其文字会变成紫色的。超链接不仅可以使用文字设定,也可用图片设定,这样超级链接一经激活(鼠标点击,键盘激活)便可引导用户到不同的Web资源。
(X)HTML Strict DTD不允许a元素中加入target属性,必须把target属性换成rel属性。

参阅
URI
客户端图像映射