用途:teaching-page 用于设计一个自包含的 HTML 教学页面,目标是让页面只教一件事,并通过留白和单一强调色引导注意力,而不是靠边框、卡片和多种颜色。
核心理念:对比度是一种预算。边框、颜色、字重和字号都在消耗对比度来表达“这里不同”。多数页面过度消耗,导致没有重点。结构上几乎不花对比度,少量投入才能落在关键处。
内容判断:先决定页面教的是知识还是技能。知识页要让难度尽量低,减少读者工作记忆负担;技能页要让读者先回忆、预测或尝试,再给出答案。多数页面是知识页,应当易读。
三条规则:不用盒子,用留白和细线分隔,每页最多一个图形可置于白色区域;每页和每个图形只用一个强调色标记一件事,其余为中性灰;每节只讲一个想法,节间约 50px 留白,字号足够大以放慢阅读。
样式:独立页面内联 CSS 以保持可移植;作为页面家族一起维护和分发时共用 page.css。提供固定色值令牌,如 --paper、--ink、--body、--quiet、--rule、--line、--accent。正文 18px、行高 1.7、衬线体;无衬线仅用于小元素。
版式形状:先选形状再写作。可选阶梯、边注、标注图、轨道、表格、图块。一次阅读的页面可选前四种,可反复查阅的用表格或图块。
图形:不要用颜色区分类别,用字重、虚线、大小和位置表达。直接标注在图形上,避免图例。
写作:开头一句话给出读者能获得什么,再展开。可跳过内容放边注。每节一个想法,整页一个收获。说明面向谁、假设已知什么。不要凭记忆教学,核实主张并在结尾给出最佳来源。
限制与常见错误:避免盒装卡片、第二个强调色、颜色编码类别、图例、徽章、推荐语、行动号召、等距流程步骤、四色象限等。完成前用内联 SVG、无 CDN、无构建步骤写入临时路径,打开并截图检查。三项检查:没有内容在盒子里;强调色只出现在一个角色;读者可在任意节后停下而不丢失线索。
资料中未提供具体安装命令、收费信息或平台支持范围。