章节总结与工程实训评价

【章节核心知识重构与工程启示】

本章我们正式跨入了 Web 前端开发的代码世界，从底层逻辑剖析了网页的骨骼系统。在日常的工程化开发中，必须将以下核心规范与操作内化为肌肉记忆：

Emmet 引擎加速：在空白文档中键入 ! 或 html:5 并触发 Tab 键，即可瞬间构建 W3C 标准骨架，这是现代前端开发提效的基础基建。
代码格式化与审查：使用 Shift + Alt + F 快捷键，利用编辑器底层算法对 DOM 树进行自动化缩进对齐。这是排查标签交叉嵌套与未闭合缺陷的最直观手段。
注释屏蔽机制：使用 Ctrl + / 快捷键可实现代码块的快速注释与解开。注释内容在浏览器渲染树中将被静默丢弃，仅供研发团队进行代码逻辑交接与版本溯源。

路由入口标准：在任何 Web 服务器生态中，系统级主页的默认物理文件名必须严格锁定为 index.html。
骨架唯一性原则：<html>、<head>、<title> 和 <body> 构成了 DOM 树的绝对主干，在一个独立的 HTML 文档生命周期中，它们有且仅能被声明一次。
生命周期闭合原则：所有双边标记节点（如 <div>、<p>）一旦开启，必须在其作用域结束时提供对应的闭合标签（如 </div>、</p>），以防止渲染引擎发生内存泄漏或布局雪崩。

上下文感知补全：在编辑器中键入代码时，若出现逻辑停顿，通义灵码等大模型将基于当前上下文（Context）自动推断并以灰色幽灵文本展示后续代码。按下 Tab 键一键采纳，可极大降低键盘物理损耗与拼写错误率。
即时报错解析：面对未知的控制台警告或标签拼写遗忘，摒弃传统的低效检索，直接利用大模型内联对话进行报错诊断与方案输出。

在完成本章学习后，请每一位开发者审视自身是否已建立起合格的职业素养：

对“信息无障碍”的敬畏：是否深刻理解了语义化标签（如 <header>、<main>）的社会价值？你的代码是否已经准备好为屏幕阅读器及视障群体提供平等、精准的信息服务？
代码层面的“工匠精神”：是否能够抵御“能跑就行”的惰性思维，在每一个尖括号的闭合、每一次层级缩进中，追求软件工程的极致规范与优雅？

个人数字名片系统的语义化构建

本实训任务不仅是对底层 DOM 结构构建能力的专项训练，更是对现代前端“先设计后研发、人机协同审查”工程化思维的深度淬炼。请按顺序执行以下三大阶段任务：

在编写任何代码之前，严禁直接上手敲击。请在纸上或借助专业原型工具（如墨刀、Figma）绘制个人数字主页的“线框图草图”，并输出不少于 100 字的架构规划说明。

设计约束：
- 全局导航（<nav>）：必须包含“首页”、“关于我”、“项目矩阵”等锚点占位。
- 核心视区（<main>）：必须清晰划分出个人简介与作品集展示的物理边界。
- 系统页脚（<footer>）：需规划出版权声明与开源协议展示区。

在 VS Code 中新建工程目录与 index.html 入口文件。使用 html:5 指令生成骨架，并强制将 lang 属性修正为 zh-Hans。
严禁复制粘贴，纯手工在 <body> 内部利用 <header>、<nav>、<main>、<section>、<footer> 等 HTML5 语义化标签还原阶段一中的原型拓扑结构。
注入基础文本与图像占位符（如 <h1> 主标题、<img> 资源节点）。

将你在阶段二中手写的原生 HTML 代码，以及阶段一中的架构设计说明，统一输入给 VS Code 侧边栏的通义灵码大模型。

审查指令（Prompt）示例：“这是我基于低保真原型手写的个人数字主页 HTML 底层代码。请作为资深前端架构师，对我使用的标签语义化准确性、嵌套规范性进行 Code Review。若存在缺陷，请指出并输出重构后的标准 HTML 代码，同时尝试为其注入基础的 CSS 样式以提升可读性。”
体验从“手工搭建高鲁棒性骨架”到“AI 辅助视图精装”的现代 Web 开发完整闭环。

本章实训考核总分 100 分，要求提交文件包含：原型设计图（拍照或截图）、原始 HTML 源码、AI 审查反馈日志。

评价维度	考核指标与得分标准	分值占比
原型设计规范性	线框图结构清晰，严格包含了导航、主视区、页脚三大核心版块；设计说明逻辑严密。	20%
DOM 结构语义化	彻底摒弃“Div 地狱”，全栈采用 HTML5 语义化标签进行模块划分，结构与原型图高度吻合。	30%
代码闭合与规范	文档类型（DOCTYPE）与字符集声明正确；标签闭合严密，无交叉嵌套；缩进格式标准。	25%
AI 协同与审查效能	成功发起针对代码质量的 AI 对话，能准确理解 AI 给出的审查建议并应用于最终代码库中。	25%