应使用<details><summary>实现字段说明折叠展示，并通过data-plain-text等属性区分导出内容与HTML结构，导出时需手动构造含说明行的数据，且字段描述应统一维护于JS对象中以保证一致性。
导出数据时怎么让 HTML 自带字段说明
HTML 本身不提供“字段清单”或“折叠说明”的语义能力，所谓“标注导出数据包含内容”，实际是靠结构化标记 + 前端交互实现的。关键不是用什么标签，而是怎么组织 <table>、<details> 和 data-* 属性来让导出逻辑（比如 JS 导出为 CSV/Excel）能准确识别字段含义。
<details> 和 <summary> 实现折叠字段说明
这是目前最轻量、原生支持、无需 JS 就能折叠的方案，适合在导出前的预览页展示字段解释：
<details> <summary>点击展开：字段清单说明</summary> <p><strong>user_id</strong>：用户唯一编号（数字，主键）</p> <p><strong>content_HTML</strong>：富文本内容，含 <code><p></code>、<code><strong></code> 等标签，导出时需保留或转义</p> <p><strong>created_at</strong>：ISO 8601 格式时间（如 <code>"2024-05-20T09:30:00Z"</code>）</p> </details>
-
<details>默认收起，点击<summary>展开，兼容 Chrome/Firefox/Safari（Edge 79+），但不支持 IE - 不要把
<details>套在导出按钮里——它只用于展示，不影响导出内容本身 - 如果导出后要保留字段说明（比如生成带注释的 Excel 表头），得靠 JS 提前读取
<summary>文本或data-desc属性拼进导出数据
给 content_HTML 字段加语义标注避免导出错乱
导出时若直接取 innerHTML，容易把 <script>、<style> 或未闭合标签带进去，导致 CSV 格式崩溃或 Excel 解析失败。必须明确区分“可导出的 HTML 片段”和“纯文本备用值”：
- 在对应单元格元素上加
data-html-field="content_HTML"和data-plain-text属性：<td data-html-field="content_HTML" data-plain-text="欢迎使用系统"><p>欢迎使用系统</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a> <p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><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></td> - 导出脚本优先读
data-plain-text（安全），fallback 到textContent，仅当明确需要 HTML 结构时才取innerHTML并做白名单过滤（只留<p>、<strong>、<em>） - 别用
title或aria-label存字段说明——它们是给无障碍用的，爬取不稳定
导出 CSV/Excel 时怎么把字段清单一起写进去
多数前端导出库（如 SheetJS、papaparse）不自动处理字段说明。想让第一行是说明、第二行是字段名、第三行起是数据，得手动构造：
- 用
SheetJS时，把说明行作为独立sheet的首行：const headerDesc = ["用户ID说明", "HTML内容说明", "创建时间说明"]; const headers = ["user_id", "content_HTML", "created_at"]; const dataRows = [[1001, "<p>示例</p>", "2024-05-20"]]; <p>const ws = XLSX.utils.aoa_to_sheet([headerDesc, headers, ...dataRows]);
- CSV 导出更简单：直接拼字符串，但注意
content_HTML字段含逗号或换行时必须用双引号包裹，并对双引号转义（"→""） - 字段清单折叠说明 ≠ 导出文件里的注释——后者需要额外 sheet 或 README.txt，HTML 页面上的
<details>不会自动进 Excel
真正容易被忽略的是：字段说明文字一旦写死在 HTML 里，后续改字段逻辑却忘了同步更新 <details>，会导致导出文档和页面说明对不上。建议把字段描述统一存在 JS 对象里，再由模板或脚本注入到 <details> 和导出数据中。
