### 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分钟。
- 放糖提鲜,撒香油和葱花,翻匀出锅
- 完成。
转自下厨房-酸辣藕带