电商规格表必须用<table>，因<dl>缺乏行列语义导致屏幕阅读器无法建立名称-值对应、SEO解析困难，而<table>天然支持无障碍导航与结构化数据提取。
电商规格表必须用 <table>，别用 <dl> 或 div 布局
语义上 <dl> 看似贴切（<dt> 是参数名，<dd> 是值），但实际会导致屏幕阅读器无法建立“名称-值”对应关系，SEO 也抓不准结构。搜索引擎和辅助技术依赖表格的行列关系来解析参数逻辑，而 <dl> 是扁平列表，缺乏二维语义。更关键的是，所有主流电商落地页（京东、天猫、拼多多商品详情页源码）都用 <table>，不是巧合——它天然支持按行隔离、按列对齐、无障碍导航。
每个参数占一行，<th scope="row"> + <td> 是唯一合规写法
常见错误是把“颜色”“尺寸”“重量”全塞进一个 <tr>，左边 <th> 右边 <td>，结果多值参数一加就乱套。正确做法是：每个参数独占 <tr>，名称用 <th scope="row">，值统一用 <td>。
-
scope="row"必须写，否则 VoiceOver、NVDA 等读屏软件不知道这个<th>对应哪一列的值 - 不要用
colspan或rowspan合并单元格——它破坏行列映射，让 JS 拿不到“重量”对应的值单元格 -
<caption>、<thead>、<tfoot>全部禁用：电商参数表不是报表，不需要标题汇总或分组摘要，加了反而干扰解析
多值参数（如颜色/尺寸）必须用 <data value="xxx"> 分隔
直接写 <td>红色, 蓝色, 黑色</td> 看着省事，但复制会粘成“红色, 蓝色, 黑色”，翻译工具当整句处理，JS 也得靠字符串拆分——脆弱且不可靠。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每个选项单独包一层
<data value="red">红色</data>，value存标准编码（英文或 SKU），方便后续过滤、筛选、埋点 - 多个
<data>并列，中间用 • 连接：<td><data value="red">红色</data> • <data value="blue">蓝色</data></td> - 禁用
<br>、<p>、<div>嵌套在<td>里——它们打断表格流，CSS 对齐失效，打印样式错位
移动端折叠用 aria-hidden="true" + inert，别抽离 DOM
用 <details><summary> 或 JS 动态插入 <div> 包裹参数组，看似灵活，实则切断表格语义：爬虫看不到折叠内容，打印时空白，屏幕阅读器跳过整个区块。
立即学习“前端免费学习笔记（深入）”；
- 用
<tbody class="spec-group">包一组参数（如“包装清单”），初始设aria-hidden="true"和inert - 展开时只移除这两个属性，不移动 DOM 位置——保证
<table>结构完整 - 同步控制
aria-expanded和aria-controls，否则 VoiceOver 用户点击无反馈
真正难的不是写对标签，而是克制——忍住不用 colspan、忍住不塞 <div>、忍住不抽 DOM。表格的语义力量，全在它“不动”的结构里。
