| 维度 | 知识点 | 技能点 |
|---|---|---|
| 结构与语义 | <main> 表示页面主内容；左右布局可用 <section>、<aside> 表示主要内容与侧栏 |
能够正确选择语义化标签，让结构和意义对应，提升可访问性（a11y） |
| 布局与样式 | CSS 盒模型（margin/padding/border/content）、Flexbox 布局（display:flex、flex属性）、响应式设计（媒体查询） |
使用 CSS 控制左右栏比例；确保在不同设备上布局适配 |
| 多媒体处理 | <img> 的 alt 属性（无障碍）、图片路径（相对/绝对）、图片自适应（max-width:100%） |
为图片设置描述文字，确保加载失败或读屏器仍能获取信息 |
| 文本与排版 | <p> 段落、标题标签 <h1>-<h6>、列表 <ul>/<li> |
书写可读性好的文字排版；控制行距、字体大小和对比度 |
| 交互与表单 | <form>、<input>、<button>、搜索功能 |
创建可提交的搜索表单；为表单元素加上 label |
| 可访问性与SEO | 文本对比度、键盘可达性、meta描述、标题层级 | 使用 Lighthouse/aXe 检测可访问性；合理分配标题等级 |
| 文件与路径 | 正确组织 /assets/images 等目录，统一相对路径写法 |
能够维护清晰的文件结构，减少路径错误 |
| 模块 | HTML 元素 | 知识点 | 技能点 |
|---|---|---|---|
| 左侧图片区 | <div> + <img src="assets/image/teacher.jpg" alt="讲课中的老师与学生"> |
- img 标签与 alt 描述<br>- 相对路径写法<br>- 图片自适应 |
- 选择合适的 alt 文字<br>- 确保图片在小屏幕不溢出 |
| 右侧文字介绍 | <div> + <p> |
- 段落标签语义化<br>- 文本排版可读性 | - 控制行距、宽度，提升阅读体验 |
| 搜索框 | <form> + <input type="text"> + <button> |
- 表单结构与可访问性<br>- placeholder 与 label 用法 |
- 实现基本搜索功能或占位符效果 |
| 整体布局 | <main> 包含两个 <div>（左右栏） |
- Flexbox 布局原理（主轴、交叉轴）<br>- 盒模型 | - 使用 display:flex 让左右区块自适应宽度 |
一张图总结
