模板 02：内容模块与页面写法模板（每页一 tuple）
内容模块 _contentN.py 只写"每个页面的内容"，结构排版由 styles.css 决定、翻页由 _build.py 生成。
一、模块格式（照抄即可）
# _contentN.py —— 第 N 次课内容模块
def img(src, alt, maxh=300):
return ('<div style="text-align:center;margin:12px 0;"><img src="%s" alt="%s" '
'style="max-height:%dpx;width:auto;max-width:88%%;border-radius:10px;'
'box-shadow:0 2px 10px rgba(0,0,0,.18);border:1px solid #e2e8f0;"></div>' % (src, alt, maxh))
SLIDES = [
("封面", "第 1 章 标题", """<div style="text-align:center;...">…正文 HTML…</div>"""),
("目录", "今天学什么", """…"""),
# …… 每一项 = (导航短标题, 页大标题, 正文HTML)
]
二、可直接使用的排版积木（styles.css 已定义）
| 积木 | 用途 |
|---|
<table> | 对比/正反例/矩阵（4–6 列，密表格在本页 <style> 里调小字号） |
.quote-block | 定义/引述/结论（金色左边线） |
.info-box | 提示/小抄/记忆钩（蓝色左边线） |
.danger-box | 易错/警示/答案（红色左边线，尽量少用，答案走揭晓） |
.card-mini | 卡片（配 <h3> 标题），可放 .grid-2/.grid-3 布局 |
.tag tag-blue/red/green/purple/orange | 小块标签 |
.quiz / .quiz-opt / .quiz-btn / .quiz-feedback | 交互题（见模板 04） |
img(src, alt, maxh) | 图片（maxh 建议：正文演示图 330–420，证书/框架大图 760–780，封面 260） |
内联 <svg> | 关系图/流程图（见本模板第五节） |
三、高复用页面模式（今日打磨出的最佳实践）
1) 概念正反例对照表（强烈推荐）
<table>
<tr><th style="width:16%">特征</th><th style="width:30%">含义</th><th>✓ 正面例子</th><th>✗ 反面例子（缺了这项会怎样）</th></tr>
<tr><td><b>① 目的性</b></td><td>有明确目标…</td><td>鸿蒙 OS：目标明确…</td><td>漫无目的的探索性开发…</td></tr>
</table>
2) 故事化案例（冲突→处境→回应→目标→结局）
<p><b>风暴来临（2019）</b>：…冲突…</p>
<p><b>华为的处境</b>：…困难…</p>
<p><b>华为的回应</b>：…行动…</p>
<div class="grid-3">…目标三卡片…</div>
<div class="quote-block">结果：…结局…</div>
3) 失败案例对比（增强说服力）
<div class="grid-3">
<div class="card-mini"><h3>IBM｜OS/360</h3><p>…失败原因…</p></div>
<div class="card-mini"><h3>微软｜Windows Vista</h3><p>…</p></div>
<div class="card-mini"><h3>苹果｜Newton / Lisa</h3><p>…</p></div>
</div>
<div class="quote-block">对照：它赢在……项目管理方法正是避免输掉的关键。</div>
4) 左大图＋右要点＋底部引述
<div style="display:flex;gap:28px;align-items:center;justify-content:center;">
<div style="flex:0 0 55%;text-align:center;"> <img … maxh780 rounded> </div>
<div style="flex:0 0 42%;"> ← 2–4 张 card-mini 要点 → </div>
</div>
<div class="quote-block">……引述……</div>
5) 内联 SVG 关系图/流程图（要点）
- 用
viewBox 固定坐标系，style="height:min(78vh,820px);width:auto;max-width:100%" 随屏放大不失真；
- 画序：先
<defs>（箭头 marker、渐变）→ 先画连线与标签 → 再画色块（否则线被盖）；
- 左右连线留足空隙（≥60px），标签放空隙中央，避免被色块遮挡；页内可加
<style> 压缩页标题/内边距腾空间。
四、字号与拆页规范（投影适用）
| 元素 | 最小字号 |
|---|
正文 .slide-content | 2.1rem |
选择题选项 .quiz-opt | 2.0rem |
按钮 .quiz-btn | 1.7rem |
| 表格 | 1.75rem（密表格页可在本页 <style> 降到 1.4rem） |
标签 .tag | 1.35rem |
- 一页放不下就拆页；选择题一题一页；填空题题干必须给出已知项再留空。
- 密表格合并页用页内
<style> 微调，不动全局样式。
五、书写纪律（避免返工）
- 学生页面不出现：出处注（教材原句/教材数据/沿用学校课件/原题出自）、课堂操作提示（可举手/口答/先写）、内部编号（《06》《07》、v2.0、工作单）、提醒式批注（别记错/注意：/全书都是…的展开）；
- 引导语气统一为中性问句：💡 想一想／猜一猜／请判断；
- 答案一律走交互（点选或揭晓按钮），不直接印在页面上；
- 目标读者是学生——保持纯内容、无加工痕迹。