<a>标签

<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 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</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>

 

posted @ 2018-11-02 16:50  蓝青儿  阅读(363)  评论(0编辑  收藏  举报