第 1 周：HTML 与 CSS 入门

本周目标

本周完成后，应能够：

不依赖模板写出完整的 HTML 文档结构
根据内容选择合适的 HTML 标签，而不是全部使用 div
正确处理图片、链接等资源的路径
使用表格展示数据，使用表单收集基础信息
使用外部 CSS 为页面设置文字、颜色和基础尺寸
使用浏览器开发者工具检查 HTML 结构和 CSS 来源
独立完成一个结构完整、样式清晰的内容型页面

学习资料与范围

主课程：HTML5+CSS3+移动 Web 视频教程
视频范围：P1-P42

视频范围	学习模块	学习结果
P1-P15	环境、HTML 骨架、排版、图片、路径、链接和多媒体	能够搭建基础内容页面
P16-P27	列表、表格、表单、`div`、`span` 和字符实体	能够组织列表、数据和用户输入
P28-P40	CSS 引入、基础选择器、字体、文本和调试工具	能够为页面添加基础视觉样式
P41-P42	新闻详情与 CSS 简介案例	能够综合运用本周内容

需要掌握的知识点

HTML 基础

DOCTYPE、html、head、body 的作用
标签的开始、结束、嵌套、并列和包含关系
标题、段落、换行、水平线和文本格式化标签
图片的路径、替代文本、宽高和常见加载问题
超链接的目标地址、页面内跳转和新窗口打开
音频、视频等多媒体标签的基础用法
HTML 注释及清晰的代码缩进

页面结构

有序列表、无序列表和定义列表的适用场景
表格的表头、表体、行、单元格及单元格合并
input 的常见类型、下拉菜单、文本域、label 和按钮
div 与 span 的区别
header、nav、main、section、article、aside、footer 等语义化标签

路径与目录

相对路径与绝对路径的区别
当前目录、上级目录和子目录的写法
HTML、CSS、图片和媒体资源的分类存放
文件重命名或移动后资源失效的排查方法

CSS 入门

行内、内部和外部样式表的区别，项目中优先使用外部样式表
标签、类、ID 和通配符选择器
使用多个类复用样式
字号、粗细、倾斜、行高和字体族
文本缩进、对齐、装饰线和颜色
font 复合属性的顺序

调试

使用 Elements 面板检查标签嵌套和页面结构
使用 Styles 面板查看样式来源、覆盖和未生效规则
根据控制台或 Network 面板定位资源路径错误

必做练习

个人介绍页：包含标题、照片、简介、兴趣列表和相关链接。
课程表页面：使用表格展示一周课程，至少包含一次单元格合并。
报名表单：包含文本、单选、多选、下拉、文本域和提交按钮。
新闻详情页：使用外部 CSS 设置标题、来源、时间、摘要、正文和图片样式。
路径练习：将图片分别放在当前目录、子目录和同级资源目录中并正确引用。

本周综合任务

独立完成一个个人博客文章页，包含顶部导航、文章信息、正文、相关链接和页脚。

要求：

使用语义化标签组织主要区域
HTML 与 CSS 分文件存放
至少包含图片、列表和链接
不复制课程案例的完整代码
页面能够直接打开，资源无加载失败

本周产出

个人介绍页
课程表页面
报名表单
新闻详情页
个人博客文章页
一份本周 HTML 标签和 CSS 属性笔记

完成检查

能够不参考模板写出完整 HTML 骨架
能够根据内容选择合适的 HTML 标签
能够正确使用图片、链接、列表、表格和表单
能够区分并正确编写相对路径和绝对路径
能够使用外部 CSS 和类选择器组织样式
能够使用开发者工具定位结构、样式和路径问题
已独立完成个人博客文章页