HTML——多媒体

「爱情、让人受尽委屈。」 2021-05-16 20:37 546阅读 0赞

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

*  任务描述
 *  相关知识
 *   *  概念
     *  属性
     *   *  alt属性:提供替换文本
         *  height,width属性 ：设定图形尺寸
         *  align属性：设置对齐与浮动方式
 *  任务要求

# 任务描述 #

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

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

本关网页显示效果如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

# 相关知识 #

## 概念 ##

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

基本的写法如下：

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

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

提示：

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

## 属性 ##

### alt属性:提供替换文本 ###

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

举例如下：

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]  
但是，在网络情况不好或者其他图像无法显示时，就会显示`alt`标签中替代文本。

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]

### 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>

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]  
大家可以看到，第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>

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]  
通过本例，我们可以直观的看到不同`align`属性值对图片对齐显示的影响。在之后的实际应用中，大家可以根据需求进行选择。

# 任务要求 #

1.  添加第10行`<img>`的src属性，属性值设置为`https://www.educoder.net/attachments/download/171680/1.jpg`;
2.  添加第15行`<img>`的`alt`属性，属性值为步骤1；
3.  分别设置第15、18、21和24行的图片宽度为200

*  经验是每个人给自己的错误起的名字。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]  
    **代码文件：**

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/820ec55bbc0a45168712c6ced23e7161.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20210516/87c0b5c9bba842ba868ab593ff90636b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20210516/f1e2a1323c914296ae4dfbcce377fc2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: /images/20210516/949cee16662345ee9b25251d77ca729f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]: /images/20210516/0eb15fdfeee04a37823fe12bb8b16798.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]: /images/20210516/d139ca976bf749c0ae36b187685a8754.png