html中的a标签特例讲解

将自己的博客写成了一个大杂烩了,遇见啥问题就写啥问题。但是当看见自己网页的成品就特别的开心。

还记得看见过的一个故事,说是收费的东西好还是免费的东西好,有一个答案是最让我记忆深刻的。回复的一个答案是:免费的东西是最贵的。他解释到,因为免费的东西是你要送给你的朋友的,为的就是让他开心,让他对你有一个好印象。那么这个时候倘若你还是选择粗制滥造就没有意义了。你一定会精心准备,给朋友一个惊喜。是的,免费的东西是最好的。我现在就是在为这样一份惊喜而准备着。

关于html5中的<a>标签:

学习网站:(W3C点击这里):http://www.w3school.com.cn/tags/tag_a.asp

定义和用法

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

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

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

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的(表示自己也没搞懂这个活动链接是咋回事,倘若有读者知道的话在评论中提一下)

同时,可以使用 CSS 伪类 向文本超链接添加复杂而多样的样式。

任务一:首先是创建超链接:点击这里

 <html>

 <body>

 <p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> </body>
</html>

这里要注意的就是倘若是想链接到一个万维网页面的时候,记得将万维网的整个链接写全,否则链接就会出现错误的。

任务二:使用图片作为超链接的入口:点击这里

 <html>

 <body>
<p>
您也可以使用图像来作链接:
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p> </body>
</html>

个人现在的想法是将这个效果加个png图片,制作出网页QQ聊天,点击下一页的效果

html中的a标签特例讲解

第三个效果是:点击链接链接到同一页面中的不同位置,这个也是非常实用的:(点击这里

 <html>

 <body>

 <p>
<a href="#C4">查看 Chapter 4。</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>Chapter 8</h2>
<p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p> <h2>Chapter 10</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>
</html>

看这里,实现方法非常简单,给自己的a标签加上一个name,然后让自己的 href链接到#name上边就ok了

效果四:在一个新的页面中打开窗口,话不多说,直接上代码:

 <html>

 <body>

 <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

 <p>如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。</p>

 </body>

 </html>

效果五:当你担心自己的页面是被锁定在一个框架中的,为了保证自己的页面不成为别人的一个展示平台,用这个代码:

 <html>

 <body>

 <p>被锁在框架中了吗?</p> 

 <a href="/index.html"
target="_top">请点击这里!</a> </body>
</html>

效果六:点击发送电子邮件

 <html>

 <body>

 <p>
这是邮件链接:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p> <p>
<b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</p> </body>
</html>

或者说,你想发送自动填写内容更为丰富的电子邮件,看这里

 <html>

 <body>

 <p>
这是另一个 mailto 链接:
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件!</a>
</p> <p>
<b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</p> </body>
</html>

其实电子邮件是一个幌子,带上参数,安装好客户端就是ok的,就像点击一个链接就可以唤醒QQ是一样的道理,点击这里试试?

 <html>
<head> 点击链接,用QQ和我聊天</head>
<body>
点击这里:<a href="http://wpa.qq.com/msgrd?v=3&uin=1982326116">QQ互联</a>
</body>
</html>

也就这种效果啦:

你点点这里试试:点击

上一篇:HTML之body标签中的相关标签


下一篇:SpringMVC 测试 mockMVC