OpenCTI平台HTML标题渲染问题分析与解决方案

问题背景

在OpenCTI平台的报告编写功能中，用户发现HTML标题层级存在显著的渲染异常。具体表现为：

1. 视觉层级错乱：Heading 3（预期应比Heading 2更小）与Heading 1显示为相同大小
2. HTML标签映射错误：Heading 1对应h2标签，Heading 2对应h3标签，形成非标准层级结构

技术分析

预期标准行为

标准的HTML标题层级应符合W3C规范：

• h1作为最高级标题（通常24px）
• h2次级标题（通常18px）
• h3三级标题（通常16px）
• 依次递减...

当前实现缺陷

1. CSS样式缺陷：样式表中可能缺少对h4标签的明确定义，导致其继承了h2的样式
2. 标签映射逻辑错误：编辑器将用户选择的"Heading 1"错误映射为h2而非h1，破坏了语义化结构
3. 样式优先级问题：可能存在CSS特异性（specificity）冲突导致样式覆盖异常

影响范围

该缺陷会导致：

• 报告文档结构混乱
• 可访问性降低（屏幕阅读器等辅助工具依赖标题层级）
• 导出内容时格式异常
• 用户认知负担增加

解决方案建议

前端修复方案

1. 修正标签映射：

// 修正前的错误映射
headingMap = { 'Heading 1': 'h2', 'Heading 2': 'h3' }

// 修正后的正确映射
headingMap = { 'Heading 1': 'h1', 'Heading 2': 'h2' }

2. 完善CSS样式：

/* 确保层级式样式 */
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }

3. 添加视觉测试： 建议引入Storybook等工具建立视觉回归测试，防止类似问题复发

后端兼容考虑

由于可能已有大量历史数据使用错误映射，需要：

1. 数据库迁移脚本处理已有报告
2. 版本升级时的兼容性声明
3. 提供自动修复工具

最佳实践建议

1. 遵循HTML5大纲算法规范
2. 实现WCAG 2.1 AA级可访问性标准
3. 建立样式表lint检查机制
4. 在富文本编辑器中添加实时结构预览功能

总结

HTML标题层级的正确实现不仅是视觉呈现问题，更关系到文档的结构化语义。OpenCTI作为安全情报平台，报告的专业性和可读性至关重要。建议在修复此问题时同步审查整个富文本编辑模块的语义化实现，确保生成内容符合国际标准。