html中的蒲公英特效,HTML——多媒体

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

* 任务描述

* 相关知识

* * 概念

* 属性

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

* height,width属性 ：设定图形尺寸

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

* 任务要求

# 任务描述 #

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

# 相关知识 #

## 概念 ##

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

基本的写法如下：

`` 是空标签，因为它只包含了属性，没有结束标签。

还记得之前我们学到的`
`换行标签吗？它也是空标签。

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

提示：

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

## 属性 ##

### 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`属性设置图像的宽度。

举例如下：

适配不同设备的应用图标

显示效果如图：

![在这里插入图片描述][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 右浮动

一个简单的示例如下：

图像默认对齐方式：

图像 在文本中

设置图像对齐方式：

Bottom：图像 在文本中

Middle：图像 在文本中

Top：图像 在文本中

Left：图像 在文本中

Right：图像 在文本中

显示效果如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]

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

# 任务要求 #

1. 添加第10行``的src属性，属性值设置为`https://i-blog.csdnimg.cn/blog_migrate/86cf3592c4c44354b33fb92018a3dd08.png`;

2. 添加第15行``的`alt`属性，属性值为步骤1；

3. 分别设置第15、18、21和24行的图片宽度为200

* 经验是每个人给自己的错误起的名字。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]

**代码文件：**

HTML - 图片

带图片的菜谱——酸辣藕带

食材：

蒜头3瓣、姜一小块、葱2根、藕带250g、红辣椒3个、花椒1大勺、米醋1大勺、盐适量、糖一小撮、香油一小勺。

步骤：

1. 蒜头、姜切片。红辣椒用滚刀切条，小葱切葱花。

   

2. 藕带斜切成段

   

3. 起油锅，下花椒，待轻微冒烟、香气溢出，捞出花椒。下藕带翻炒，加白米醋和盐，炒1~2分钟。

   

4. 放糖提鲜，撒香油和葱花，翻匀出锅

   

5. 完成。

---

转自下厨房-酸辣藕带