链接(锚)超详解

目录

文章目录

前言

一、什么是超级链接？

二.常用属性

 1.href(必须属性 )

 2.target(默认_self)

 3.name

三、两种使用方式

1.创建指向另一个文档的链接

2.创建文档内的书签(锚)

四.锚伪类

---

前言

本文主要介绍  链接标签的常用属性 以及在 写链接标签CSS样式 时需要注意的点,让我们一起来学习叭!!!

---

一、什么是超级链接？

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

二.常用属性

 1.href(必须属性 )

        用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能

 2.target(默认_self)

        用于指定链接页面的打开方式，其取值有self和blank两种，其中_self为默认值，__blank为在新窗口中打开方式。

 3.name

        name 属性规定锚（anchor）的名称。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

三、两种使用方式<a>

1.创建指向另一个文档的链接

代码如下（示例）：

//外部链接
    <a href="http://baidu.com">百度一下</a>
//内部链接,直接链接内部页面名称
    <a href="index.html">首页</a>

2.创建文档内的书签(锚)

代码如下（示例）：

//在文档中对锚进行命名(创建一个书签),比如这里我命名了ppp
    <a name="ppp">我很重要哦~要多来看看我哦~</a>
//然后我们可以在同个文档中创建指向该锚的链接
    <a href="#ppp">我和它在同个文档,点我可以直接去看它哦~</a>
//当然啦~也可以在不同的页面也可以跳转过去看它哦~
//(假如要看的链接在http://www.iamgoodgirl.com 上)
    <a href="http://www.iamgoodgirl.com#ppp">
        我和它不在同个文档,点我也可以传送过去看它哦!
    </a>

贴心小提示:name换成id也可以哦~
 

四.锚伪类

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

千万要注意哦,这几个伪类写的顺序可不是可以乱来的哦,否则可能出不来理想的效果.a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

---

总结

以上就是今天要讲的内容啦，完结撒花!