11.4练习第八章

最新推荐文章于 2025-04-24 02:25:51 发布

vvvolcanoooo

最新推荐文章于 2025-04-24 02:25:51 发布

阅读量90

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/2202_75844191/article/details/134224800

版权

8.1创建超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wust</title>
</head>
<body>
    <a href="https://www.wust.edu.cn/">武汉科技大学</a>
</body>
</html>

加入target属性后的超链接，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片超链接</title>
</head>
<body>
    <a href="https://www.wust.edu.cn/" target="_blank"><img src="../img/1.jpg" alt="图片超链接"/></a>
</body>
</html>

内部链接练习，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yemian1</title>
</head>
<body>
    <p>这是页面1</p>
    <a href="./8.3.2.html">跳转到页面2</a> 
    <a href="../8.3.3.html">跳转到页面3</a>
</body>
</html>

锚点链接练习，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚点链接</title>
</head>
<body>
    <div>
        <a href="#article">推荐文章</a><br/>
        <a href="#music">推荐音乐</a><br/>
        <a href="#movie">推荐电影</a><br/>
    </div>
    <div>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
        ......<br/>
    </div>
    <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>

第八章课后编程题2练习，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是一个网页</title>
</head>
<body>
    <a href="https://www.wust.edu.cn/" target="_blank"><img src="../img/1.jpg" alt="图片超链接"/></a><br/>
    <a href="https://www.wust.edu.cn/" target="_blank">武汉科技大学</a>
</body>
</html>