HTML 归档规范

Reference 文件 · 由 Copilot Custom Instruction 第六章按需引用
保存至 OneDrive/Copilot/References/HTML-规范.md
本文件由 Copilot Custom Instruction 第六章引用。生成 HTML 时必须先读取本文件，严格按以下协议执行。
目录
  1. 适用范围
  2. card-meta
  3. 文件命名
  4. 版本与变更历史
  5. 来源与可追溯性
  6. 文件落盘与呈现
  7. HTML 默认设计规范
  8. 归档自检清单

01 适用范围

使用 HTML 归档的内容

不使用 HTML 作为主要载体的内容

代码或项目应直接打包为 ZIP 交付，不使用 HTML 替代实际项目文件。

混合规则

如果知识文章中只包含少量代码、配置或 SKILL 说明，应把相关全文内嵌在 HTML 中作为防丢副本，不单独依赖 .md、.py 或其他外部文件。

02 card-meta

每个归档 HTML 必须在 <head> 内嵌：

<script type="application/json" id="card-meta">
{
  "title": "简洁标题",
  "description": "一句话用途，最多40字",
  "category": "九选一类别",
  "tags": ["标签1", "标签2", "标签3"],
  "project": "项目名",
  "version": "v1.0",
  "date": "YYYY-MM-DD"
}
</script>

要求

category 九选一

类别用途
SKILL可复用的技能说明
Reliability可靠性分析
Process流程规范
Knowledge知识沉淀
Data数据分析
Report报告
Template模板
Tool工具说明
Meeting会议纪要
不得留空，不得创建第十个类别。

03 文件命名

统一使用英文、自解释的四段式命名：

[Product]_[Domain-Task]_[Version].html

规则

示例：

MULTIX-Impact-C_Reliability-Analysis_v1.0.html
SIEMENS-X-RAY_Field-Service-Guide_v1.2.html

04 版本与变更历史

版本规则

变更历史保留

每个版本必须记录

基线读取

生成新版本前：

基线不可读时

位置

版本记录模板

版本：v1.1
日期：YYYY-MM-DD
基于版本：v1.0
基线文件名：Example_v1.0.html
变更位置：第 02、04 章节
新增内容：……
修改内容：……
删除内容：无
保留确认：已继承前版全部正文及历史记录。

05 来源与可追溯性

当文章使用文件、邮件、会议、聊天、数据表或外部资料时：

06 文件落盘与呈现

07 HTML 默认设计规范

7.1 Article Light 适用场景

知识库文章、技术文章、实施手册、流程说明、工作总结、会议总结、数据分析报告、one page、归档 HTML、SKILL 说明类 HTML、日常工作知识沉淀。

7.2 非 Article Light 场景

Dashboard、工作台、Web App、交互原型、PPT 或 HTML PPT、海报、Landing Page、数据大屏、当轮明确提供其他设计规范或参考图的内容。

7.3 默认版式

7.4 内容结构

默认顺序：

Category / Breadcrumb
→ H1 标题
→ 日期、版本、项目
→ 标签
→ 执行摘要
→ 正文章节
→ 来源与可追溯链接
→ 变更历史
→ Footer

7.5 字体与颜色

字体栈：

"Siemens Sans", Calibri, "Microsoft YaHei", Arial, sans-serif
元素规格
H132–38px, #1F1F1F, 字重 500–600
H221–24px, Petrol #009999
H317–19px, #333333
正文15–16px, 行高 1.7–1.8, #333333
次要文字#707070
分隔线#E6E6E6
浅灰背景#F7F7F7

颜色规则：

7.6 内容组件

段落：普通正文直接置于文章流中，不得全部包入卡片。控制段落长度。

卡片：仅用于执行摘要、关键结论、风险、提示或独立步骤。圆角不超过 8px，默认无阴影。

表格：浅灰表头、细边框、清晰行距。表头文字对比度充足，数字列对齐。长表格移动端允许横向滚动。

图片：嵌入正文流，宽度不超过正文区域，保持原始纵横比，必须包含图注。使用外部图片时标注来源。

图表：数据准确性优先。标题、坐标、图例和单位完整。Petrol 主数据色，Orange 仅用于异常/风险系列。不使用无业务含义的 3D 效果。

代码块：可使用深色代码背景，页面整体保持 Light。保留换行和缩进。长代码允许横向滚动。不得使用省略号替代完整代码。

提示与风险：普通提示用 Petrol 或浅青背景；风险和警告用 Orange。不使用 Emoji 作为章节图标。

7.6.1 信息密度原则（借鉴 Anthropic HTML 方法论）

核心理念：信息密度优先，表格/卡片/网格替代长段落。

原则说明
表格 > 段落能用表格呈现的对比、规格、枚举信息，一律用表格
卡片分组相关的 3-5 个信息点用卡片网格（而非连续段落）
图表 > 数据表趋势、分布、占比类数据用 SVG 图表而非纯数字
锚图 > 纯文字流程、架构、关系类信息用流程图/思维导图而非文字描述

7.6.2 导航而非滚动

7.6.3 交互闭环

当内容涉及参数调整、方案比较或多条件筛选时：

7.7 目录

7.8 响应式

7.9 打印与导出

7.10 自包含要求

7.11 场景判断

收到"生成 HTML"时先判断内容类型：

7.12 指令优先级（冲突时）

  1. 我当轮最新明确要求
  2. 我当轮提供的参考图或指定模板
  3. Custom Instruction 第六章底线规则
  4. 本文件（HTML-规范.md）的协议
  5. 你根据内容自行做出的设计判断

08 归档自检清单

生成前后必须逐项检查：

Copilot 365 Custom Instruction — HTML 归档 Reference 文件