【WEB基础】HTML & CSS 基础入门（6）超连接

时间 2019-12-08

标签 WEB基础 html css 基础入门连接栏目 HTML 繁體版

原文原文链接

超连接--文字连接

超连接【hyperlink】是网页中最为常见的元素之一，咱们几乎能够在全部的网站页面中找到超连接。每一个网站都不止一个页面，这些页面就是利用超连接进行串接。超连接帮咱们实现了网页与网页之间的跳转。css

文字连接：咱们可使用超连接标签<a><a/>实现文字连接。设置了连接的文字默认样式为蓝色文字，有下划线。<a><a/>标签实现超连接有两个属性须要设置：html

🅰 href属性：表示点击该超连接将要跳转到的页面地址，该地址能够是当前页面的相对地址，也能够直接跳转到另一个网站。浏览器

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

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

网页一代码：ui

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <!--第一个超连接，连接到百度，在浏览器新的窗口打开-->
    <a href="http://www.baidu.com" target="_blank" >连接到百度</a>
    <!--第二个超连接，连接到网页二，在浏览器新的窗口打开-->
    <a href="网页2.html" target="_blank">连接到网页2</a>
    <!--第三个超连接，连接到网页三，在浏览器当前窗口打开-->
    <a href="网页3.html" target="_self">连接到网页3</a>
</body>
</html>

网页二代码：spa

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <h1>这是网页2</h1>
</body>
</html>

网页三代码：3d

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <h1>这是网页3</h1>
</body>
</html>

运行效果：指针

超连接--锚点连接

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

示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <div>
        <h3>目录</h3><!--注意前面要加上#号-->
        <a href="#chapt1">第一章</a><br />
        <a href="#chapt2">第二章</a><br />
        <a href="#chapt3">第三章</a><br />
    </div>
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    ......<br />
    <div id="chapt1">
        <h4>第一章</h4>
        <p>这是第一章的内容</p>
        ......<br />
        ......<br />
        ......<br />
    </div>
    <div id="chapt2">
        <h4>第二章</h4>
        <p>这是第二章的内容</p>
        ......<br />
        ......<br />
        ......<br />
    </div>
    <div id="chapt3">
        <h4>第三章</h4>
        <p>这是第三章的内容</p>
        ......<br />
        ......<br />
        ......<br />
    </div>
</body>
</html>

运行效果：

超连接的 CSS 样式

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

a:link – 当前连接未被访问的样式
a:visited – 当前连接已被用户访问过的样式
a:hover – 当鼠标指针移入到连接上方的样式
a:active – 当连接被鼠标点击时的样式

注意，咱们在定义上述样式时，须要按照上面的顺序定义，就是按照“未访问、访问后、鼠标通过、鼠标点击时”这个顺序来设置，这是官方规定。一般状况下，为了突出连接，咱们只设置鼠标移入时的样式【a:hover】。

示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*link1未被访问:取消下划线，设置绿色*/
        #link1:link {text-decoration:none; color:green}
        #link1:visited  {text-decoration:none; color:black}
        /*link1鼠标进入:添加下划线，设置红色，文字变大到15pt*/
        #link1:hover {text-decoration:underline; color:red; font-size:15pt}
        #link1:active  {text-decoration:none; color:blue;}
        /*只设置link2鼠标进入时的样式*/
        #link2:hover {
            text-decoration:none; /*取消下划线*/
            color:DarkGreen; /*文字颜色为深绿*/
            font-size:18pt;/*文字大小为18pt*/
            font-weight:bold;/*文字加粗*/
        }
    </style>
</head>
<body>
    <a id="link1" target="_blank" href="http://www.baidu.com">百度一下</a>
    <a id="link2" target="_blank" href="http://www.qq.com">腾讯网</a>
</body>
</html>

运行效果：

-------------------------- END --------------------------