一、<a> 标签的样式

在所有浏览器中，链接的默认外观是：

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的

我们可以使用CSS伪类向文本超链接添加复杂而多样的样式，代码如下：

    <style>

        a{text-decoration: none;}

        /* :link 链接默认展示

           :visited 访问过后

           :hover 鼠标悬停

           :active 鼠标按下 */

        a:link{color: red;}

        a:visited{color: blue;}

        a:hover{color: green;}

        a:active{color: orange;}

    </style>

    <body>

        <a href="www.cnblogs.com/xiangxuemei">我的个人博客</a>

    </body>

二、<a> 标签超链接的用法

　　1、基础用法：成对出现，href属性定义链接指向的页面的 URL

<a href="http://www.cnblogs.com">博客园</a>

　　2、图片链接：点击图片跳转（俗称a包图）

<a href="https://www.baidu.com/">

    <img  src="baidu.jpg" />

</a>

　　3、锚点：链接到同一个页面的不同位置（href属性定义对应标签的ID值即可）

<body>

    <a href="#one">第一章</a>

    <a href="#two">第二章</a>

    <a href="#three">第三章</a>

    <div id="one" style="height: 2000px;">第一章</div>

    <div id="two" style="height: 2000px;">第二章</div>

    <div id="three" style="height: 2000px;">第三章</div>

</body>

　　4、在新的浏览器窗口打开链接（访问者就无需离开你的站点）

<a href="http://www.cnblogs.com" target="_blank">博客园</a>

　　5、链接邮件（在安装邮件客户端程序后才能工作）

<a href="mailto:xiangxuemei@qq.com">发送邮件</a>

　　　　用户点击发送邮件后显示如下图：

三、<a>标签的兼容

　　1、所有浏览器都支持 <a> 标签。

　　2、属性兼容情况如下图：

<a> 标签详解的更多相关文章

  1. <input type="file"> 标签详解

    详见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#attr-multiple 使用 type=" ...

  2. input type=file 标签禁止让用户手动输入

    常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框 ...

  3. angularjs中使用 <input type="file">标签实现一次最多上传5张图片

    前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...

  4. python+selenium：解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  5. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

  6. 获取 input type="file" 标签的内容,并使用ajax进行请求到服务器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Android WebView 不支持 H5 input type="file" 解决方法

    最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 标签 不能打开android资源管理器. 通过网络搜索发现是因为 android webvie ...

  8. 引用 struts2标签详解 - wo的的日志 - 网易博客

    引用 元元 的 struts2标签详解   引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...

  9. html标签详解

    html标签详解   <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...

  10. html标签详解（2）

    http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...

随机推荐

  1. Oracle 11g 概述 chaper1

    关系模型 E-R 模型 范式 1.简述Oracle oracle 是1977  IBM 公司研发的一款强大的数据库软件. 2.关系型数据的基本理论 关系型数据库与数据库管理系统  1)数据库是因为有对 ...

  2. To My Girlfriend (DP)

    题意:求选中若干个数,满足和为S,且不能选中下表i, j 和选中k, l的情况总数量. 思路:DP[i][j][k][l] i:前i个和为j,选中k个和不选中l个的情况数量,那么我们的转换应该是在必选 ...

  3. CMOS门电路

    参考:https://wenku.baidu.com/view/8582501e964bcf84b9d57bd3.html 1.    CMOS与非门(P并N串) 2.    CMOS或非门(N并P串 ...

  4. 20165305 《网络对抗技术》 Kali安装

    一.安装kali 在虚拟机中安装kali我参考了下面的网页,里面写的很全面,所以我就不重复了,我主要说一下kali里面的环境配置. 在虚拟机中安装kali linux 注意:输入用户和密码时,kali ...

  5. 2018-2019-2 《网络对抗技术》Exp3 免杀原理与实践 20165215

    目录 基础问题回答 (1)杀软是如何检测出恶意代码的? (2)免杀是做什么? (3)免杀的基本方法有哪些? 实践内容 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil ...

  6. toggle，hasClass

    toggle 但当toggle(),不带参数时,与show()和hide()的作用一样,切换元素的可见状态,如果元素是可见的,则切换为隐藏状态;如果元素是隐藏的则切换为可见状态,此时括号内可添加()毫 ...

  7. laravel中ajax,post传值问题

    //laravel中有CSRF保护 不加的话会出现419错误$.ajax({ url: '/admin/user/'+id, type: "POST", data: {'_toke ...

  8. 全网搜歌神器Listen1 Mac中文版

    listen1 for mac中文版是mac上一款强大的全网搜歌音乐播放器,支持网易云音乐.QQ音乐.虾米音乐.酷狗音乐以及酷我音乐等网站的歌曲搜索播放功能,拥有创建歌单.随心播放.歌曲收藏.快速搜索 ...

  9. CMT302 Coursework Assessment Pro-forma

    Cardiff School of Computer Science and Informa5csCoursework Assessment Pro-formaModule Code: CMT302 ...

  10. standby_file_management参数为MANUAL导致添加数据文件错误

    症状:standby_file_management 在MANUAL模式下添加数据文件报错处理: 1.standby_file_management为MANUAL,主库添加数据文件,从库发现如下报错: ...