将自己的博客写成了一个大杂烩了，遇见啥问题就写啥问题。但是当看见自己网页的成品就特别的开心。
还记得看见过的一个故事，说是收费的东西好还是免费的东西好，有一个答案是最让我记忆深刻的。回复的一个答案是：免费的东西是最贵的。他解释到，因为免费的东西是你要送给你的朋友的，为的就是让他开心，让他对你有一个好印象。那么这个时候倘若你还是选择粗制滥造就没有意义了。你一定会精心准备，给朋友一个惊喜。是的，免费的东西是最好的。我现在就是在为这样一份惊喜而准备着。
关于html5中的<a>标签：
学习网站：（W3C点击这里）：http://www.w3school.com.cn/tags/tag_a.asp
定义和用法
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的（表示自己也没搞懂这个活动链接是咋回事，倘若有读者知道的话在评论中提一下）
同时，可以使用 CSS 伪类 向文本超链接添加复杂而多样的样式。
任务一：首先是创建超链接：点击这里
1 <html> 2 3 <body> 4 5 <p> 6 <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> 7 8 <p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> 9 10 </body> 11 </html>
这里要注意的就是倘若是想链接到一个万维网页面的时候，记得将万维网的整个链接写全，否则链接就会出现错误的。
任务二：使用图片作为超链接的入口：点击这里
1 <html> 2 3 <body> 4 <p> 5 您也可以使用图像来作链接： 6 <a href="/example/html/lastpage.html"> 7 <img border="0" src="/i/eg_buttonnext.gif" /> 8 </a> 9 </p> 10 11 </body> 12 </html>
个人现在的想法是将这个效果加个png图片，制作出网页QQ聊天，点击下一页的效果
第三个效果是：点击链接链接到同一页面中的不同位置，这个也是非常实用的：（点击这里）
1 <html> 2 3 <body> 4 5 <p> 6 <a href="#C4">查看 Chapter 4。</a> 7 </p> 8 9 <h2>Chapter 1</h2> 10 <p>This chapter explains ba bla bla</p> 11 12 <h2>Chapter 2</h2> 13 <p>This chapter explains ba bla bla</p> 14 15 <h2>Chapter 3</h2> 16 <p>This chapter explains ba bla bla</p> 17 18 <h2><a name="C4">Chapter 4</a></h2> 19 <p>This chapter explains ba bla bla</p> 20 21 <h2>Chapter 5</h2> 22 <p>This chapter explains ba bla bla</p> 23 24 <h2>Chapter 6</h2> 25 <p>This chapter explains ba bla bla</p> 26 27 <h2>Chapter 7</h2> 28 <p>This chapter explains ba bla bla</p> 29 30 <h2>Chapter 8</h2> 31 <p>This chapter explains ba bla bla</p> 32 33 <h2>Chapter 9</h2> 34 <p>This chapter explains ba bla bla</p> 35 36 <h2>Chapter 10</h2> 37 <p>This chapter explains ba bla bla</p> 38 39 <h2>Chapter 11</h2> 40 <p>This chapter explains ba bla bla</p> 41 42 <h2>Chapter 12</h2> 43 <p>This chapter explains ba bla bla</p> 44 45 <h2>Chapter 13</h2> 46 <p>This chapter explains ba bla bla</p> 47 48 <h2>Chapter 14</h2> 49 <p>This chapter explains ba bla bla</p> 50 51 <h2>Chapter 15</h2> 52 <p>This chapter explains ba bla bla</p> 53 54 <h2>Chapter 16</h2> 55 <p>This chapter explains ba bla bla</p> 56 57 <h2>Chapter 17</h2> 58 <p>This chapter explains ba bla bla</p> 59 60 </body> 61 </html>
看这里，实现方法非常简单，给自己的a标签加上一个name，然后让自己的 href链接到#name上边就ok了
效果四：在一个新的页面中打开窗口，话不多说，直接上代码：
1 <html> 2 3 <body> 4 5 <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> 6 7 <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p> 8 9 </body> 10 11 </html>
效果五：当你担心自己的页面是被锁定在一个框架中的，为了保证自己的页面不成为别人的一个展示平台，用这个代码：
1 <html> 2 3 <body> 4 5 <p>被锁在框架中了吗？</p> 6 7 <a href="/index.html" 8 target="_top">请点击这里！</a> 9 10 </body> 11 </html>
效果六：点击发送电子邮件
1 <html> 2 3 <body> 4 5 <p> 6 这是邮件链接： 7 <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> 8 </p> 9 10 <p> 11 <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 12 </p> 13 14 </body> 15 </html>
或者说，你想发送自动填写内容更为丰富的电子邮件，看这里
1 <html> 2 3 <body> 4 5 <p> 6 这是另一个 mailto 链接： 7 <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> 8 </p> 9 10 <p> 11 <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。 12 </p> 13 14 </body> 15 </html>
其实电子邮件是一个幌子，带上参数，安装好客户端就是ok的，就像点击一个链接就可以唤醒QQ是一样的道理，点击这里试试？
1 <html> 2 <head> 点击链接，用QQ和我聊天</head> 3 <body> 4 点击这里：<a href="http://wpa.qq.com/msgrd?v=3&uin=1982326116">QQ互联</a> 5 </body> 6 </html>
也就这种效果啦：
你点点这里试试：点击