我爱自学网 > HTML/CSS > HTML 教程 > HTML 标签 > HTML <a> 标签 访问量:

HTML <a> 标签

<上一篇:HTML <!DOCTYPE> 声明 下一篇:HTML <abbr> 标签 >
HTML <a> 标签定义超链接,用于从一个页面链接到另一个页面。<a> 元素最重要的属性是 href 属性,它指定链接的目标。
实例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我爱自学网—5azixuewang.com</title>
</head>
<body>
<a href="http://www.5azixuewang.com">访问我爱自学网</a>
</body>
</html>

浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 <a> 标签。

标签定义及使用说明

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

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

在所有浏览器中,链接的默认外观如下:

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

提示和注释

提示:如果没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 type 属性。

提示:通常在当前浏览器窗口中显示被链接页面,除非规定了其他 target。

提示:请使用 CSS 来改变链接的样式。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中,<a> 标签既可以是超链接,也可以是锚。在 HTML5 中,<a> 标签是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符。

HTML5 有一些新的属性,同时不再支持一些 HTML 4.01 的属性。

属性

New :HTML5 中的新属性。

属性 描述
charset char_encoding HTML5 不支持。规定目标 URL 的字符编码。
coords coordinates HTML5 不支持。规定链接的坐标。
downloadNew filename 指定下载链接
href URL 规定链接的目标 URL。
hreflang language_code 规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediaNew media_query 规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用。
name section_name HTML5 不支持。规定锚的名称。
rel alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
rev text HTML5 不支持。规定目标 URL 与当前文档之间的关系。
shape default
rect
circle
poly
HTML5 不支持。规定链接的形状。
target _blank
_parent
_self
_top
framename
规定在何处打开目标 URL。仅在 href 属性存在时使用。
type New MIME_type 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。
注:MIME = Multipurpose Internet Mail Extensions。

全局属性

<a> 标签支持 HTML 的全局属性。

事件属性

<a> 标签支持 HTML 的事件属性。

更多实例:

实例2:创建超级链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>我爱自学网5azixuewang.com</title> 
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h1>我使用了外部样式文件来格式化文本 </h1>
<p>我也是!</p>
</body>

</html>

本例演示如何在 HTML 文档中创建链接。

实例3:将图像作为链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网5azixuewang.com</title> 
</head>
<body>

<p>
图像作为链接: <a href="http://5azixuewang.com">
<img border="0" alt="我爱自学网" src="logo.png" width="100" height="100">
</a>
</p>

</body>
</html>

本例演示如何使用图像作为链接。

实例4:在新的浏览器窗口打开链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网5azixuewang.com</title> 
</head>
<body>

<a href="http://www.5azixuewang.com" target="_blank">访问我爱自学网!</a>

<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>

</body>
</html>

本例演示如何在新窗口打开一个页面,这样的话访问者就无需离开您的站点了。

实例5:创建电子邮件链接

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我爱自学网5azixuewang.com</title> 
</head>
<body>

<p>
这是一个电子邮件链接:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>

</body>
</html>

本例演示如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)

实例6:创建电子邮件链接 2

<!DOCTYPE html>
<html>

<body>

<p>
This is another mailto link:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>

</body>
</html>

本例演示更加复杂的邮件链接。

实例7:使用锚跳转到同一个页面的不同位置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
</head>
<body>

<h2><a id="top">这是标题,底部链接可以链接到这</a></h2>

<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<p>我爱自学网 -  我爱自学网<br><br><br><br></p>
<a href="#top">链接到标题</a>
</body>
</html>

本例演示如何使用锚的 id 属性跳转到页面的不同位置( HTML5 不支持 name 属性)。

相关文章

HTML 教程:HTML 链接

<上一篇:HTML <!DOCTYPE> 声明 下一篇:HTML <abbr> 标签 >
本章内容:
1. HTML <!--...-->注释标签
2. HTML <!DOCTYPE> 声明
3. HTML <a> 标签
4. HTML <abbr> 标签
5. HTML <acronym> 标签
6. HTML <address> 标签
7. HTML <applet> 标签
8. HTML <area> 标签
9. HTML <article> 标签
10. HTML <aside> 标签
11. HTML <audio> 标签
12. HTML <b> 标签
13. HTML <base> 标签
14. HTML <basefont> 标签
15. HTML <bdi> 标签
16. HTML <bdo> 标签
17. HTML <big> 标签
18. HTML <blockquote> 标签
19. HTML <body> 标签
20. HTML <br> 标签
21. HTML <button> 标签
22. HTML <canvas> 标签
23. HTML <caption> 标签
24. HTML <center> 标签
25. HTML <cite> 标签
26. HTML <code> 标签
27. HTML <col> 标签
28. HTML <colgroup> 标签
29. HTML <command> 标签
30. HTML <datalist> 标签
31. HTML <dd> 标签
32. HTML <del> 标签
33. HTML <details> 标签
34. HTML <dfn> 标签
35. HTML <dialog> 标签
36. HTML <dir> 标签
37. HTML <div> 标签
38. HTML <dl> 标签
39. HTML <dt> 标签
40. HTML <em> 标签
41. HTML <embed> 标签
42. HTML <fieldset> 标签
43. HTML <figcaption> 标签
44. HTML <figure> 标签
45. HTML <font> 标签
46. HTML <footer> 标签
47. HTML <form> 标签
48. HTML <frame> 标签
49. HTML <frameset> 标签
50. HTML <head> 标签
51. HTML <header> 标签
52. HTML <hgroup> 标签
53. HTML <h1>-<h6> 标签
54. HTML <hr> 标签
55. HTML <i> 标签
56. HTML <iframe> 标签
57. HTML <img> 标签
58. HTML <input> 标签
59. HTML <ins> 标签
60. HTML <kbd> 标签
61. HTML <keygen> 标签
62. HTML <label> 标签
63. HTML <legend> 标签
64. HTML <li> 标签
65. HTML <link> 标签
66. HTML <main> 标签
67. HTML <map> 标签
68. HTML5 <mark> 标签
69. HTML <menu> 标签
70. HTML <meta> 标签
71. HTML <meter> 标签
72. HTML <nav> 标签
73. HTML <noframes> 标签
74. HTML <noscript> 标签
75. HTML <object> 标签
76. HTML <ol> 标签
77. HTML <optgroup> 标签
78. HTML <option> 标签
79. HTML <output> 标签
80. HTML <p> 标签
81. HTML <param> 标签
82. HTML <pre> 标签
83. HTML <html> 标签
84. HHTML <picture> 元素
85. HTML <progress> 标签
86. HTML <q> 标签
87. HTML <rp> 标签
88. HTML <rt> 标签
89. HTML <ruby> 标签
90. HTML <s> 标签
91. HTML <samp> 标签
92. HTML <script> 标签
93. HTML <section> 标签
94. HTML <select> 标签
95. HTML <small> 标签
96. HTML <source> 标签
97. HTML <span> 标签
98. HTML <strike> 标签
99. HTML <strong> 标签
100. HTML <style> 标签
101. HTML <sub> 标签
102. HTML <summary> 标签
103. HTML <sup> 标签
104. HTML <table> 标签
105. HTML <tbody> 标签
106. HTML <td> 标签
107. HTML <textarea> 标签
108. HTML <tfoot> 标签
109. HTML <th> 标签
110. HTML <thead> 标签
111. HTML <time> 标签
112. HTML <title> 标签
113. HTML <tr> 标签
114. HTML <track> 标签
115. HTML <tt> 标签
116. HTML <u> 标签
117. HTML <ul> 标签
118. HTML <var> 标签
119. HTML <video> 标签
120. HTML <wbr> 标签