# Terrarium 项目第一部分：HTML 入门 ```mermaid journey title 你的HTML学习之旅 section 基础 创建HTML文件: 3: Student 添加DOCTYPE: 4: Student 结构文档: 5: Student section 内容 添加元数据: 4: Student 插入图片: 5: Student 组织布局: 5: Student section 语义 使用正确标签: 4: Student 提升无障碍性: 5: Student 建造生态瓶: 5: Student ``` ![HTML 入门](../../../../translated_images/zh-CN/webdev101-html.4389c2067af68e98.webp) > 速记图由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供 HTML，即超文本标记语言，是你访问过的每个网站的基础。把 HTML 想象成网页的骨架 —— 它定义了内容的位置、组织方式以及每个部分的含义。虽然 CSS 会在之后用颜色和布局“装饰”你的 HTML，JavaScript 会通过交互让它“活起来”，但 HTML 则提供了实现一切的基本结构。 在本课中，你将为一个虚拟的玻璃植物箱界面创建 HTML 结构。这个动手项目将教会你基本的 HTML 概念，同时构建一个视觉上有吸引力的东西。你将学习如何使用语义元素来组织内容、处理图片，并为一个交互式网页应用创建基础。 课程结束时，你将拥有一个可以显示植物图片并组织成列的工作HTML页面，为下一课的样式设计做好准备。如果一开始看起来很基础，不用担心 —— 这正是 HTML 在 CSS 添加视觉装饰之前应有的样子。 ```mermaid mindmap root((HTML 基础)) Structure DOCTYPE 声明 HTML 元素 头部部分 主体内容 Elements 标签与属性 自闭合标签 嵌套元素 块元素 vs 行内元素 Content 文本元素 图像 容器 (div) 列表 Semantics 有意义的标签 无障碍 屏幕阅读器 SEO 优势 Best Practices 正确嵌套 有效标记 描述性替代文本 结构清晰 ``` ## 课前测验 [课前测验](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **观看学习**：查看这段有帮助的视频综述 > > [![HTML 基础视频](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## 设置你的项目 在开始编写 HTML 代码之前，让我们为你的玻璃植物箱项目搭建一个合适的工作空间。从一开始创建一个有序的文件结构是一个非常重要的习惯，它将在你整个网页开发旅程中为你带来帮助。 ### 任务：创建你的项目结构 你将为玻璃植物箱项目创建专用文件夹，并添加你的第一个 HTML 文件。这里有两个方法可供选择： **选项 1：使用 Visual Studio Code** 1. 打开 Visual Studio Code 2. 点击“文件”→“打开文件夹”或使用快捷键 `Ctrl+K, Ctrl+O`（Windows/Linux）或 `Cmd+K, Cmd+O`（Mac） 3. 创建一个名为 `terrarium` 的新文件夹并选中它 4. 在资源管理器面板点击“新建文件”图标 5. 将你的文件命名为 `index.html` ![VS Code 资源管理器显示新建文件](../../../../translated_images/zh-CN/vs-code-index.e2986cf919471eb9.webp) **选项 2：使用终端命令** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **这些命令实现的操作有：** - **创建** 一个名为 `terrarium` 的新目录 - **进入** 该 `terrarium` 目录 - **创建** 一个空的 `index.html` 文件 - **在 Visual Studio Code 中打开** 该文件进行编辑 > 💡 **专业提示**：`index.html` 文件名在网页开发中很特殊。当访问网站时，浏览器会自动寻找 `index.html` 作为默认显示页面。这意味着像 `https://mysite.com/projects/` 这样的 URL 会自动加载 `projects` 文件夹中的 `index.html`，无需在 URL 中指定文件名。 ## 理解 HTML 文档结构 每个 HTML 文档都有特定的结构，浏览器需要通过它来理解并正确显示页面内容。把这种结构想象成一封正式的信 —— 它由按特定顺序排列的必需元素组成，帮助接收者（这里是浏览器）正确处理内容。 ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D["标题"] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> 标题"] G --> I["<div> 容器"] G --> J["<img> 图片"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` 让我们先添加每个 HTML 文档都需要的基础内容。 ### DOCTYPE 声明和根元素 任何 HTML 文件的前两行作为对浏览器的“文档介绍”： ```html <!DOCTYPE html> <html></html> ``` **理解这段代码做了什么：** - **声明** 文档类型为 HTML5，使用 `<!DOCTYPE html>` - **创建** 含有所有页面内容的根 `<html>` 元素 - **确立** 现代网页标准，确保浏览器正确渲染 - **保证** 各种浏览器和设备上的一致显示效果 > 💡 **VS Code 提示**：在 VS Code 中将鼠标悬停于任意 HTML 标签上，可以看到来自 MDN Web Docs 的帮助信息，包括用法示例和浏览器兼容性详情。 > 📚 **了解更多**：DOCTYPE 声明确保浏览器不会进入“怪异模式”，怪异模式用于支持非常古老的网站。现代网页开发使用简单的 `<!DOCTYPE html>` 声明以保证[标准兼容渲染](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。 ### 🔄 **教学检查点** **暂停并反思**：在继续之前，确保你理解了： - ✅ 为什么每个 HTML 文档都需要 DOCTYPE 声明 - ✅ `<html>` 根元素包含了什么 - ✅ 这种结构如何帮助浏览器正确渲染页面 **快速自测**：你能用自己的话解释“标准兼容渲染”是什么意思吗？ ## 添加必要的文档元数据 HTML 文档的 `<head>` 部分包含了浏览器和搜索引擎需要的关键信息，但访客不会直接看到它。这部分可以看作是“幕后”信息，帮助你的网页正常工作且在不同设备和平台上正确显示。 这段元数据告诉浏览器如何显示页面，使用什么字符编码，以及如何处理不同屏幕尺寸 —— 这些都是构建专业且可访问网页的重要因素。 ### 任务：添加文档头部 将以下 `<head>` 部分插入到 `<html>` 标签的开头和结尾之间： ```html <head> <title>Welcome to my Virtual Terrarium ``` **拆解每个元素的作用：** - **设置** 在浏览器标签和搜索结果中显示的页面标题 - **指定** UTF-8 字符编码，确保文本能正确显示全球字符 - **保证** 兼容现代版本的 Internet Explorer - **通过设置视口匹配设备宽度** 来实现响应式设计 - **控制** 页面初始缩放，保证内容按自然大小显示 > 🤔 **思考这个问题**：如果你设置了 `` 会发生什么？页面会被强制固定为 600 像素宽，打破响应式设计！了解更多关于[正确视口配置](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)。 ## 构建文档主体 `` 元素包含网页所有的可见内容 —— 用户将看到并与之交互的一切。虽然 `` 向浏览器提供指令，`` 才是真正持有内容：文字、图片、按钮及其他创建用户界面的元素。 让我们添加主体结构，理解 HTML 标签如何协作创建有意义内容。 ### 理解 HTML 标签结构 HTML 使用成对标签定义元素。大多数标签有开标签如 `

` 和闭标签如 `

`，中间包含内容：`

Hello, world!

`，表示一个包含文本“Hello, world!”的段落元素。 ### 任务：添加 `` 元素 更新你的 HTML 文件，加入 `` 元素： ```html Welcome to my Virtual Terrarium ``` **该完整结构提供了：** - **建立** 基本的 HTML5 文档框架 - **包含** 正确渲染所必须的元数据 - **创建** 一个空白主体，为你的可见内容准备位置 - **符合** 现代网页开发的最佳实践 现在你可以开始添加玻璃植物箱的可见元素了。我们将用 `
` 元素作为容器来组织不同内容区域，并用 `` 标签显示植物图片。 ### 使用图片和布局容器 图片在 HTML 中比较特殊，因为它们使用“自闭合”标签。与像 `

` 这类包裹内容的元素不同，`` 标签在标签内部通过属性（如 `src` 指向图片文件路径，`alt` 用于无障碍访问）包含了所需全部信息。 添加图片前，你需要通过创建图片文件夹并添加植物图形来合理组织项目文件。 **首先，设置你的图片：** 1. 在玻璃植物箱项目文件夹中创建一个名为 `images` 的文件夹 2. 从 [solution folder](../../../../3-terrarium/solution/images) 下载植物图片（共14张） 3. 将所有植物图片复制到你的新 `images` 文件夹中 ### 任务：创建植物展示布局 现在，在你的 `` 标签之间，添加组织成两列的植物图片： ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **这段代码的步骤说明如下：** - **创建** 一个主页面容器，`id="page"`，用于包含所有内容 - **建立** 两个列容器：`left-container` 和 `right-container` - **将** 7 株植物放入左列，7 株放入右列 - **用** `plant-holder` div 包裹每株植物图片，方便单独定位 - **应用** 一致的类名，方便下一课中 CSS 样式设定 - **为** 每个植物图片分配唯一 ID，便于后续 JavaScript 操作 - **包含** 指向 images 文件夹的正确文件路径 > 🤔 **考虑这个问题**：注意所有图片的 alt 属性都写成了“plant”，这不利于无障碍访问。屏幕阅读器会连续读取14次“plant”，用户无法区分每张图片具体是哪株植物。你能想到更合适、描述更准确的 alt 文本吗？ > 📝 **HTML 元素类型**：`
` 是“块级元素”，占满整行宽度；`` 是“内联元素”，只占内容所需宽度。如果把这些 `
` 标签全部换成 `` 会怎样？ ### 🔄 **教学检查点** **结构理解**：花点时间回顾你的 HTML 结构： - ✅ 你能识别布局中的主要容器吗？ - ✅ 你理解为什么每张图片都需要唯一 ID？ - ✅ 你会怎么描述 `plant-holder` div 的作用？ **视觉检查**：在浏览器中打开你的 HTML 文件。你应该能看到： - 一个基础的植物图片列表 - 图片分成两列排列 - 简单且未加样式的布局 **记住**：这种朴素的外观正是 CSS 添加样式前 HTML 应有的样子！ 有了这些标记，植物将出现在屏幕上，虽然还没有美观的样式 —— 那正是下一课 CSS 的作用！现在你有了坚实的 HTML 基础，内容被正确组织且符合无障碍最佳实践。 ## 使用语义 HTML 提升无障碍性 语义 HTML 指的是根据内容的意义和用途选择 HTML 元素，而不是仅仅根据外观使用。当你使用语义标记时，就在向浏览器、搜索引擎和辅助技术（如屏幕阅读器）传达内容的结构和意义。 ```mermaid flowchart TD A[需要添加内容？] --> B{类型？} B -->|主标题| C["

"] B -->|副标题| D["

,

等"] B -->|段落| E["

"] B -->|列表| F["

    ,
      "] B -->|导航| G["