作业练习：HTML插入标题、图片、超链接

原创已于 2025-03-15 20:55:39 修改 · 505 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2025-03-04 20:28:24 首次发布


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>《水果图鉴》</h1>
    <a href="#1">查看橘子图片</a><br>
    <a href="#2">查看苹果图片</a><br>
    <a href="#3">查看香蕉图片</a><br>
    <a name="1"><p>这是橘子</p><img src="./img_src/orange.jpg" alt="" height="300"></a>
    <a name="2"><p>这是苹果</p></a><img src="./img_src/apple.jpg" alt="" height="500">
    <a name="3"><p>这是香蕉</p><img src="./img_src/banana.jpg" alt="" height="500"></a>    
</body>
</html>

效果

简单解释（看源代码和效果能懂的就不用看了，我不太会表达）

<h1></h1>标签括住一级标题，HTML中可用h1~h6设置到6级标题。
<a></a>标签括住链接要显示的文字、图片等，href属性用于指定点击后要跳转到的url，有href属性才能形成超链接；name属性用于长网页快速定位，用<a></a>标签括住目标位置，在name属性设定书签锚点名称，在导航链接href属性中填入“#name属性设定的书签锚点名称”即可。
<img>标签src属性设定插入的图片源地址，此处用相对路径，“./”表示从当前目录起读取，可以省略，在VS Code中输入可以更方便地填写完整（如下图）；alt属性设定图片源地址失效时或网络故障时在图片占位区显示的备用的图片描述；width属性和height属性分别设定图片的宽、高，只存在其中一个时则按图片原比例拉伸。

用word打开的效果

图片不按原比例拉伸，书签这里卡bug了（word书签名不能以数字开头）。。。

标签

#html #前端