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

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

关于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>

 <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中的a标签特例讲解的更多相关文章

  1. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  2. thinkphp内置标签简单讲解

    thinkphp内置标签简单讲解 1.volist循环 name 需要遍历的数据 id 类似于foreach中 value offset 截取数据起始位置 length 截取数据的个数 mod 奇偶数 ...

  3. body标签中的相关标签

    一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...

  4. head标签详细讲解

    head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...

  5. avascript中的this与函数讲解

    徐某某 一个半路出家的野生程序员 javascript中的this与函数讲解 前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大 ...

  6. Ajax提交参数的值中带有html标签不能提交成功的解决办法（ASP.NET）

    最近在公司做资源及文章上传功能遇到一个小问题,被坑了好半天. 该功能就类似利用富文本编辑器发布信息,但是用Ajax提交数据,因此提交参数值中不可避免的含有html标签. 在本地运行代码一直没问题,总是 ...

  7. mybatis 中的where标签

    mybatis中的where标签可以去除 开头的 and 或者 or 但是放在后面的不行 失败的: <select id="countNotesByParam" parame ...

  8. ASP.NET 程序提交表单数据中带有html标签不能提交或者提交报错问题

    今天在公司做另外的一个项目,又奇葩的遇到一个问题. 在本地自己电脑上怎么测试都是正常的.但是先上服务器就出问题: 用富文本编辑器上传一篇文章,始终报错,又没提示具体什么错误,也没说代码错误,点击提交按 ...

  9. HTML之：让网页中的<a>标签属性统一设置-如‘新窗口打开’

    在开发过程中,我们往往想在页面中,给<a>设置一个统一的默认格式,例如我们想让链接:“在新窗口打开”,我们就可以使用<base>标签 在网页中添加这段代码: <head& ...

随机推荐

  1. 时间序列 预测分析 R语言

    在对短期数据的预测分析中,我们经常用到时间序列中的指数平滑做数据预测,然后根据不同. 下面我们来看下具体的过程 x<-data.frame(rq=seq(as.Date('2016-11-15' ...

  2. C# LogHelper

    using System; using log4net; using log4net.Config; namespace Utils { /// <summary> /// 日志帮助类(l ...

  3. 面向对象---java代码块

    概念:代码块是指用{}括起来的一段代码. 根据位置及声明的关键字不同,代码块可分为普通代码块.构造块.静态代码块.同步代码块4种. 1.普通代码块: 直接在方法中或在语句中定义 public clas ...

  4. usaco月赛，2017.1总结

    T1:跳舞的奶牛 大致题意:一个体积为k的舞台能够同时容纳k只奶牛一起跳舞,他们每头奶牛的跳舞时间不同,如果有一只奶牛跳完了第k+1头奶牛就会立刻上场跳舞,当所有奶牛跳完舞以后我们认为这次表演结束.现 ...

  5. C#数组与集合

  6. Unity3DGUI：GUILayout

    显示效果,注意GUILayout控件默认垂直布局,且在水平布局模块里控件大小默认按控件内容来显示,因此对于水平滑块HorizontalSlider来说需要自定义大小避免变形

  7. ubuntu16.04 禁用Guest用户

    .打开终端(快捷键 Ctrl+Alt+T) .编辑50-no-guest.conf文件,按照以下命令编辑, sudo gedit /usr/share/lightdm/lightdm.conf.d/- ...

  8. 4-Bom&Dom总结篇

    其实Bom就是指浏览器的东西,比如弹窗啊.浏览器信息啊等 而Dom则是指文档的东西,就是浏览器里边html的东西,如元素啊.属性啊.事件什么的 但Bom的唯一顶层对象window又包含Dom的顶层对象 ...

  9. Mssql 行转列

    ) set @sql='' --初始化变量@sql --变量多值赋值 ,,'')--去掉首个',' set @sql=' select * from( select objectid,name,jyj ...

  10. 理解iaas paas saas三种云服务区别

    其实搞懂这个问题也不难,我们可以把云计算理解成一栋大楼,而这栋楼又可以分为顶楼.中间.低层三大块.那么我们就可以把Iass(基础设施).Pass(平台).Sass(软件)理解成这栋楼的三部分.基础设施 ...