` 元素。
+
+### 图片
+
+有一个不需要结束标签的 html 标签就是 `![]()
` 标签，因为它有一个 `src` 元素，它包含页面渲染该项所需的所有信息。
+
+在你的项目目录中创建一个名为 `images` 的文件夹，把[源代码文件夹](../../solution/images)中所有的图片都放到新建的文件夹中。（里面总共有14张植物的图片）
+
+### 任务
+
+把这些植物图片分为两列放到 `` 标签里：
+
+```html
+` 标签。
+
+在开头的 `` 标签下面添加以下一行:
+
+```html
+
` 标签上面:
+
+```html
+
+
+```
+
+> 笔记： Spans 和 Divs。 Divs 是块元素，而 Spans 是行内元素。如果把它们替换了会发生什么？
+
+更新完我们代码后，屏幕上植物图片都展示出来了。只是看起来十分糟糕，因为我们还没有用 CSS 样式来美化它们，我们会在下一节课里面去处理。
+
+每个图像都有 alt 文本，当你无法看到或者无法渲染图片的时候就会出现。这是可访问性的一个重要属性。你可以在在以后的课程中了解更多关于可访问性的内容；现在，只需要记住，如果用户由于某种原因不能查看图像，alt 属性为图像提供替代信息(造成的原因可能有 加载太慢、src 属性错误、或者用户可能使用的是屏幕阅读器等)。
+
+✅ 你注意到每张图片都有相同的 alt 标签了吗？这是好的实现吗？为什么或为什么不？你能改进这个代码吗？
+
+---
+
+## 语义化的标签
+
+一般来说，在编写 HTML 时，最好使用有意义的 “语义” 。这是什么意思？这意味着你使用 HTML 标签来表示它们所被设计的数据或交互的类型。举个例子，网页上的核心标题就应该使用 `
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+ ` 标签。
+
+在开头的 `` 标签下面添加以下一行:
+
+```html
+My Terrarium
+```
+
+使用语义化的标签例如：标题使用 `` 、无序列表使用 `` ，这样能帮助屏幕阅读器理解页面的内容。一般来说，按钮需要写作 `
- ` ，这样能帮助屏幕阅读器理解页面的内容。一般来说，按钮需要写作 `
+
+
+```
+
+✅ 即使在屏幕上添加了这些内容，你仍然看不到任何东西渲染出来。为什么?
+
+---
+
+## 🚀 挑战
+
+HTML 中还有一些狂野的'旧'标签，玩起来仍然很有趣。虽然[这些标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)不推荐你使用，但是，你还是可以试试，能否用 `
+
+
+
+
+
+