管理进化

html a是什么


html的a标签是HTML语言标签。a标签定义超链接,用于从一个页面链接到另一个页面,a元素最重要的属性是href属性,它指定链接的目标。

一、a 标签样式

一组专门的预定义的类称为伪类用于处理超链接的状态,超链接的文字的状态可以通过

伪类选择器+样式类进行控制  <a class="mycls" ></a>

0)  所有状态下的链接.mycls{color:red}

1) a:link 未访问的连接 .mycls a:link{color:blue}

2) a:visited 已访问的链接 .mycls a:visited{color: visited}

3) a:active  激活时(链接获取焦点)链接的颜色 .mycls a:active{color:blue}

一般情况下 a:hiver和a:visited的颜色是一种的,这4个状态的过程是: a:link ->a:hover->a:active->a:visited

另外,a:active不能设置有无下划线(总是有的)

<style>

a {font-size:16px}

a:link {color: blue; text-decoration:none;} //未访问:蓝色、无下划线

a:active:{color: red; } //激活:红色

a:visited {color:purple;text-decoration:none;} //已访问:purple、无下划线

a:hover {color: red; text-decoration:underline;} //鼠标移近:红色、下划线

</style>

二、target的属性

<a>标签的target属性规定在何处打开链接文档

如下面这行表示在新的窗口中打开文档

<a href="http://www.baidu.com" target="_blank"> visit w3school </a>

三、name属性

name属性规定锚(anchor)的名称

可以使用name属性创建html页面中的书签,书签不会以任何独特方式显示,它对读者可以是不可见的。

当使用命名锚(named anchors)时,我们可以创建直接跳转至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停滚动页面来寻找需要的信息了。

命名语法

<a name="label">锚(显示在页面上的文本)</a>

ps:锚名称可以是任何名字

ps:可以使用id属性来代替name属性,命名锚同样有效

四、a 标签的事件

将<a>标签的href属性值设置为"#",并设置onclick属性。

在这种处理方式下,用户可以很明显地看出哪些文字是超链接。

在 单击该超链接时,也可以执行onclick属性值中的JavaScript语句,并且不会跳转网页。

但是,由于href的属性值为"#",浏览器会自动跳 转到当前网页的顶部。

如果当前网页内容比较多,浏览器窗口出现下拉滚动条时,可以很明显地看到跳转,而这种跳转往往不是网页设计者的本意。

在没有为<a>标签设置onclick属性时,如果单击了该超链接,浏览器会加载href属性中的URL。

如果href属性值并不是一 个URL,而是一个JavaScript语句的话,那么浏览器就会执行该语句。

因此,可以直接将JavaScript语句写在<a>标签的 href属性值中,让href属性代替onclick属性。

在这种处理方式下,既可以响应click事件,又可以不让网页跳转。

在 a 标签的属性值中添加JavaScript语句之前,必须要先使用"javascript:"语句来声明href属性值中的语句为

javaScript语句,否则浏览器就会将href属性值中的JavaScript语句当成URL进行加载。

<a  href="javascript:showFlag()">ssgao</a>     执行showFlag()方法

<a  href="" onclick="showFlag();">ssgao</a>    执行showFlag()方法,并会跳转到href指向的页面当href=""刷新当前页面

<a  href="">ssgao</a>  刷新当前页面

<a  href="#" onclick="showFlag();">ssgao</a>   执行showFlag()方法,并会跳转到页面顶部

<a href="#" onclick="javascript:方法;return false;">提交</a>

a href="javascript:void(0)" onclick="javascript:方法;return false;"提交

javascript:void(0)就不会向上跳了:)

还有一个方法是 #this

a href="#this" onclick="javascript:方法"

智齿客服