HTML巩固练习之超链接的使用

最新推荐文章于 2022-04-29 16:27:06 发布

又见蓝翔

最新推荐文章于 2022-04-29 16:27:06 发布

阅读量525

点赞数

分类专栏： HTML 文章标签： HTML csdn 原创锚点链接

本文链接：https://blog.csdn.net/qq_23901235/article/details/69802697

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一：代码编写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>锚点链接</title>
</head>
<body>
    <div>
    <a href="#music">推荐音乐</a><br/>
    <a href="#movie">推荐电影</a><br/>
    <a href="#article">推荐文章</a><br />
    </div>
    <br/>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div>
        <a id="music"></a>
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的夏天</li>
            <li>曲婉婷-我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>

    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div>
        <a id="movie"></a>
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系列</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div>
        <a id="movie"></a>
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
</body>
</html>

二：浏览器显示效果（当点击锚点链接时会滑动到当前页面锚点链接所在位置）