企业官网建设流程全解析

Web-Dev-For-Beginners Terrarium 项目第 1 课：用 HTML 搭建虚拟植物温室的结构骨架

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners

导读：本文是 Web-Dev-For-Beginners 开源教程中 Terrarium（虚拟植物温室）项目的第 1 课，核心目标是用纯 HTML 为项目搭建完整的文档结构与布局骨架——从 DOCTYPE 声明、<head>元数据，到双列植物展示区与玻璃罐容器结构。读者完成本课后，将拥有一份语义正确、可访问、可直接进入 CSS 美化阶段的基础页面，并为后续课程中的拖拽交互（DOM 操作）预留好全部钩子（元素 ID）。

本课对应的原始文档位于 translations/de/3-terrarium/1-intro-to-html/README.md（英文原版见 3-terrarium/1-intro-to-html/README.md），仓库内还提供了完整可运行的参考答案（3-terrarium/solution），读者可对照学习。

HTML 与 Terrarium 项目

HTML（HyperText Markup Language）是你访问过的每一个网站的地基。可以把 HTML 想象成网页的"骨架"——它决定内容放在哪里、如何组织、每一部分代表什么。CSS 稍后负责给 HTML "穿衣打扮"（颜色与布局），JavaScript 则赋予它交互性，而 HTML 提供了让这一切成为可能的本质结构。

在本课中，你将为一个虚拟温室界面搭建 HTML 结构。这个动手项目让你在学习基础 HTML 概念的同时，构建出视觉上吸引人的东西：学会用语义化元素组织内容、处理图片、并为交互式 Web 应用打下基础。课程结束时，你会得到一张能按两列展示 14 张植物图片的可运行 HTML 页面，随时可以进入下一课的 CSS 美化阶段。一开始它看起来很简单——这正是 CSS 加入视觉修饰之前 HTML 应该有的样子。

搭建你的项目工作区

在接触 HTML 代码之前，先为 Terrarium 项目准备一个规范的目录结构。从一开始就养成良好文件组织习惯，会在整个 Web 开发旅程中持续受益。

任务：创建项目结构

创建一个专用的terrarium项目文件夹，并加入你的第一个 HTML 文件。以下两种方式任选其一：

方式一：使用 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。

方式二：使用终端命令

mkdir terrarium cd terrarium touch index.html code index.html

这些命令各自的作用：

• 创建名为terrarium的项目目录；
• 进入terrarium目录；
• 创建空文件index.html；
• 用Visual Studio Code 打开该文件进行编辑。

💡专业提示：index.html这个名字在 Web 开发中有特殊意义。当有人访问一个网站时，浏览器会自动寻找index.html作为默认页面。这意味着形如https://mysite.com/projects/的 URL 会自动显示projects文件夹中的index.html文件，无需在 URL 中显式写出文件名。

💡VS Code 技巧：在 VS Code 中把鼠标悬停在任意 HTML 标签上，会看到来自 MDN Web Docs 的帮助信息，包括用法示例与浏览器兼容性说明。

理解 HTML 文档结构

每个 HTML 文档都遵循浏览器正确解析与渲染所需的特定结构。可以把这种结构类比为一封正式信件——它按特定顺序包含必需元素，帮助接收方（这里是浏览器）正确处理内容。

文档的骨架关系如下：<!DOCTYPE html>→<html>→<head>（内含<title>、<meta charset>、<meta viewport>）→<body>（内含<h1>标题、<div>容器、<img>图片）。先来添加每个 HTML 文档都需要的核心基础。

DOCTYPE 声明与根元素

HTML 文件的前两行是文档向浏览器的"自我介绍"：

<!DOCTYPE html> <html></html>

这段代码的作用：

• 声明文档类型为 HTML5（<!DOCTYPE html>）；
• 创建根元素<html>，它包裹页面全部内容；
• 确立现代 Web 标准，保证浏览器正确渲染；
• 保证在不同浏览器与设备上呈现一致。

📚深入理解：DOCTYPE 声明能防止浏览器进入"怪异模式（quirks mode）"——该模式原本是为了兼容非常古老的网站。现代 Web 开发使用简洁的<!DOCTYPE html>声明来确保标准兼容的渲染（standards-compliant rendering）。

🔄 教学检查点

继续之前，请确认自己理解：

• ✅ 为什么每个 HTML 文档都需要 DOCTYPE 声明；
• ✅<html>根元素包含什么；
• ✅ 这种结构如何帮助浏览器正确渲染页面。

快速自测：你能用自己的话解释"标准兼容渲染"是什么意思吗？

添加必需的文档元数据

<head>区域包含浏览器与搜索引擎需要、但访客在页面上看不到的关键信息。可以把它看作"幕后信息"，帮助你的网页在各种设备与平台上正常工作。

这些元数据告诉浏览器如何展示页面、使用什么字符编码、如何处理不同屏幕尺寸——这些都是打造专业、可访问网页的关键。

任务：添加文档头部

在<html>的开始与结束标签之间插入这段<head>：

<head> <title>Welcome to my Virtual Terrarium</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head>

每个元素的作用：

• 设置页面标题，显示在浏览器标签页与搜索结果中；
• 指定UTF-8 字符编码，保证全球范围内的文字正确显示；
• 确保与现代版本 Internet Explorer 的兼容性；
• 配置响应式设计——将视口宽度设置为匹配设备宽度；
• 控制初始缩放级别，让内容以自然大小显示。

🤔想一想：如果设置这样的视口 meta 标签：<meta name="viewport" content="width=600">，会发生什么？页面会被强制固定为 600 像素宽，从而破坏响应式设计！请务必使用width=device-width, initial-scale=1的标准配置。

源码印证：仓库中的完整参考答案 3-terrarium/solution/index.html 使用了完全相同的四行<head>元数据，并在此基础上增加了样式表与脚本的引入方式（<link rel="stylesheet">与<script defer>），说明这是项目认可的规范写法。

构建文档主体

<body>元素包含网页的全部可见内容——用户看到并与之交互的一切。<head>区域给浏览器下指令，<body>区域则承载真实内容：文字、图片、按钮等构成用户界面的元素。

理解 HTML 标签结构

HTML 使用成对标签定义元素。多数标签有开始标签（如<p>）和结束标签（如</p>），中间是内容：<p>Hallo Welt!</p>就创建了一个包含"Hello, world!"文字的段落元素。

任务：添加 body 元素

更新 HTML 文件，使其包含<body>：

<!DOCTYPE html> <html> <head> <title>Welcome to my Virtual Terrarium</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body></body> </html>

这组完整结构提供的能力：

• 建立基本 HTML5 文档框架；
• 包含浏览器正确渲染所需的关键元数据；
• 创建一个空的 body，为可见内容做好准备；
• 遵循现代 Web 开发最佳实践。

现在可以添加温室的可见元素了。我们将使用<div>元素作为容器来组织不同内容区块，并用<img>元素展示植物图片。

使用图片与布局容器

图片在 HTML 中很特殊，因为它们使用"自闭合"标签。与<p></p>这类包裹内容的元素不同，<img>标签通过src（图片文件路径）和alt（无障碍文本）等属性，把所需信息全部放在标签自身内部。

在向 HTML 添加图片之前，需要先组织好项目文件：创建images文件夹并放入植物素材。

首先准备好图片：

1. 在terrarium项目文件夹内创建images文件夹；
2. 从仓库的解决方案图片目录获取 14 张植物图片（plant1.png～plant14.png，均为 400×400 像素）；
3. 将所有植物图片复制进你的images文件夹。

任务：创建植物展示布局

现在把按两列组织的植物图片插入<body></body>标签之间：

<div id="page"> <div id="left-container" class="container"> <div class="plant-holder"> <img class="plant" alt="plant" id="plant1" src="./images/plant1.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant2" src="./images/plant2.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant3" src="./images/plant3.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant4" src="./images/plant4.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant5" src="./images/plant5.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant6" src="./images/plant6.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant7" src="./images/plant7.png" /> </div> </div> <div id="right-container" class="container"> <div class="plant-holder"> <img class="plant" alt="plant" id="plant8" src="./images/plant8.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant9" src="./images/plant9.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant10" src="./images/plant10.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant11" src="./images/plant11.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant12" src="./images/plant12.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant13" src="./images/plant13.png" /> </div> <div class="plant-holder"> <img class="plant" alt="plant" id="plant14" src="./images/plant14.png" /> </div> </div> </div>

这段代码逐步做了什么：

• 创建主页面容器id="page"，承载所有内容；
• 建立两个列容器：left-container与right-container；
• 组织左列 7 株植物、右列 7 株植物；
• 将每张植物图片包裹进plant-holderdiv，便于单独定位；
• 应用一致的类名，供下一课 CSS 样式使用；
• 为每张植物图片分配唯一 ID，供后续 JavaScript 交互使用；
• 正确引用images文件夹中的文件路径。

源码印证（ID 即交互钩子）：这些id="plant1"～id="plant14"并非随意命名。查看 3-terrarium/solution/script.js，可以发现后续课程中的拖拽逻辑正是通过document.getElementById('plant1')等调用逐个获取这 14 个元素并绑定dragElement的。也就是说，本课为每张图片分配唯一 ID，是第 3 课 DOM 与闭包交互的"提前铺垫"。

🤔思考一下：目前所有图片的 alt 文本都是相同的 "plant"。这对无障碍并不理想——屏幕阅读器用户会听到 14 遍 "plant"，却不知道每张图片是哪株植物。你能为每张图片想出更好的、更具描述性的 alt 文本吗？

📝HTML 元素类型：<div>是"块级"元素，占据整行宽度；<span>是"行内"元素，只占所需宽度。想想看：如果把这些<div>全部换成<span>，布局会发生什么变化？

🔄 教学检查点

结构理解：花一点时间回顾你的 HTML 结构：

• ✅ 你能说出布局结构中的主要容器吗？
• ✅ 你理解为什么每张图片需要唯一 ID 吗？
• ✅ 你会如何描述plant-holderdiv 的作用？

视觉检查：在浏览器中打开 HTML 文件，你应该看到：

• 一列基本的植物图片；
• 图片按两列组织；
• 简单、未加样式的布局。

记住：这种朴素外观正是 CSS 介入之前 HTML 应有的样子！

有了这段标记，植物会显示在屏幕上，但还不够精致——那是下一课 CSS 的任务。现在你已经有了一个组织得当、遵循无障碍最佳实践的坚实 HTML 基础。

使用语义化 HTML 提升可访问性

语义化 HTML 意味着根据元素的意义与用途来选择元素，而不仅仅是外观。使用语义化标记，就是在向浏览器、搜索引擎和屏幕阅读器等辅助技术传达内容的结构与含义。

选标签的决策流程可以概括为：要添加内容？先问是什么类型——主标题用<h1>、副标题用<h2>/<h3>、段落用<p>、列表用<ul>/<ol>、导航用<nav>、文章用<article>、区块用<section>、只有没有合适语义标签时才使用通用容器<div>。正确的语义标签会带来：屏幕阅读器把<h1>播报为主标题、建立正确的标题层级、提供正确的文本间距、启用列表导航快捷键、标识导航地标、标记独立内容、归组相关内容。

这种方法让你的网站对残障用户更友好，也帮助搜索引擎更好地理解内容。这是现代 Web 开发的基本原则，能为所有人创造更好的体验。

添加语义化页面标题

在<body>开始标签之后直接插入一行，为温室页面加上合适的标题：

<h1>My Terrarium</h1>

为什么语义化标记如此重要：

• 帮助屏幕阅读器在页面中导航并理解结构；
• 改善搜索引擎优化（SEO）——清晰的内容层级；
• 提升对视觉障碍或认知差异用户的可访问性；
• 创造所有设备与平台上更好的用户体验；
• 遵循Web 标准与专业开发的最佳实践。

语义化 vs. 非语义化选择对照表：

源码印证：完整答案 3-terrarium/solution/index.html 展示了语义化标记的更完整形态——<header>包裹<h1>标题、<nav><ul><li>构建导航菜单、<main>承载主要内容、<section>划分"植物选择区"与"温室区"、<footer>呈现版权信息。这正是本课所讲语义化思想的规模化应用，也印证了文档中语义化选择的对比表。

创建温室容器

现在为温室本身添加 HTML 结构——那个最终会放入植物的玻璃罐。这一节演示一个重要概念：HTML 提供结构，但没有 CSS 样式时这些元素还不可见。

温室标记使用描述性的类名，这让下一课的 CSS 样式既直观又易于维护。

任务：添加温室结构

在最后一个</div>标签之前（即页面容器闭合标签之前）插入这段标记：

<div id="terrarium"> <div class="jar-top"></div> <div class="jar-walls"> <div class="jar-glossy-long"></div> <div class="jar-glossy-short"></div> </div> <div class="dirt"></div> <div class="jar-bottom"></div> </div>

这段温室结构的含义：

• 创建主温室容器，使用唯一 ID 供样式定位；
• 为每个视觉组件定义独立元素（罐顶、罐壁、土壤、罐底）；
• 包含用于玻璃反光效果的嵌套元素（glossy 高光元素）；
• 使用清晰描述用途的类名（jar-top、jar-walls、dirt、jar-bottom、jar-glossy-long/short）；
• 为后续创建玻璃温室外观的 CSS 样式做好准备。

🤔注意到什么了吗？即使添加了这段标记，页面上也看不到任何新东西！这完美诠释了"HTML 提供结构，CSS 提供外观"。这些<div>元素真实存在，但还没有任何视觉样式——那要等下一课！

源码印证（结构如何被"唤醒"）：在 3-terrarium/solution/style.css 中，这五个类名被逐一赋予样式：.jar-walls用background: #d1e1df、border-radius: 1rem、opacity: 0.5等属性构成半透明玻璃罐壁；.jar-top与.jar-bottom收拢罐口罐底；.dirt用深棕色#3a241d表示土壤；.jar-glossy-long与.jar-glossy-short用浅色#ddfbff圆角长条模拟玻璃高光。也就是说，本课的结构骨架与类名设计，正是下一课样式实现的"接口契约"。

🔄 教学检查

HTML 结构掌握：继续之前，确保你能：

• ✅ 解释 HTML 结构与视觉外观之间的区别；
• ✅ 识别语义化与非语义化 HTML 元素；
• ✅ 描述正确标记如何惠及可访问性；
• ✅ 识别完整的文档树结构。

测试理解：尝试在禁用 JavaScript、移除 CSS 的浏览器中打开 HTML 文件。这样你看到的就是自己创建的纯语义化结构！

实战挑战

GitHub Copilot Agent 挑战

使用 Agent 模式完成以下挑战：为温室项目创建一个可追加的"植物养护指南"（Plant Care Guide）语义化 HTML 区块。

要求：创建一个语义化 HTML 区块，包含主标题 "Plant Care Guide"，以及 "Watering"（浇水）、"Light Requirements"（光照需求）、"Soil Care"（土壤养护）三个子区块，每个子区块各含一段养护信息段落。使用<section>、<h2>、<h3>、<p>等正确的语义化标签组织内容。

探索 HTML 历史挑战

了解 Web 的演变

自 Tim Berners-Lee 于 1990 年在 CERN 发明首个 Web 浏览器以来，HTML 经历了巨大演变。一些老标签（如<marquee>）如今已废弃，因为它们与现代可访问性标准和响应式设计原则不兼容。

动手做这个实验：

1. 用<marquee>标签临时包裹<h1>标题：<marquee><h1>My Terrarium</h1></marquee>；
2. 在浏览器中打开页面，观察滚动效果；
3. 思考这个标签为何被废弃（提示：从用户体验与可访问性角度）；
4. 移除<marquee>标签，回到语义化标记。

反思问题：

• 滚动的标题会如何影响视觉障碍或对动态效果敏感的用户？
• 哪些现代 CSS 技术能更可访问地实现类似视觉效果？
• 为什么使用当前 Web 标准而非废弃元素很重要？

回顾与自学

HTML 作为 Web 的地基已超过 30 年，从简单的文档标记语言演变为构建交互应用的成熟平台。理解这段演变有助于你欣赏现代 Web 标准并做出更好的开发决策。

推荐学习路径：

1. HTML 历史与演变

   • 研究从 HTML 1.0 到 HTML5 的时间线；
   • 探索某些标签为何被废弃（可访问性、移动友好性、可维护性）；
   • 了解新兴的 HTML 特性与提案。

2. 深入语义化 HTML

   • 研究完整的 HTML5 语义元素清单；
   • 练习判断何时使用<article>、<section>、<aside>与<main>；
   • 学习用于增强可访问性的 ARIA 属性。

3. 现代 Web 开发

   • 理解 HTML 如何与 CSS 和 JavaScript 协同工作；
   • 学习 Web 性能与 SEO 最佳实践。

反思问题：

• 你发现了哪些废弃的 HTML 标签？它们为何被移除？
• 未来版本正在提案哪些新 HTML 特性？
• 语义化 HTML 如何同时贡献于可访问性与 SEO？

⚡ 接下来 5 分钟可以做什么

• 打开 DevTools（F12），检查你最喜欢网站的 HTML 结构；
• 用基础标签<h1>、<p>、<img>创建简单 HTML 文件；
• 用 W3C HTML 验证器在线校验你的 HTML；
• 尝试用<!-- 注释 -->在 HTML 中加入注释。

🎯 本节课可以完成的目标

• 完成课后测验并回顾语义化 HTML 概念；
• 用正确的 HTML 结构构建一个关于你自己的简单网页；
• 尝试不同级别的标题与文本格式化标签；
• 添加图片和链接，练习多媒体集成；
• 研究你还没试过的 HTML5 特性。

📅 一周 HTML 之旅

• 用语义化标记完成 Terrarium 项目作业；
• 用 ARIA 标签与角色创建可访问网页；
• 练习用各种输入类型创建表单；
• 探索 localStorage 或 geolocation 等 HTML5 API；
• 研究响应式 HTML 模式与移动优先设计；
• 按最佳实践审查其他开发者的 HTML 代码。

🌟 一个月 Web 基础

• 构建一个展示你 HTML 能力的作品集网站；
• 学习用 Handlebars 等框架做 HTML 模板化；
• 通过改进 HTML 文档为开源社区做贡献；
• 掌握自定义元素等高级 HTML 概念；
• 将 HTML 与 CSS 框架、JavaScript 库集成；
• 指导他人学习 HTML 基础。

学习进度时间线

本课工具包总结

完成本课后，你已拥有：

• 文档结构：带正确 DOCTYPE 的完整 HTML5 基础；
• 语义化标记：提升可访问性与 SEO 的有意义标签；
• 图片集成：正确的文件组织与 alt 文本实践；
• 布局容器：策略性使用带描述性类名的 div；
• 可访问性意识：理解屏幕阅读器导航；
• 现代标准：当前 HTML5 实践与废弃标签知识；
• 项目基础：为 CSS 样式与 JavaScript 交互打下的坚实基础。

下一步：你的 HTML 结构已准备好接受 CSS 美化。你建立的语义化基础会让下一课容易得多——可以参考 3-terrarium/2-intro-to-css/README.md 继续学习，对照 3-terrarium/solution/style.css 查看玻璃罐最终效果；随后在 3-terrarium/3-intro-to-DOM-and-closures/README.md 中，你会看到本课预留的plant1～plant14ID 如何被 3-terrarium/solution/script.js 中的闭包式拖拽函数逐一点亮，让植物真正"可拖入"玻璃罐。

课后作业

完成作业 3-terrarium/1-intro-to-html/assignment.md：练习你的 HTML 技能，构建一个博客（Blog）模拟页。该作业要求你经历"视觉线框设计 → HTML 元素规划 → 语义化实现 → 反思"四个阶段，代码中至少使用 10 种不同的语义化元素（如<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>、<time>等），并附有从 1 到 4 分的详细评估量表，是检验本课所学语义化 HTML 的最佳实战。

若想直接看到完整成品，可打开 3-terrarium/solution/index.html 并配合 3-terrarium/solution/style.css 与 3-terrarium/solution/script.js 对照阅读；该项目的部署方式（Azure Static Web Apps，应用根目录设为/solution）记录在 3-terrarium/README.md。

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners