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> <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标签特例讲解的更多相关文章
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
- thinkphp内置标签简单讲解
thinkphp内置标签简单讲解 1.volist循环 name 需要遍历的数据 id 类似于foreach中 value offset 截取数据起始位置 length 截取数据的个数 mod 奇偶数 ...
- body标签中的相关标签
一.内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> ...
- head标签详细讲解
head标签详细讲解 head位于html网页的头部,后前的标签,并以开始以结束的一html标签. Head标签位置如图: head标签示意图 head包含标签 meta,title,link,bas ...
- avascript中的this与函数讲解
徐某某 一个半路出家的野生程序员 javascript中的this与函数讲解 前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大 ...
- Ajax提交参数的值中带有html标签不能提交成功的解决办法(ASP.NET)
最近在公司做资源及文章上传功能遇到一个小问题,被坑了好半天. 该功能就类似利用富文本编辑器发布信息,但是用Ajax提交数据,因此提交参数值中不可避免的含有html标签. 在本地运行代码一直没问题,总是 ...
- mybatis 中的where标签
mybatis中的where标签可以去除 开头的 and 或者 or 但是放在后面的不行 失败的: <select id="countNotesByParam" parame ...
- ASP.NET 程序提交表单数据中带有html标签不能提交或者提交报错问题
今天在公司做另外的一个项目,又奇葩的遇到一个问题. 在本地自己电脑上怎么测试都是正常的.但是先上服务器就出问题: 用富文本编辑器上传一篇文章,始终报错,又没提示具体什么错误,也没说代码错误,点击提交按 ...
- HTML之:让网页中的<a>标签属性统一设置-如‘新窗口打开’
在开发过程中,我们往往想在页面中,给<a>设置一个统一的默认格式,例如我们想让链接:“在新窗口打开”,我们就可以使用<base>标签 在网页中添加这段代码: <head& ...
随机推荐
- [SQL基础教程] 4-2 数据删除(DELETE)
[SQL基础教程] C4 数据更新 4-2 数据删除(DELETE) DROP TABLE / DELETE DROP TABLE - 完全删除表 DELETE - 仅删除数据,保留表容器 DELET ...
- org.apache.log4j.Logger 详解
org.apache.log4j.Logger 详解 1. 概述 1.1. 背景 在应用程序中添加日志记录总的来说基于三个目的 :监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计 ...
- [转]numpy中的matrix矩阵处理
今天看文档发现numpy并不推荐使用matrix类型.主要是因为array才是numpy的标准类型,并且基本上各种函数都有队array类型的处理,而matrix只是一部分支持而已. 这个转载还是先放着 ...
- scip学习
最近在学习scip 准备把里面比较有价值的题分别用lisp和c语言写出来.这样或许能更加深入的理scheme的函数式编程. tip:我用的c语言环境是vs2015,lisp环境为Drracket;
- python 基础篇第一篇
本节内容 1.python介绍 2.发展史 3.python2和python3 4.安装 5.简单程序,hello world程序 6.变量 7.用户输入 8.模块初识 9..pyc是什么? 10.数 ...
- FaceBook页面加载技术
1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒:同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数据表 ...
- idea不能加载xml
- Batch File Rename Utility(文件批量改名软件) 1.1.4231
软件名称: Batch File Rename Utility(文件批量改名软件) 1.1.4231.23098 软件语言: 英文 授权方式: 免费软件 运行环境: Win7 / Vista / Wi ...
- 视频编辑SDK---我们只提供API,任你自由设计炫酷的功能
面对相对复杂的视频编辑处理技术,你是否束手无策? 在短视频应用中,有一定技术难度的视频编辑技术中,我们提出了一种全新的解决方法:画板和画笔.短视频处理,用画板和画笔,就够了! 我们设计了极其简单易懂的 ...
- 在VMware上安装CentOS -7步骤详解
在VMware上安装CentOS -7 一.下载好VMware虚拟机 二.准备好CentOS的镜像文件 在这里安装之前博主都已准备好了. 废话就少啰嗦啦!现在开始安装步骤了 1.首先打开VMware创 ...