<a> 标签定义超链接,用于从一个页面链接到另一个页面。
<a> 元素最重要的属性是 href 属性,它指定链接的目标。
在所有浏览器中,链接的默认外观如下:
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
提示:如果没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 type 属性。
提示:通常在当前浏览器窗口中显示被链接页面,除非规定了其他 target。
提示:请使用 CSS 来改变链接的样式。
<a href="http://www.runoob.com">访问菜鸟教程!</a>
当然我们可以通过CSS样式自定义其外观,还有a标签的一些状态,分别是link、visited、hover、active,但是他们使用是有一定的顺序的,否则可能有些会没有出现预期的效果,下面是显示正确的顺序实例:
<style type="text/css"> a:link {color: #000;} /* 未访问的链接 */ a:visited {color: #F00;} /* 已访问的链接 */ a:hover{color: #0F0;} /* 鼠标在链接上 */ a:active {color: #00F;} /* 点击激活链接:在你点击该链接后,页面正在转向新地址的时候,链接显示此颜色 */ </style>
如果想去掉下划线,可以使用设置"text-decoration"属性为"none" :
<style type="text/css"> /* 去掉a标签的下划线 */ a{text-decoration:none;} </style>
创建超链接
<body> <p> 这是一个网址链接 <a href="http://www.runoob.com/">菜鸟教程</a>。 </p> <p> 这是一个站内链接 <a href="/html/html-tutorial.html">HTML 教程</a>。 </p> </body>
为图像添加超链接
<body> <p> 图像作为链接: <a href="http://runoob.com"> <img border="0" alt="w3cschool" src="logo.png" width="100" height="100"> </a> </p> </body>
在新的浏览器窗口打开链接
<body> <a href="http://www.runoob.com/" target="_blank">访问菜鸟教程!</a> <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p> </body>
使用锚跳转到同一个页面的不同位置
<p><a href="#C4">查看Chapter 4</a> <a href="#C8">查看 Chapter 8。</a> <a href="#C10">查看10</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a><!--规定锚的名称--></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2 id="C8">Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2><a id="C10">Chapter 10</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p>
创建电子邮件链接
<body> <p> 这是一个电子邮件链接: <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"> 发送邮件</a> </p> <p> <b>注意:</b>单词之间的空格需要使用%20来表示,以确保浏览器能真正解析空格。</p> </body>
创建电子邮件链接2
<body> <p> 这是另一个电子邮件链接: <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">发邮件!</a> </p> <p> <b>注意:</b>单词之间的空格需要使用%20来表示,以确保浏览器能真正解析空格。</p> </body>