HTML图片：带图片的菜谱网页

Flec-hazo

于 2024-06-08 02:28:14 发布

阅读量1.1k

点赞数 13

文章标签： html 前端学习

本文链接：https://blog.csdn.net/m0_73614626/article/details/139538059

版权

任务描述

Web世界绚丽多彩，除了显示文本以外，网页中还能包含图片、动画、音频和视频等多媒体信息。

在本关中，你将编写一个带图片的菜谱网页。通过本关，你将学习如何使用HTML在网页中添加图片，以及如何设置相关的图片属性。

本关网页显示效果如下图所示：

相关知识

概念

在 HTML 中，我们使用 <img> 标签定义图像。

基本的写法如下：

<img src="URL" />

<img> 是空标签，因为它只包含了属性，没有结束标签。还记得之前我们学到的<br>换行标签吗？它也是空标签。

src源属性，即source，它指定了图片资源的URL地址。

提示：

在HTML5中，可以省略最后的/，写为：<img src="url">。通常，我们建议大家选择大家其中一种方式，统一代码风格。

属性

alt 属性：提供替换文本

我们可以使用 alt 属性，为图像添加一段描述性的替代文本。

举例如下：

<img src="http://7xle3b.com1.z0.glb.clouddn.com/2017-06-22-8.jpg" alt="树莓派桌面" />

显示效果如图：

但是，在网络情况不好或者其他图像无法显示时，就会显示alt标签中替代文本。

显示效果如图：

另外，替代文本也可以帮助，靠听觉而非视觉使用浏览器的人理解图片信息。

height, width 属性: 设定图像尺寸

我们可以通过height属性设置图像的高度，width属性设置图像的宽度。

举例如下：

<body>
    <h1 align="center">适配不同设备的应用图标</h1>
    <br>
    <div align="center">
        <img src="./iTunesArtwork@2x.png" width="50" height="50" alt="50*50 应用图标">
        <img src="./iTunesArtwork@2x.png" width="100" height="100" alt="100*100 应用图标">
        <img src="./iTunesArtwork@2x.png" width="200" height="200" alt="200*200 应用图标">
    </div>
</body>

显示效果如图：

大家可以看到，第5-7行中，我们使用了相对URL指定图片地址，./iTunesArtwork@2x.png代表当前路径下的iTunesArtwork@2x.png图片。

我们通过设置width和height属性的值，设定三张图片为不同的尺寸。

提示：指定图像尺寸，可以加快页面加载速度。

为什么呢？因为指定了图像的尺寸，浏览器就可以预留空间，在图像加载的同时让文本显示在周围，浏览器渲染更快，也就加快了页面加载速度。

align 属性：设置对齐与浮动方式

我们还可以在一段文本中加入图片，而图片的对齐方式和浮动方式都是勇敢align属性设定的。

align的取值可以有：

对齐：
- bottom 底对齐
- top 顶对齐
- middle 中心对齐
浮动：
- left 左浮动
- right 右浮动

一个简单的示例如下：

<body>
    <h2>图像默认对齐方式：</h2>
    <p>图像 <img src="./tree.png" width="80"> 在文本中</p>
    <h2>设置图像对齐方式：</h2>
    <p>Bottom：图像 <img src="./tree.png" align="bottom" width="80"> 在文本中</p>
    <p>Middle：图像 <img src="./tree.png" align="middle" width="80"> 在文本中</p>
    <p>Top：图像 <img src="./tree.png" align="top" width="80"> 在文本中</p>
    <p>Left：图像 <img src="./tree.png" align="left" width="80" > 在文本中</p>
    <br>
    <p>Right：图像 <img src="./tree.png" align="right" width="80"> 在文本中</p>
</body>

显示效果如图：

通过本例，我们可以直观的看到不同align属性值对图片对齐显示的影响。在之后的实际应用中，大家可以根据需求进行选择。

任务要求

添加第10行<img>的src属性，属性值设置为https://data.educoder.net/api/attachments/UEdCeDgyMzNUWjU5MGdXWFJEYWhpZz09;
添加第15行<img>的alt属性，属性值为步骤1；
分别设置第15、18、21和24行的图片宽度为200。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>HTML - 图片</title>
</head>
<body>
<h1>带图片的菜谱——酸辣藕带</h1>
<h2>食材：</h2>
<p>蒜头3瓣、姜一小块、葱2根、藕带250g、红辣椒3个、花椒1大勺、米醋1大勺、盐适量、糖一小撮、香油一小勺。</p>
<img src="https://data.educoder.net/api/attachments/UEdCeDgyMzNUWjU5MGdXWFJEYWhpZz09" alt="食材准备" width="400">
<h2>步骤：</h2>
<ol>
    <li>蒜头、姜切片。红辣椒用滚刀切条，小葱切葱花。
        <br><br>
        <img src="https://data.educoder.net/api/attachments/Tzl3TDFvMHlGbkI5TVNFRFZCKytnUT09" alt="步骤1" width="200"></li>
    <li>藕带斜切成段
        <br><br>
        <img src="https://data.educoder.net/api/attachments/WkNZMTl4ektaTEJ5TS8zYmc2WlIvUT09" alt="步骤2" width="200"></li>
    <li>起油锅，下花椒，待轻微冒烟、香气溢出，捞出花椒。下藕带翻炒，加白米醋和盐，炒1~2分钟。
        <br><br>
        <img src="https://data.educoder.net/api/attachments/TGZIektHTVlPRG9mMWJTTVg3aVljUT09" alt="步骤3" width="200"></li>
    <li>放糖提鲜，撒香油和葱花，翻匀出锅
        <br><br>
        <img src="https://data.educoder.net/api/attachments/Zk9BZGU1UVI3bkdyY0pyOWRhU3hldz09" alt="步骤4" width="200"></li>
    <li>完成。
        <br><br>
</ol>
<hr>
<small><p>转自<a href="https://www.xiachufang.com/recipe/102430733/">下厨房-酸辣藕带</a></p></small>
</p>
</body>
</html>