一、<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. No module named 'pip._internal'

    报错: Traceback (most recent call last):File "/home/myuser/.local/bin/pip", line 7, in <m ...

  2. Angular4 表单处理

  3. jQuery实现input框输入值动态搜索

    我们在平时的前端开发中,经常会遇到添加数据,如果在添加之前要指定某个用户或对象进行关联,那在实现上要比普通的添加要繁琐一点.我本来的想法是给一个iframe,在 里面显示所有的数据并提供一个筛选的功能 ...

  4. 关于pandas 调用mongodb出Memory error错误

    其实就是内存不够了,我加载的数据是800多万,数据量太大出错下面试错误提示 C:\Users\souwayai\Miniconda3\python.exe D:/www/use_pandas/pd7. ...

  5. MQ(队列消息的入门)

    消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成,通过提供消息传递和消息排队模型,它可以在分布式环境下拓展进程间的通信,对于消息中间件,常见的角色大致也 ...

  6. 原创《开源一个用 vue 写的树层级组件 vue-ztree》

    最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧. ztree 的 demo 地址:http://www.tree ...

  7. 使用ReentrantLock同步，经典银行账户问题

    1.新建Account类,使用ReentrantLock同步增加和减少金额方法. package com.xkzhangsan.reentrantlockpack.bank; import java. ...

  8. 13: ELK(ElasticSearch+Logstash+ Kibana)搭建实时日志分析平台

    参考博客:https://www.cnblogs.com/zclzhao/p/5749736.html 51cto课程:https://edu.51cto.com/center/course/less ...

  9. js--深拷贝与浅拷贝

    对象:只针对于Object和Array这样的引用数据类型 说明:浅拷贝只复制指向某个对象的指针,而不是复制对象的本身,新旧对象还是共享一块内存.但深拷贝会另外创造一个一模一样的对象,新的对象跟原对象不 ...

  10. range 小数据池介绍

    1.range 2.小数据池 1. range 范围 [起始位置:终止位置:步长]range(起始位置,终止位置,步长) #顾头不顾尾 3.小数据池 小数据池,也称为小整数缓存机制,或者称为驻留机制等 ...