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 开源课程中 3-terrarium 项目的第一课围绕虚拟温室Terrarium界面系统讲解 HTML 文档结构、head元数据、图片与布局容器、语义化标签与可访问性等核心知识。跟随本文你将亲手写出一个能在浏览器中显示两列植物图片的基础index.html为后续课程用 CSS 上妆、用 JavaScript 实现拖拽交互打下坚实的结构基础。HTMLHyperText Markup Language超文本标记语言是你访问过的每一个网站的地基。可以把 HTML 想象成网页的骨架——它决定内容放在哪里、如何组织、每一块代表什么。CSS 负责为 HTML“穿衣打扮”JavaScript 负责赋予其交互生命而 HTML 提供的正是让这一切成为可能的本质结构。课程对应的英文原文位于 3-terrarium/1-intro-to-html/README.md本文以其为主体并结合仓库中的完整实现展开。完成本课之后你将拥有一张可用的 HTML 页面——植物图片被组织进整齐的列中随时准备在下一课被 CSS 修饰。一开始看起来朴素是完全正常的在没有 CSS 之前HTML 本来就该长这样。一、搭建项目工作区在写任何 HTML 代码之前先为 terrarium 项目建立一个规范的工作区。从一开始就养成清晰的文件组织结构是贯穿整个 Web 开发旅程的关键习惯。方式一使用 Visual Studio Code打开 Visual Studio Code点击File → Open Folder或使用快捷键CtrlK, CtrlOWindows/Linux/CmdK, CmdOMac新建一个名为terrarium的文件夹并选中它在资源管理器Explorer面板中点击“New File”图标将文件命名为index.html。方式二使用终端命令mkdir terrarium cd terrarium touch index.html code index.html这些命令分别做了什么mkdir terrarium——为项目新建一个名为terrarium的目录cd terrarium——进入该目录touch index.html——创建一个空的index.html文件code index.html——用 Visual Studio Code 打开该文件进行编辑。进阶提示index.html在 Web 开发中地位特殊。当用户访问一个站点时浏览器会自动寻找index.html作为默认展示页面。也就是说像https://mysite.com/projects/这样的 URL 会自动从projects目录中伺服index.html无需在 URL 中显式写出文件名。二、理解 HTML 文档结构每个 HTML 文档都遵循浏览器需要理解并正确渲染的特定结构。可以把它类比成一封正式信函——含有按特定顺序排列的必备要素帮助接收方即浏览器正确处理内容。先添加每个 HTML 文档都需要的本质基础。DOCTYPE 声明与根元素任何 HTML 文件的前两行都充当文档向浏览器的“自我介绍”!DOCTYPE html html/html这段代码的作用用!DOCTYPE html声明文档类型为 HTML5创建将容纳页面全部内容的根元素html确立现代 Web 标准保证浏览器正确渲染确保不同浏览器与设备上的一致显示。深入理解DOCTYPE 声明能防止浏览器进入“quirks mode”怪异模式——那是过去为兼容非常古老的网站而存在的模式。现代 Web 开发统一使用简洁的!DOCTYPE html声明来保证符合标准的渲染。VS Code 小技巧把鼠标悬停在 VS Code 中的任何 HTML 标签上即可看到来自 MDN Web Docs 的实用信息包括用法示例与浏览器兼容性细节。快速自测你能用自己的话解释“符合标准的渲染standards-compliant rendering”是什么意思吗三、添加文档必备元数据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逐项拆解每个元素的作用元素作用title设置页面标题显示在浏览器标签页与搜索结果中meta charsetutf-8 /指定 UTF-8 字符编码保证文本在全球范围内正确显示meta http-equivX-UA-Compatible contentIEedge /确保与现代版本的 Internet Explorer 兼容meta nameviewport contentwidthdevice-width, initial-scale1 /配置响应式设计让视口匹配设备宽度控制初始缩放级别为自然大小思考题如果把 viewport meta 标签写成meta nameviewport contentwidth600会怎样页面会被强制固定为 600 像素宽直接破坏响应式设计四、构建文档主体body元素包含网页的所有可见内容——用户将看到并交互的一切。head给了浏览器指令body则装下真实内容文本、图片、按钮等构成用户界面的元素。理解 HTML 标签结构HTML 使用成对标签定义元素。大多数标签有开标签如p与闭标签如/p中间夹着内容pHello, world!/p即创建了一个包含“Hello, world!”文本的段落元素。将文件更新为包含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 开发最佳实践的书写方式。五、使用图片与布局容器图片在 HTML 中很特殊因为它们使用“自闭合”标签。与p/p这类包裹内容的元素不同img标签把全部信息都装进标签自身通过src属性指定图片文件路径、通过alt属性提供无障碍文本。在把图片加进 HTML 之前需要先正确组织项目文件在 terrarium 项目文件夹内创建一个名为images的文件夹从 solution 解决方案文件夹 下载 14 张植物图片把所有植物图片复制到你的images文件夹中。任务创建植物展示布局在body/body标签之间添加按两列组织的植物图片div idpage div idleft-container classcontainer div classplant-holder img classplant altplant idplant1 src./images/plant1.png / /div !-- plant2 ... plant7 同理 -- /div div idright-container classcontainer div classplant-holder img classplant altplant idplant8 src./images/plant8.png / /div !-- plant9 ... plant14 同理 -- /div /div逐行解读这段代码用idpage创建容纳全部内容的主页面容器建立两个列容器left-container与right-container左列组织 7 株植物右列组织 7 株植物每张植物图片都被包进一个plant-holderdiv便于单独定位使用一致的 class 命名供下一课的 CSS 直接使用给每张植物图片分配唯一 id为后续 JavaScript 交互做准备写入指向 images 文件夹的正确文件路径。思考题注意目前所有图片的 alt 文本都是同一个 plant。这对无障碍并不理想——屏幕阅读器用户会连续听到 14 遍“plant”却不知道每张图具体是哪株植物。你能为每张图想出更具体、更具描述性的 alt 文本吗HTML 元素类型div是“块级”block-level元素占据整行宽度span是“内联”inline元素只占据所需宽度。如果把这里的div全部换成span会怎样视觉检查在浏览器中打开你的 HTML 文件应当看到一排基础的植物图片列表图片组织成两列朴素、未加样式的布局。请记住——在 CSS 修饰之前HTML 本来就该长这样。六、用语义化 HTML 提升可访问性语义化 HTML 意味着根据元素的含义与用途来选择它而不是只看外观。使用语义化标记就是在向浏览器、搜索引擎以及屏幕阅读器等辅助技术传达内容的结构与意义。添加语义化页面标题在开标签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可以做一个实验来感受纯语义结构在浏览器中禁用 JavaScript、去掉 CSS 后打开 HTML 文件你看到的就是所创建的纯粹语义骨架。七、创建 Terrarium 玻璃容器接下来为温室本身——植物最终将被放置进去的玻璃容器——添加 HTML 结构。这一节演示一个重要概念HTML 提供结构但在没有 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 的主温室容器供后续样式化为每个视觉组件定义独立元素瓶顶 jar-top、瓶壁 jar-walls、泥土 dirt、瓶底 jar-bottom用嵌套元素实现玻璃反光效果jar-glossy-long 与 jar-glossy-short 两个光泽元素使用清晰表明每个元素用途的描述性 class 名为下一课创建玻璃温室外观的 CSS 样式铺好结构。注意到什么了吗即使添加了这段标记页面上也看不到任何新东西这恰好说明 HTML 提供结构、CSS 提供外观——这些div元素真实存在只是还没有视觉样式那是下一课的事。八、对照仓库源码从骨架到完整实现课程文档提供的标记是后续一切的地基。在仓库的 完整解决方案 中这套骨架被扩展成了功能完整、结构更语义化的页面可以作为对照学习的绝佳素材index.html中把idpage容器内的内容进一步组织进nav、header、main、section、footer等语义化区块每张植物图片保留plant-holder包装与唯一 id温室结构#terrarium的jar-top、jar-walls、jar-glossy-long、jar-glossy-short、dirt、jar-bottom等 class在 style.css 中都能找到一一对应的样式规则如#left-container、#right-container、.container、.plant-holder、.plant、.jar-walls等印证了“描述性 class 让 CSS 直观可维护”的设计意图script.js 中通过dragElement(document.getElementById(plant1))直到plant14共 14 次调用为每株植物注册拖拽逻辑——这正解释了为什么课程强调“为每张植物图片分配唯一 id”id 是 HTML 结构与 JavaScript 交互之间的契约。也就是说本课书写的 HTML 结构直接决定了后续课程 CSS 样式与 JS 拖拽能力能否生效它是整个 terrarium 应用的地基。九、两个拓展挑战GitHub Copilot Agent 挑战使用 Agent 模式完成如下挑战为 terrarium 项目创建一个“植物养护指南”Plant Care Guide区块的语义化 HTML 结构。建议提示词创建一个语义化 HTML 区块包含主标题 “Plant Care Guide”以及“Watering”浇水、“Light Requirements”光照需求、“Soil Care”土壤养护三个小标题每个小节用一段植物养护信息填充使用section、h2、h3、p等正确的语义化标签组织内容。HTML 历史探索挑战HTML 自 1990 年 Tim Berners-Lee 在 CERN 创造第一个浏览器以来已发生巨大演变。一些较老的标签如marquee如今已被废弃因为它们与现代无障碍标准和响应式设计原则不兼容。试试这个实验临时用marquee标签包住你的h1标题marqueeh1My Terrarium/h1/marquee在浏览器中打开页面观察滚动效果思考这个标签为何被废弃提示从用户体验与可访问性角度考虑移除marquee回到语义化标记。反思问题滚动标题会如何影响视力障碍或对动态敏感的用户哪些现代 CSS 技术能以更无障碍的方式实现类似视觉效果为什么使用现行 Web 标准而不是废弃元素很重要十、回顾、自测与进阶路线你的 HTML 工具箱完成本课后你现在拥有文档结构带正确 DOCTYPE 的完整 HTML5 基础语义化标记提升可访问性与 SEO 的有意义标签图片集成正确的文件组织与 alt 文本实践布局容器使用描述性 class 名策略性运用 div无障碍意识理解屏幕阅读器导航方式现代标准当前 HTML5 实践与废弃标签知识项目基础为 CSS 样式与 JavaScript 交互打下的坚实底座。5 分钟速成练习打开 DevToolsF12检查一个你喜爱网站的 HTML 结构用基础标签h1、p、img创建一个简单 HTML 文件用 W3C HTML 验证器在线校验你的 HTML尝试用!-- comment --在 HTML 中添加注释。一周进阶路线用语义化标记完成 terrarium 项目作业用 ARIA 标签与角色创建无障碍网页练习构建含多种输入类型的表单探索 localStorage、地理定位等 HTML5 API研究响应式 HTML 模式与移动优先设计。深度学习路径HTML 历史与演变研究从 HTML 1.0 到 HTML5 的时间线探索某些标签被废弃的原因可访问性、移动友好性、可维护性关注新兴的 HTML 特性与提案语义化 HTML 深入完整研读 HTML5 语义化元素清单练习判断何时使用article、section、aside与main学习用于增强可访问性的 ARIA 属性现代 Web 开发理解 HTML 如何与 CSS、JavaScript 协同工作学习性能与 SEO 最佳实践。反思问题你发现了哪些废弃的 HTML 标签它们为何被移除未来版本有哪些新 HTML 特性被提出语义化 HTML 如何同时贡献于可访问性与 SEO十一、课后作业课程配套作业 HTML 实战构建博客模拟页 要求你独立完成一套完整的博客首页结构先绘制带语义元素标注的视觉草图手绘、Figma、线框工具均可再建立“草图区块 → HTML 元素”映射清单最终编码出至少使用 10 种不同语义化元素header、nav、main、article、section、aside、footer、h1–h3、p、ul、li、a、img、time、blockquote、strong、em的页面并附上 3–5 句反思总结。下一步你的 HTML 结构已经准备好迎接 CSS 样式的修饰基于这份语义化地基下一课的理解将顺畅许多。【免费下载链接】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），仅供参考 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 开源课程中 3-terrarium 项目的第一课围绕虚拟温室Terrarium界面系统讲解 HTML 文档结构、head元数据、图片与布局容器、语义化标签与可访问性等核心知识。跟随本文你将亲手写出一个能在浏览器中显示两列植物图片的基础index.html为后续课程用 CSS 上妆、用 JavaScript 实现拖拽交互打下坚实的结构基础。HTMLHyperText Markup Language超文本标记语言是你访问过的每一个网站的地基。可以把 HTML 想象成网页的骨架——它决定内容放在哪里、如何组织、每一块代表什么。CSS 负责为 HTML“穿衣打扮”JavaScript 负责赋予其交互生命而 HTML 提供的正是让这一切成为可能的本质结构。课程对应的英文原文位于 3-terrarium/1-intro-to-html/README.md本文以其为主体并结合仓库中的完整实现展开。完成本课之后你将拥有一张可用的 HTML 页面——植物图片被组织进整齐的列中随时准备在下一课被 CSS 修饰。一开始看起来朴素是完全正常的在没有 CSS 之前HTML 本来就该长这样。一、搭建项目工作区在写任何 HTML 代码之前先为 terrarium 项目建立一个规范的工作区。从一开始就养成清晰的文件组织结构是贯穿整个 Web 开发旅程的关键习惯。方式一使用 Visual Studio Code打开 Visual Studio Code点击File → Open Folder或使用快捷键CtrlK, CtrlOWindows/Linux/CmdK, CmdOMac新建一个名为terrarium的文件夹并选中它在资源管理器Explorer面板中点击“New File”图标将文件命名为index.html。方式二使用终端命令mkdir terrarium cd terrarium touch index.html code index.html这些命令分别做了什么mkdir terrarium——为项目新建一个名为terrarium的目录cd terrarium——进入该目录touch index.html——创建一个空的index.html文件code index.html——用 Visual Studio Code 打开该文件进行编辑。进阶提示index.html在 Web 开发中地位特殊。当用户访问一个站点时浏览器会自动寻找index.html作为默认展示页面。也就是说像https://mysite.com/projects/这样的 URL 会自动从projects目录中伺服index.html无需在 URL 中显式写出文件名。二、理解 HTML 文档结构每个 HTML 文档都遵循浏览器需要理解并正确渲染的特定结构。可以把它类比成一封正式信函——含有按特定顺序排列的必备要素帮助接收方即浏览器正确处理内容。先添加每个 HTML 文档都需要的本质基础。DOCTYPE 声明与根元素任何 HTML 文件的前两行都充当文档向浏览器的“自我介绍”!DOCTYPE html html/html这段代码的作用用!DOCTYPE html声明文档类型为 HTML5创建将容纳页面全部内容的根元素html确立现代 Web 标准保证浏览器正确渲染确保不同浏览器与设备上的一致显示。深入理解DOCTYPE 声明能防止浏览器进入“quirks mode”怪异模式——那是过去为兼容非常古老的网站而存在的模式。现代 Web 开发统一使用简洁的!DOCTYPE html声明来保证符合标准的渲染。VS Code 小技巧把鼠标悬停在 VS Code 中的任何 HTML 标签上即可看到来自 MDN Web Docs 的实用信息包括用法示例与浏览器兼容性细节。快速自测你能用自己的话解释“符合标准的渲染standards-compliant rendering”是什么意思吗三、添加文档必备元数据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逐项拆解每个元素的作用元素作用title设置页面标题显示在浏览器标签页与搜索结果中meta charsetutf-8 /指定 UTF-8 字符编码保证文本在全球范围内正确显示meta http-equivX-UA-Compatible contentIEedge /确保与现代版本的 Internet Explorer 兼容meta nameviewport contentwidthdevice-width, initial-scale1 /配置响应式设计让视口匹配设备宽度控制初始缩放级别为自然大小思考题如果把 viewport meta 标签写成meta nameviewport contentwidth600会怎样页面会被强制固定为 600 像素宽直接破坏响应式设计四、构建文档主体body元素包含网页的所有可见内容——用户将看到并交互的一切。head给了浏览器指令body则装下真实内容文本、图片、按钮等构成用户界面的元素。理解 HTML 标签结构HTML 使用成对标签定义元素。大多数标签有开标签如p与闭标签如/p中间夹着内容pHello, world!/p即创建了一个包含“Hello, world!”文本的段落元素。将文件更新为包含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 开发最佳实践的书写方式。五、使用图片与布局容器图片在 HTML 中很特殊因为它们使用“自闭合”标签。与p/p这类包裹内容的元素不同img标签把全部信息都装进标签自身通过src属性指定图片文件路径、通过alt属性提供无障碍文本。在把图片加进 HTML 之前需要先正确组织项目文件在 terrarium 项目文件夹内创建一个名为images的文件夹从 solution 解决方案文件夹 下载 14 张植物图片把所有植物图片复制到你的images文件夹中。任务创建植物展示布局在body/body标签之间添加按两列组织的植物图片div idpage div idleft-container classcontainer div classplant-holder img classplant altplant idplant1 src./images/plant1.png / /div !-- plant2 ... plant7 同理 -- /div div idright-container classcontainer div classplant-holder img classplant altplant idplant8 src./images/plant8.png / /div !-- plant9 ... plant14 同理 -- /div /div逐行解读这段代码用idpage创建容纳全部内容的主页面容器建立两个列容器left-container与right-container左列组织 7 株植物右列组织 7 株植物每张植物图片都被包进一个plant-holderdiv便于单独定位使用一致的 class 命名供下一课的 CSS 直接使用给每张植物图片分配唯一 id为后续 JavaScript 交互做准备写入指向 images 文件夹的正确文件路径。思考题注意目前所有图片的 alt 文本都是同一个 plant。这对无障碍并不理想——屏幕阅读器用户会连续听到 14 遍“plant”却不知道每张图具体是哪株植物。你能为每张图想出更具体、更具描述性的 alt 文本吗HTML 元素类型div是“块级”block-level元素占据整行宽度span是“内联”inline元素只占据所需宽度。如果把这里的div全部换成span会怎样视觉检查在浏览器中打开你的 HTML 文件应当看到一排基础的植物图片列表图片组织成两列朴素、未加样式的布局。请记住——在 CSS 修饰之前HTML 本来就该长这样。六、用语义化 HTML 提升可访问性语义化 HTML 意味着根据元素的含义与用途来选择它而不是只看外观。使用语义化标记就是在向浏览器、搜索引擎以及屏幕阅读器等辅助技术传达内容的结构与意义。添加语义化页面标题在开标签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可以做一个实验来感受纯语义结构在浏览器中禁用 JavaScript、去掉 CSS 后打开 HTML 文件你看到的就是所创建的纯粹语义骨架。七、创建 Terrarium 玻璃容器接下来为温室本身——植物最终将被放置进去的玻璃容器——添加 HTML 结构。这一节演示一个重要概念HTML 提供结构但在没有 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 的主温室容器供后续样式化为每个视觉组件定义独立元素瓶顶 jar-top、瓶壁 jar-walls、泥土 dirt、瓶底 jar-bottom用嵌套元素实现玻璃反光效果jar-glossy-long 与 jar-glossy-short 两个光泽元素使用清晰表明每个元素用途的描述性 class 名为下一课创建玻璃温室外观的 CSS 样式铺好结构。注意到什么了吗即使添加了这段标记页面上也看不到任何新东西这恰好说明 HTML 提供结构、CSS 提供外观——这些div元素真实存在只是还没有视觉样式那是下一课的事。八、对照仓库源码从骨架到完整实现课程文档提供的标记是后续一切的地基。在仓库的 完整解决方案 中这套骨架被扩展成了功能完整、结构更语义化的页面可以作为对照学习的绝佳素材index.html中把idpage容器内的内容进一步组织进nav、header、main、section、footer等语义化区块每张植物图片保留plant-holder包装与唯一 id温室结构#terrarium的jar-top、jar-walls、jar-glossy-long、jar-glossy-short、dirt、jar-bottom等 class在 style.css 中都能找到一一对应的样式规则如#left-container、#right-container、.container、.plant-holder、.plant、.jar-walls等印证了“描述性 class 让 CSS 直观可维护”的设计意图script.js 中通过dragElement(document.getElementById(plant1))直到plant14共 14 次调用为每株植物注册拖拽逻辑——这正解释了为什么课程强调“为每张植物图片分配唯一 id”id 是 HTML 结构与 JavaScript 交互之间的契约。也就是说本课书写的 HTML 结构直接决定了后续课程 CSS 样式与 JS 拖拽能力能否生效它是整个 terrarium 应用的地基。九、两个拓展挑战GitHub Copilot Agent 挑战使用 Agent 模式完成如下挑战为 terrarium 项目创建一个“植物养护指南”Plant Care Guide区块的语义化 HTML 结构。建议提示词创建一个语义化 HTML 区块包含主标题 “Plant Care Guide”以及“Watering”浇水、“Light Requirements”光照需求、“Soil Care”土壤养护三个小标题每个小节用一段植物养护信息填充使用section、h2、h3、p等正确的语义化标签组织内容。HTML 历史探索挑战HTML 自 1990 年 Tim Berners-Lee 在 CERN 创造第一个浏览器以来已发生巨大演变。一些较老的标签如marquee如今已被废弃因为它们与现代无障碍标准和响应式设计原则不兼容。试试这个实验临时用marquee标签包住你的h1标题marqueeh1My Terrarium/h1/marquee在浏览器中打开页面观察滚动效果思考这个标签为何被废弃提示从用户体验与可访问性角度考虑移除marquee回到语义化标记。反思问题滚动标题会如何影响视力障碍或对动态敏感的用户哪些现代 CSS 技术能以更无障碍的方式实现类似视觉效果为什么使用现行 Web 标准而不是废弃元素很重要十、回顾、自测与进阶路线你的 HTML 工具箱完成本课后你现在拥有文档结构带正确 DOCTYPE 的完整 HTML5 基础语义化标记提升可访问性与 SEO 的有意义标签图片集成正确的文件组织与 alt 文本实践布局容器使用描述性 class 名策略性运用 div无障碍意识理解屏幕阅读器导航方式现代标准当前 HTML5 实践与废弃标签知识项目基础为 CSS 样式与 JavaScript 交互打下的坚实底座。5 分钟速成练习打开 DevToolsF12检查一个你喜爱网站的 HTML 结构用基础标签h1、p、img创建一个简单 HTML 文件用 W3C HTML 验证器在线校验你的 HTML尝试用!-- comment --在 HTML 中添加注释。一周进阶路线用语义化标记完成 terrarium 项目作业用 ARIA 标签与角色创建无障碍网页练习构建含多种输入类型的表单探索 localStorage、地理定位等 HTML5 API研究响应式 HTML 模式与移动优先设计。深度学习路径HTML 历史与演变研究从 HTML 1.0 到 HTML5 的时间线探索某些标签被废弃的原因可访问性、移动友好性、可维护性关注新兴的 HTML 特性与提案语义化 HTML 深入完整研读 HTML5 语义化元素清单练习判断何时使用article、section、aside与main学习用于增强可访问性的 ARIA 属性现代 Web 开发理解 HTML 如何与 CSS、JavaScript 协同工作学习性能与 SEO 最佳实践。反思问题你发现了哪些废弃的 HTML 标签它们为何被移除未来版本有哪些新 HTML 特性被提出语义化 HTML 如何同时贡献于可访问性与 SEO十一、课后作业课程配套作业 HTML 实战构建博客模拟页 要求你独立完成一套完整的博客首页结构先绘制带语义元素标注的视觉草图手绘、Figma、线框工具均可再建立“草图区块 → HTML 元素”映射清单最终编码出至少使用 10 种不同语义化元素header、nav、main、article、section、aside、footer、h1–h3、p、ul、li、a、img、time、blockquote、strong、em的页面并附上 3–5 句反思总结。下一步你的 HTML 结构已经准备好迎接 CSS 样式的修饰基于这份语义化地基下一课的理解将顺畅许多。【免费下载链接】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），仅供参考