体检报告页用纯HTML+CSS即可，应使用语义化标签（如<section><dl><table>）结构化呈现数据，避免框架冗余；需规范打印样式、异常标识及响应式适配，导出PDF优先后端生成。
体检报告页用纯 HTML + CSS 就够了，不需要框架
绝大多数体检报告页本质是「结构化数据的静态呈现」，表格、分组标题、数值+参考范围对比、状态标识（如↑、↓、异常）——这些用语义化 HTML 标签（<section>、<table>、<dl>）配合基础 CSS 就能清晰表达，强行套 React/Vue 反而增加加载延迟和维护成本。
常见错误现象：div 套 div 堆出“报告”，没用 <h2> 区分检查大类（如「血常规」「肝功能」），导致屏幕阅读器无法导航、SEO 无意义、后期加打印样式困难。
- 用
<section>包裹每个检查项目组，<h3>作组标题（如「血脂四项」） - 单个指标优先用
<dl><dt>总胆固醇</dt><dd>5.8 mmol/L <span class="abnormal">↑</span></dd></dl>，比表格更语义清晰 - 必须为异常值添加
class="abnormal"或data-status="high"，方便后续用 JS 高亮或导出筛选
表格只在多行同构数据时用，别滥用
「血常规」这种含十几项、每项都有「项目名｜结果｜单位｜参考范围｜状态」的列表，用 <table> 合理；但「一般检查」里的身高/体重/血压，3 行数据就起一个表格，反而让结构臃肿、移动端难适配。
性能影响：浏览器渲染表格需等待整行内容解析完才绘制，而 <dl> 或 <div> 是流式布局，首屏更快。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 表格必须有
<thead>和<tbody>，<th>要用scope="col"明确关联列 - 参考范围列建议拆成两单元格：
<td>3.5–5.5</td><td>mmol/L</td>，避免正则匹配单位时出错 - 移动端加
overflow-x: auto到<table>父容器，防止横向溢出
打印样式必须单独写，否则医院打印机吐出半页
用户点击「打印报告」后，常出现页眉页脚遮挡内容、分页截断表格、颜色背景被忽略导致异常值看不清——这些不是浏览器问题，是没写 @media print。
兼容性注意：Chrome 和 Edge 对 print 媒体查询支持较好，但 Safari 会忽略部分 !important 声明，需实测。
- 重置所有
margin/padding：@media print { * { margin:0; padding:0; } } - 强制显示异常标识：
.abnormal { color: #d32f2f !important; font-weight: bold; } - 隐藏非内容元素：
#header, .nav, .print-hide { display: none; } - 为表格加
page-break-inside: avoid，防止跨页断行
导出 PDF 不要用前端库硬生成
用户要的是「看起来和打印一致的 PDF」，不是「能编辑的 PDF」。用 jsPDF + html2canvas 渲染体检报告，会模糊文字、丢失表格边框、中文折行错乱，且生成耗时长（尤其带图表时）。
真正稳定的方案是后端生成（如 Python 的 weasyprint 或 Node 的 puppeteer），前端只需提供干净的、带 @media print 的 HTML 字符串。
- 前端给后端传参时，确保包含完整 DOM 结构，而非仅 JSON 数据（避免后端重复拼 HTML）
- 若必须前端导出，至少用
print()` 触发系统打印对话框，选「另存为 PDF」——这是最兼容的方式 - 禁用所有动画、过渡效果，
@media print { * { animation: none !important; } }
最容易被忽略的是「参考范围的动态渲染逻辑」：有些指标（如肌酐）参考值因性别年龄变化，前端若把范围写死在 HTML 里，下次规则调整就得发版；应该由后端返回带 range_low、range_high、unit 的字段，前端用模板安全插入。
