一、<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. 【Qt官方MQTT库的使用，附一个MqttClient例子】

    Qt官方MQTT库的使用,附一个MqttClient例子 开发环境:win7 64 + Qt5.9 记录时间:2018年3月11日 00:48:42 联系邮箱: yexiaopeng1992@126. ...

  2. Sitecore 8.2 页面架构设计：模板与组件

    介绍 Sitecore的开放式架构和众多API意味着在Sitecore中实施网站可能会在很多方向上发生偏差.架构的一个特别重要的方面涉及页面构建 - 如何构建Sitecore中的网页? Sitecor ...

  3. python学习笔记之线程、进程和协程（第八天）

    参考文档: 金角大王博客:http://www.cnblogs.com/alex3714/articles/5230609.html 银角大王博客:http://www.cnblogs.com/wup ...

  4. 使用HTML meta no-cache标签来禁用缓存

    使用HTML meta no-cache标签来禁用缓存 如何完美滴使浏览器访问一个 HTML 页面时禁用缓存?在测试某个 SPA 项目时,发现更改后 Chrome 浏览器页面刷新还是使用之前的版本.经 ...

  5. centos7将网卡名字改成eth样式

    ll /etc/sysconfig/grub lrwxrwxrwx 1 root root 17 Jun 12 2016 /etc/sysconfig/grub -> /etc/default/ ...

  6. JAVA中for与while关于内存的细节问题

    文/朱季谦 JAVA的程序结构有顺序结构,循环结构,分支结构,以及跳转结构,而循环结构里经常用到的无外乎有以下几种:for循环,while循环,以及do-while循环.本文主要讨论for循环与whi ...

  7. Object.prototype的成员介绍

    3.Object.prototype的成员介绍        Object.prototype是js中所有的对象的祖宗        Object.prototype中所有的成员都可以被js中所有的对 ...

  8. windows eclipse直接访问远程linux hadoop开发环境配置（符合实际开发的做法）

    CDH 5.x搭建请参考CentOS 7离线安装CDH 5.16.1完全指南(含各种错误处理). 如果使用的是cloudera quickstart vm,则只能在linux服务器中使用eclipse ...

  9. JSESSIONID的简单说明

    原文地址:http://blog.csdn.net/chunqiuwei/article/details/23461995 1)第一次访问服务器的时候,会在响应头里面看到Set-Cookie信息(只有 ...

  10. Vue学习(一)Vue目录结构

    安装教程网上一大把,可以自己搜索.记录下学习过程. 认识下Vue的目录结构,取自:https://www.cnblogs.com/dragonir/p/8711761.html vue 文件目录结构详 ...