纯HTML只读成绩单需用语义化table结构（thead/tbody），禁用contenteditable和无效readonly属性，CSS控制视觉禁用；边框用border-collapse:collapse；打印时用display:table-header-group和page-break-inside:avoid确保表头重复与不分页。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
怎么用纯 HTML 实现只读成绩单表格
纯 HTML 本身不能“生成”动态成绩单，它只是静态结构容器；所谓“只读成绩单”，本质是用 <table> 正确组织数据，并通过语义化标签和属性防止误编辑。关键不是功能有多强，而是别让浏览器或辅助工具误判成可编辑内容。
<ul><li>必须用 <code><table> + <code><thead> + <code><tbody> 结构，避免用 <code><div> 模拟表格（屏幕阅读器会读错）
<li>所有单元格用 <code><th>（表头）或 <code><td>（数据），禁用 <code>contenteditable="true" 或 tabindex 乱加
pointer-events: none 或 user-select: none，但不要动 readonly 属性（<input> 才有，<td> 不认）
<h3>为什么 <code>readonly 加在 <td> 上完全没用
<p><code>readonly 是表单控件专属布尔属性，只对 <input>、<textarea></textarea>、<select></select> 有效；<td> 是普通流式元素，加了也白加，浏览器直接忽略——这是最常被复制粘贴教程坑到的地方。
<ul>
<li>错误写法：<code><td readonly>89</td> → 控制台无报错，但毫无作用<input>，用户就改不了内容<input value="89"> 的成绩单，那得删掉所有 <input>，换成纯文本 <td>89</td>
成绩单表格该用 border-collapse 还是 border-spacing
默认表格边框是分离的（border-collapse: separate），会产生双线间隙，看着松散不专业；成绩单这种正式文档，必须用 border-collapse: collapse 让边框合并，才干净利落。
- 加在
<table> 的 style 里就行：<code>style="border-collapse: collapse;" - 别依赖全局重置，因为有些 CMS 或邮件客户端会覆写
table默认样式 - 如果用了
border-collapse: collapse却还看到白缝，大概率是某列<td> 内有 <code>padding或换行符空格，用开发者工具检查盒模型导出为 PDF 时表格错位或截断怎么办
HTML 表格转 PDF（比如用浏览器“打印为 PDF”）容易崩，核心原因是分页逻辑不识别
<thead> 的重复需求，导致第二页没表头，或整行被硬切开。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul><li>强制表头每页显示：给 <code><thead> 加 <code>style="display: table-header-group;" - 禁止行内断开：给
<tr> 加 <code>style="page-break-inside: avoid;"（Chrome/Edge 支持，Firefox 部分支持） - 最稳方案：把成绩单控制在一页内，用
@media print { table { font-size: 12px; } }缩小字号，比硬扛分页更可靠
表格结构越干净，后续无论是打印、截图还是转 PDF，出问题的概率就越低。别在 HTML 里塞 JS 或 class 名搞“动态渲染”，只读场景下，多一行代码就是多一个故障点。
