《HTML+CSS+JavaScript》之第8章超链接_html ＋css+javascript 网页转换超链接-CSDN博客

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125592604

《HTML+CSS+JavaScript》之第8章超链接

8.1 超链接简介

hyperlink，超链接能在各个独立的页面间跳转。

8.1.1 a标签

<a href="链接地址">文本或图片</a>

文本超链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <a href="http://www.lvyestudy.com">绿叶学习网</a>
</body>
</html>

图片超链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <a href="http://www.lvyestudy.com"><img src="img/lvye.png" alt="绿叶学习网"/></a>
</body>
</html>

8.1.2 target属性

<a href="链接地址" target="打开方式"></a>

属性值	说明
_self	原来窗口打开链接，默认
_blank	新窗口打开链接
_parent	父窗口打开链接
_top	顶层窗口打开链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</body>
</html>

8.2 内部链接

自生网站的页面，使用相对路径。

page1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <a href="page2.html">跳转到页面2</a>
    <a href="test/page3.html">跳转到页面3</a>
</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>这是页面2</h1>
</body>
</html>

test/page3.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>这是页面3</h1>
</body>
</html>

8.3 锚点链接

锚点链接是内部链接的一种，链接地址（href）指向当前页面的某个部分。

目标元素id
a标签的href属性指向该id

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <a href="#article">推荐文章</a><br />
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的夏天</li>
            <li>曲婉婷-我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
</body>
</html>