Skip to content

Instantly share code, notes, and snippets.

@pygman
Created September 2, 2016 10:14
Show Gist options
  • Save pygman/d4a958332c3a59a62469d221f2b72339 to your computer and use it in GitHub Desktop.
Save pygman/d4a958332c3a59a62469d221f2b72339 to your computer and use it in GitHub Desktop.
HTML标签“a”用法整合 一篇让你看个够

HTML代码,我已经很熟悉了,如果网深入里的应用,我还是一位学者。对于“a”标签的简单实用,使用起来很简单,但是,随着web前端技术的进步,简单的用法已经不能够满足条件要求了。废话不多说了,开始探讨之路吧。

  1. 标签的普通用法: 这是最基础的格式:三龙鑫。 这里面的就不需要解释了,都能理解到了。
  2. 还有一种定点锚链接,这个功能就是在显示页面中点哪到哪。用法是这样的: 返回顶部 这的span标签也可以替换成div标签。
  3. 给图片加上链接: 样式这样写:
  4. 如果在a标签中加上target="_blank",就会再点击链接时,在新窗口打开。

想要灵活使用a标签,上面说的是它的基本用法。一般情况下,如果不是web前端工程师,知道这些已经够用了。接下来,要说的是a和css样式结合使用,这样的用法是它的功能更强大。 先来了解一下css链接样式:

  • a:link是超链接的初始状态
  • a:hover是把鼠标放上去时悬停的状态
  • a:active 是鼠标点击时的状态
  • a:visited是访问过后的状态 示例:
<style> .sanlongxin a:link{ color:# 000000}/* 链接默认为黑色 */ .sanlongxin a:hover{ color:# ff0101}/* 鼠标悬停红色 */ .sanlongxin a:active{ color:# 0024fe}/* 鼠标点击与释放时蓝色 */ .sanlongxin a:visited{ color:# 4a033d}/* 访问过为紫红 */ /* sanlongxin对象内 a超链接设置样式 */ </style>

接下来,如果让链接实现样式中的效果呢?需要这样一段代码:

![HTML标签“a”用法整合 一篇让你看个够](http://p3.pstatp.com/large/97000001fa5e8abef4b) 此外,对于css样式来说,还有更多的用法,比如: 1. 通常对全站超链接样式化方法 a{color:#333;text-decoration:none; } //对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:none; a:hover {color:#CC3300;text-decoration:underline;}//对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:underline;。 2. 通过链接内设置类控制超链接样式css方法 案例:超链接代码三龙鑫 对应CSS代码 a.sanlongxin{color:#333;text-decoration:none; } a.sanlongxin:hover {color:#CC3300;text-decoration:underline;} 通过这样的设置可以控制链接内的css类名为“sanlongxin”超链接的样式 3. 通过对应超链接外的父级的css类的css样式来控制超链接的样式 案例超链接代码 对应CSS代码 .sanlongxin a{color:#333;text-decoration:none; } .sanlongxin a:hover {color:#CC3300;text-decoration:underline;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment