HTML——多媒体

最新推荐文章于 2024-05-14 21:28:28 发布

少年游四方

最新推荐文章于 2024-05-14 21:28:28 发布

阅读量3.1k

点赞数

分类专栏： # Web技术应用基础-HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_45823118/article/details/114906050

版权

Web技术应用基础-HTML 专栏收录该内容

18 篇文章 58 订阅

订阅专栏

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

任务描述
相关知识
任务要求

任务描述

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://www.educoder.net/attachments/download/171680/1.jpg;
添加第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://www.educoder.net/attachments/download/171680/1.jpg" alt="食材准备" width="400">
    <h2>步骤：</h2>
    <ol>
        <li>蒜头、姜切片。红辣椒用滚刀切条，小葱切葱花。
            <br><br>
            <img src="https://www.educoder.net/attachments/download/171681/3.gif" alt="步骤1" width="200"></li>
        <li>藕带斜切成段
            <br><br>
            <img src="https://www.educoder.net/attachments/download/171682/4.jpg" alt="步骤2" width="200"></li>
        <li>起油锅，下花椒，待轻微冒烟、香气溢出，捞出花椒。下藕带翻炒，加白米醋和盐，炒1~2分钟。
            <br><br>
            <img src="https://www.educoder.net/attachments/download/171683/5.jpg" alt="步骤3" width="200"></li>
        <li>放糖提鲜，撒香油和葱花，翻匀出锅
            <br><br>
            <img src="https://www.educoder.net/attachments/download/171684/8.gif" 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>

少年游四方

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML——多媒体

HTML图片：带图片的菜谱网页任务描述相关知识概念属性alt属性:提供替换文本height,width属性：设定图形尺寸align属性：设置对齐与浮动方式任务要求任务描述Web世界绚丽多彩，除了显示文本以外，网页中还能包含图片、动画、音频和视频等多媒体信息。在本关中，你将编写一个带图片的菜谱网页。通过本关，你将学习如何使用HTML在网页中添加图片，以及如何设置相关的图片属性。本关网页显示效果如下图所示：相关知识概念在 HTML 中，我们使用 <img> 标签定义图像。基本的写
复制链接

扫一扫