前端基础入门（6）超链接

超链接–文字链接
超链接【hyperlink】是网页中最为常见的元素之一，我们几乎可以在所有的网站页面中找到超链接。每个网站都不止一个页面，这些页面就是利用超链接进行串接。超链接帮我们实现了网页与网页之间的跳转。

文字链接：我们可以使用超链接标签实现文字链接。设置了链接的文字默认样式为蓝色文字，有下划线。标签实现超链接有两个属性需要设置：

? href属性：表示点击该超链接将要跳转到的页面地址，该地址可以是当前页面的相对地址，也可以直接跳转到另外一个网站。

? target属性：该属性设置超链接页面的打开方式。target属性有四个取值，这里，只说明常用的两个，【_self】是默认值，表示在浏览器当前窗口打开超链接的页面，【_blank】表示新建一个空白浏览器窗口，在新的窗口打开超链接页面。

来个例子看看：新建三个HTML页面文件，网页1里面设置三个超链接，分别链接到百度、网页2、网页3。

网页一代码：

    


    
    链接到百度
    
    链接到网页2
    
    链接到网页3

网页二代码：

    


    
这是网页2

网页三代码：

    


    
这是网页3

运行效果:

超链接–锚点链接
很多网页文章的内容比较多，导致页面很长，需要不断的拖动滚动条才能找到需要的内容，我们可以用锚点链接来解决这个问题，锚点链接就是在单个页面内部不同的位置进行跳转，也可以理解为书签。锚点链接的设置也很简单，首先为目标锚点设置一个ID，然后在超链接的href属性里指明该ID，注意ID前面要加上“#”号。

示例代码：

    


    

        
目录

        第一章

        第二章

        第三章

    
    ......

    ......

    ......

    ......

    ......

    

        
第一章
        
这是第一章的内容
        ......

        ......

        ......

    
    

        
第二章
        
这是第二章的内容
        ......

        ......

        ......

    
    

        
第三章
        
这是第三章的内容
        ......

        ......

        ......

    

运行效果：

超链接的 CSS 样式
我们可以给超链接设置一些常见的样式，比如颜色【color】、字体【font-family】、背景【background】等。超链接还有一些特殊样式，就是我们可以依据超链接当前的状态设置特定的样式。超链接有以下四种状态：

a:link – 当前链接未被访问的样式
a:visited – 当前链接已被用户访问过的样式
a:hover – 当鼠标指针移入到链接上方的样式
a:active – 当链接被鼠标点击时的样式
注意，我们在定义上述样式时，需要按照上面的顺序定义，就是按照“未访问、访问后、鼠标经过、鼠标点击时”这个顺序来设置，这是官方规定。通常情况下，为了突出链接，我们只设置鼠标移入时的样式【a:hover】。

示例代码：

    
    


    百度一下
    腾讯网

运行效果：

如果你依然在编程的世界里迷茫，不知道自己的未来规划，可以加入前端学习进阶内推交流群685910553（前端资料分享）。里面可以与大神一起交流并走出迷茫。

新手可免费领取学习资料，看看前辈们是如何在编程的世界里傲然前行不停更新最新的教程和学习方法（详细的前端项目实战教学视频），

有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入