一、<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. 判断文件的编码 python

    import chardet import string path1= r'C:\Users\25456\Desktop' path = path1 + r'\深度学习.txt' with open( ...

  2. How to emulate a Raspberry Pi on your PC

    How to emulate a Raspberry Pi on your PC I am very interested in trying simulators and emulators for ...

  3. 生产环境nginx配置文件(带https安全认证)

    #user www www; worker_processes 2; error_log logs/error.log info; pid /usr/local/nginx/nginx.pid; wo ...

  4. Git 教程（一）：简介和安装

    为什么要编写这个教程?因为我在学习Git的过程中,买过书,也在网上Google了一堆Git相关的文章和教程,但令人失望的是,这些教程不是难得令人发指,就是简单得一笔带过,或者,只支离破碎地介绍Git的 ...

  5. Linux机器重启情况查询

    在实际开发过程中,有时可能发现有一些服务器的进程挂了,查询相关错误日志也没有头绪.此时需要考虑是否是由于机器重启导致的错误 使用命令last reboot来查看是否机器自动重启 导致服务器重启的原因有 ...

  6. zigbee 安全通信加密链接密钥

    ---恢复内容开始--- #define KEY_TYPE_TC_MASTER  0        // Trust Center Master Key信任中心主密钥#define KEY_TYPE_ ...

  7. node.js浅见

    看过很多朋友node.js代码敲得很好,但是对于概念还是很生疏.个人认为,代码是树叶,树干搭起来才是王道. 1.简述node.js的适用场景: IIO密集而非计算密集的情景:高并发微数据(比如账号系统 ...

  8. Node.js基础学习三之登录功能

    本篇介绍Node.js访问数据库并返回数据给客户端 需求基于Node.js学习(二) 数据库请下载:user.sql 1.创建user 实体类(model-user.js) function User ...

  9. id、class等各种选择器总结

    1.  id              选择器       #     class        选择器        .     标签         选择器       标签名     群组   ...

  10. HBase Filter及对应Shell

    比较运算符 CompareFilter.CompareOp比较运算符用于定义比较关系,可以有以下几类值供选择: EQUAL 相等 GREATER 大于 GREATER_OR_EQUAL 大于等于 LE ...