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

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 项目HTMLHyperText Markup Language是你访问过的每一个网站的地基。可以把 HTML 想象成网页的骨架——它决定内容放在哪里、如何组织、每一部分代表什么。CSS 稍后负责给 HTML 穿衣打扮颜色与布局JavaScript 则赋予它交互性而 HTML 提供了让这一切成为可能的本质结构。在本课中你将为一个虚拟温室界面搭建 HTML 结构。这个动手项目让你在学习基础 HTML 概念的同时构建出视觉上吸引人的东西学会用语义化元素组织内容、处理图片、并为交互式 Web 应用打下基础。课程结束时你会得到一张能按两列展示 14 张植物图片的可运行 HTML 页面随时可以进入下一课的 CSS 美化阶段。一开始它看起来很简单——这正是 CSS 加入视觉修饰之前 HTML 应该有的样子。搭建你的项目工作区在接触 HTML 代码之前先为 Terrarium 项目准备一个规范的目录结构。从一开始就养成良好文件组织习惯会在整个 Web 开发旅程中持续受益。任务创建项目结构创建一个专用的terrarium项目文件夹并加入你的第一个 HTML 文件。以下两种方式任选其一方式一使用 Visual Studio Code打开 Visual Studio Code点击文件→打开文件夹或使用快捷键CtrlK, CtrlOWindows/Linux/CmdK, CmdOMac新建一个名为terrarium的文件夹并选中它在资源管理器面板中点击新建文件图标将文件命名为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的开始与结束标签之间插入这段headhead titleWelcome to my Virtual Terrarium/title meta charsetutf-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1 / /head每个元素的作用设置页面标题显示在浏览器标签页与搜索结果中指定UTF-8 字符编码保证全球范围内的文字正确显示确保与现代版本 Internet Explorer 的兼容性配置响应式设计——将视口宽度设置为匹配设备宽度控制初始缩放级别让内容以自然大小显示。想一想如果设置这样的视口 meta 标签meta nameviewport contentwidth600会发生什么页面会被强制固定为 600 像素宽从而破坏响应式设计请务必使用widthdevice-width, initial-scale1的标准配置。源码印证仓库中的完整参考答案 3-terrarium/solution/index.html 使用了完全相同的四行head元数据并在此基础上增加了样式表与脚本的引入方式link relstylesheet与script defer说明这是项目认可的规范写法。构建文档主体body元素包含网页的全部可见内容——用户看到并与之交互的一切。head区域给浏览器下指令body区域则承载真实内容文字、图片、按钮等构成用户界面的元素。理解 HTML 标签结构HTML 使用成对标签定义元素。多数标签有开始标签如p和结束标签如/p中间是内容pHallo Welt!/p就创建了一个包含Hello, world!文字的段落元素。任务添加 body 元素更新 HTML 文件使其包含body!DOCTYPE html html head titleWelcome to my Virtual Terrarium/title meta charsetutf-8 / meta http-equivX-UA-Compatible contentIEedge / meta nameviewport contentwidthdevice-width, initial-scale1 / /head body/body /html这组完整结构提供的能力建立基本 HTML5 文档框架包含浏览器正确渲染所需的关键元数据创建一个空的 body为可见内容做好准备遵循现代 Web 开发最佳实践。现在可以添加温室的可见元素了。我们将使用div元素作为容器来组织不同内容区块并用img元素展示植物图片。使用图片与布局容器图片在 HTML 中很特殊因为它们使用自闭合标签。与p/p这类包裹内容的元素不同img标签通过src图片文件路径和alt无障碍文本等属性把所需信息全部放在标签自身内部。在向 HTML 添加图片之前需要先组织好项目文件创建images文件夹并放入植物素材。首先准备好图片在terrarium项目文件夹内创建images文件夹从仓库的解决方案图片目录获取 14 张植物图片plant1.pngplant14.png均为 400×400 像素将所有植物图片复制进你的images文件夹。任务创建植物展示布局现在把按两列组织的植物图片插入body/body标签之间div idpage div idleft-container classcontainer div classplant-holder img classplant altplant idplant1 src./images/plant1.png / /div div classplant-holder img classplant altplant idplant2 src./images/plant2.png / /div div classplant-holder img classplant altplant idplant3 src./images/plant3.png / /div div classplant-holder img classplant altplant idplant4 src./images/plant4.png / /div div classplant-holder img classplant altplant idplant5 src./images/plant5.png / /div div classplant-holder img classplant altplant idplant6 src./images/plant6.png / /div div classplant-holder img classplant altplant idplant7 src./images/plant7.png / /div /div div idright-container classcontainer div classplant-holder img classplant altplant idplant8 src./images/plant8.png / /div div classplant-holder img classplant altplant idplant9 src./images/plant9.png / /div div classplant-holder img classplant altplant idplant10 src./images/plant10.png / /div div classplant-holder img classplant altplant idplant11 src./images/plant11.png / /div div classplant-holder img classplant altplant idplant12 src./images/plant12.png / /div div classplant-holder img classplant altplant idplant13 src./images/plant13.png / /div div classplant-holder img classplant altplant idplant14 src./images/plant14.png / /div /div /div这段代码逐步做了什么创建主页面容器idpage承载所有内容建立两个列容器left-container与right-container组织左列 7 株植物、右列 7 株植物将每张植物图片包裹进plant-holderdiv便于单独定位应用一致的类名供下一课 CSS 样式使用为每张植物图片分配唯一 ID供后续 JavaScript 交互使用正确引用images文件夹中的文件路径。源码印证ID 即交互钩子这些idplant1idplant14并非随意命名。查看 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开始标签之后直接插入一行为温室页面加上合适的标题h1My Terrarium/h1为什么语义化标记如此重要帮助屏幕阅读器在页面中导航并理解结构改善搜索引擎优化SEO——清晰的内容层级提升对视觉障碍或认知差异用户的可访问性创造所有设备与平台上更好的用户体验遵循Web 标准与专业开发的最佳实践。语义化 vs. 非语义化选择对照表用途✅ 语义化选择❌ 非语义化选择主标题h1Title/h1div classbig-textTitle/div导航navulli/li/ul/navdiv classmenudiv/div/div按钮buttonClick me/buttonspan onclick...Click me/span文章内容articlep/p/articlediv classcontentdiv/div/div源码印证完整答案 3-terrarium/solution/index.html 展示了语义化标记的更完整形态——header包裹h1标题、navulli构建导航菜单、main承载主要内容、section划分植物选择区与温室区、footer呈现版权信息。这正是本课所讲语义化思想的规模化应用也印证了文档中语义化选择的对比表。创建温室容器现在为温室本身添加 HTML 结构——那个最终会放入植物的玻璃罐。这一节演示一个重要概念HTML 提供结构但没有 CSS 样式时这些元素还不可见。温室标记使用描述性的类名这让下一课的 CSS 样式既直观又易于维护。任务添加温室结构在最后一个/div标签之前即页面容器闭合标签之前插入这段标记div idterrarium div classjar-top/div div classjar-walls div classjar-glossy-long/div div classjar-glossy-short/div /div div classdirt/div div classjar-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如今已废弃因为它们与现代可访问性标准和响应式设计原则不兼容。动手做这个实验用marquee标签临时包裹h1标题marqueeh1My Terrarium/h1/marquee在浏览器中打开页面观察滚动效果思考这个标签为何被废弃提示从用户体验与可访问性角度移除marquee标签回到语义化标记。反思问题滚动的标题会如何影响视觉障碍或对动态效果敏感的用户哪些现代 CSS 技术能更可访问地实现类似视觉效果为什么使用当前 Web 标准而非废弃元素很重要回顾与自学HTML 作为 Web 的地基已超过 30 年从简单的文档标记语言演变为构建交互应用的成熟平台。理解这段演变有助于你欣赏现代 Web 标准并做出更好的开发决策。推荐学习路径HTML 历史与演变研究从 HTML 1.0 到 HTML5 的时间线探索某些标签为何被废弃可访问性、移动友好性、可维护性了解新兴的 HTML 特性与提案。深入语义化 HTML研究完整的 HTML5 语义元素清单练习判断何时使用article、section、aside与main学习用于增强可访问性的 ARIA 属性。现代 Web 开发理解 HTML 如何与 CSS 和 JavaScript 协同工作学习 Web 性能与 SEO 最佳实践。反思问题你发现了哪些废弃的 HTML 标签它们为何被移除未来版本正在提案哪些新 HTML 特性语义化 HTML 如何同时贡献于可访问性与 SEO⚡ 接下来 5 分钟可以做什么打开 DevToolsF12检查你最喜欢网站的 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 基础。学习进度时间线阶段时间投入核心内容基础5 分钟DOCTYPE 声明、HTML 根元素、head 与 body 的理解元数据10 分钟字符编码、viewport 配置、浏览器兼容性内容创建15 分钟正确文件路径、alt 文本的重要性、自闭合标签布局组织20 分钟div 结构、类与 ID 命名、嵌套元素层级语义化掌握30 分钟标题层级、屏幕阅读器导航、可访问性最佳实践进阶概念1 小时现代语义元素、ARIA 属性、性能考量专业技能1 周文件结构模式、可维护标记、团队协作专家级别1 个月渐进增强、跨浏览器兼容、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 中你会看到本课预留的plant1plant14ID 如何被 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考