第三节 实践与总结
一、实践任务
为了将本章学习的 HTML 基础语法融会贯通，请大家完成以下三个递进式的实践任务。这不仅是对敲击代码能力的训练，更是对网页工程化思维的培养。
任务一、手工搭建个人主页基础框架
- 在 VS Code 中新建文件，使用
html:5快速生成页面骨架，将语言修改为简体中文，并设置个性化的<title>。 - 在
<body>内部，严格按照语义化标准依次添加<header>、<nav>、<main>和<footer>模块。 - 丰富页面内容：在
<header>中使用<h1>标签写入主标题；在<nav>中使用<ul>、<li>和<a>标签构建基础导航菜单；在<main>中使用<h2>、<p>和<img>标签展示一段包含个人照片、简介和兴趣爱好的核心内容；在<footer>中使用<p>标签添加联系方式和版权声明。 - 保存后在浏览器中预览，确保页面结构能正常显示（制作过程中如遇标签拼写遗忘，可随时召唤 AI 程序员辅助提示）。
任务二、首页草图设计与规划
在真正编写复杂的排版代码之前，请先在纸上或画图软件中绘制一个个人主页的“线框草图”（Wireframe），并附上 100 字左右的设计说明。通过此任务，巩固对页面空间划分和模块化标签布局的理解。 草图必须包含以下主要部分：
- 导航栏：包含“首页”、“关于我”、“作品集”和“联系我”等锚文本链接区块。
- 主要内容区：突出显示个人简介和作品集的视觉占位。
- 页脚：包含版权信息与社交媒体链接位置。
任务三、通过AI程序员生成优化代码
将你在“任务一”中写好的纯净 HTML 代码，连同“任务二”中对草图的排版需求描述，一起提交给 VS Code 中的通义灵码（AI 程序员）。 尝试向 AI 发送指令要求优化：“这是我写的个人主页基础 HTML 代码，请根据我的草图结构（此处描述你的排版要求），帮我优化 HTML 标签嵌套，并生成对应的基础样式。” 体验从手工搭建骨架到 AI 辅助精装修的完整开发闭环。 实践任务
二、章节总结
本章我们正式步入了代码的世界，搭建了网页的骨骼。在日常开发中，熟练掌握以下核心概念和编辑器快捷操作，将极大提升你的编码效率：
（一）核心开发快捷键（VS Code）
- 快速生成 HTML 骨架：在空白文档中输入
!或html:5，然后敲击Tab键或回车键。 - 快速生成标签：输入标签名（如输入
a），然后敲击回车键，编辑器会自动补全完整的<a></a>甚至包含href属性。 - 代码注释：用鼠标选中需要注释的代码行，按下
Ctrl + /（Mac 为Cmd + /）即可一键注释或取消注释。注释代码在浏览器中不可见，仅供开发者阅读。 - 代码格式化：写代码时如果缩进错乱，按下
Shift + Alt + F，编辑器会自动帮你对齐所有标签，并能借此直观地检查是否有标签忘记了闭合。
（二）HTML 核心规范与常识
- 默认首页名称：在 Web 服务器中，网站主页的默认文件名永远是
index.html。 - 骨架标签的唯一性：
<html>、<head>、<title>和<body>是一座房子的地基和主梁，在一个网页中必不可少，且有且仅能出现一次。 - 有始有终的闭合原则：只要是双边标签（如
<div>、<p>），开启后必须要有对应的结束标签（</div>、</p>）进行闭合。 - 语言规范：国内网站开发，习惯将
<html>标签的lang属性设置为zh-Hans（简体中文）。
（三）AI 辅助编程习惯
- 遇阻即问：遇见不会拼写的标签单词或不理解的报错，直接选中该代码区域，通过 AI 智能问答获取标准答案和用法解析。
- 智能代码推测：在编辑器内输入代码时，如果在空白位置停留 1 到 3 秒，通义灵码会自动分析你的上下文，并以灰色字体显示推测联想的完整代码，此时按下
Tab键即可一键采纳，大幅减少键盘敲击次数。