点歌单应使用语义化html表格，含序号、歌名、歌手、状态四列，表头用，状态列用明文如“已点”而非仅颜色，禁用checkbox和复杂css，确保打印、微信、钉钉等场景内容清晰可读。
表格结构要能区分歌名、歌手、序号和点播状态
点歌单本质是带状态标记的列表，用 <table> 最直接——不用 JS 也能手动勾选。关键不是“多漂亮”，而是字段清晰、易增删、打印或截图时信息不丢。<br>必须包含：序号（<code>id 或 no）、歌名（title）、歌手（artist）、状态（比如空单元格、✓、或“已点”文字）。
避免把所有信息塞进一个 <td>，否则后期想加筛选或导出就麻烦。
<ul><li>表头用 <code><thead> 包裹 <code><th>，比全用 <code><td> 更语义化，也方便 CSS 定位
<li>序号列建议用 <code><ol></ol> 或纯数字，别依赖 JS 自动生成——手写表格时 JS 可能没加载
✓ / 已点 / 待播，别用颜色单独标识（色盲用户看不见）怎么让“已点”状态一眼可辨又不破坏结构
纯靠视觉（比如背景色）风险大：打印出来是灰块，屏幕阅读器读不到变化，复制粘贴还可能丢样式。稳妥做法是内容+轻量样式结合。
- 在状态列写明文，如
已点、待播、跳过，再用style="color: #666;"稍微弱化未点项 - 真要用背景色，只加
background-color: #e8f5e8;（浅绿），别用红/黄——容易误判优先级 - 绝对不要用
<input type="checkbox">混在表格里——没 JS 支持时无法交互，且会破坏表格语义
移动端打开错位？用最小必要 CSS 控制宽度
手机上看表格常横向滚动或文字挤成一团，问题不在 HTML，而在没约束列宽和换行逻辑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给
<table> 加 <code>style="width: 100%; table-layout: fixed;"，强制等宽布局 - 歌名列设
style="word-break: break-word; max-width: 200px;"，避免长歌名撑爆整行 - 序号和状态列用
style="width: 50px; text-align: center;"，数值型内容固定宽度最稳 - 删掉所有
height、min-height设置——行高由内容自然撑开 - 用
<hr>或空行替代横向分隔线，兼容性更好 - 如果必须发纯文本，先手动把表格转成带竖线的文本格式，例如：
1 | 《晴天》 | 周杰伦 | 已点 - 测试方法：用微信“文件传输助手”发 HTML 文件，用 iOS 自带 Safari 打开，看是否仍可读
复制到微信/钉钉后格式乱了怎么办
微信和钉钉内置浏览器对 <table> 渲染极简，会忽略大部分 CSS，但保留结构。所以别依赖 fancy 样式，重点保内容顺序和分隔。
<ul>
<li>去掉 <code>border-collapse: collapse 和细边框——它们在聊天窗口里常显示为黑粗线
表格越简单，跨平台越稳。别想着用 CSS Grid 替代 <table>——点歌单不是响应式布局练习，是快速记录和传递信息的工具。</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
