HTML中“已授权服务商列表”应使用语义化<dl>标签，<dt>放名称（加class="provider-name"），<dd>放授权信息（含<time>标记时间）；需添加JSON-LD结构化数据，类型为ItemList，每项为ListItem，含itemListElement.url和description；禁用data-属性前端筛选，时间字段必须用<time datetime>，移动端展开用max-height过渡并配合aria-expanded按钮实现无障碍导航。
HTML里怎么写“已授权服务商列表”这种静态清单
直接用语义化 <dl> 标签最合适，不是表格也不是无序列表——因为每个服务商有明确的“名称 + 授权信息”配对关系，<dl> 天然表达定义型结构，屏幕阅读器友好，也方便后续加 CSS 样式区分。
常见错误是硬套 <table>（没交互/排序需求时过度复杂）或全用 <p> 堆砌（丧失结构、无法批量控制样式）。
-
<dt>放服务商名称，加class="provider-name"便于单独设字体/颜色 -
<dd>放授权编号、有效期、服务范围等，可嵌套<time datetime="2025-03-01">标记时间 - 避免在
<dd>里塞大段 HTML 表格或按钮——这是静态公示，不是管理后台
第三方共享清单要不要加 JSON-LD 结构化数据
要，尤其当这个页面会被搜索引擎收录或接入政务/行业聚合平台。不加的话，爬虫大概率只当普通文本，无法识别“这是某机构授权的第三方服务商清单”。
关键点在于：别用 Organization 类型去套服务商，得用 ItemList + 每项 ListItem，把授权状态作为 description 或自定义字段。
立即学习“前端免费学习笔记（深入）”；
- 必须填
itemListElement.url，指向该服务商官网（哪怕只是备案页），否则 Google 富媒体测试工具会报错 - 授权编号建议放
itemListElement.description，别塞进name——后者应严格对应服务商注册全称 - 如果清单含地域限制（如“仅限广东省”），用
eligibleRegion字段，别靠文字描述
为什么不能用 data- 属性存授权状态做前端筛选
因为这类清单本质是法律公示内容，状态变更必须走后端发布流程，前端 JS 筛选容易造成“用户看到过期数据还信以为真”的风险。
真实场景中，运营人员更新清单时，常忘记同步改 data-status="expired" 这类属性，而 HTML 文件本身没变，CDN 缓存一压，问题就藏住了。
- 如果真需要按状态筛选，用服务端模板渲染不同
<section>区块，比如<section id="active-list">和<section id="expired-list"> - 禁止在
<script>里写死授权数组然后生成 DOM——审计时会被认定为“未与权威源实时同步” - 所有时间字段（如有效期）必须用
<time>标签包裹并带datetime属性，方便自动化校验脚本读取
移动端展开/收起大量服务商时的性能陷阱
别用 display: none/block 切换整块 <dl>，尤其是超 50 家时，iOS Safari 重排会卡顿。用 max-height + overflow: hidden 过渡更稳，但要注意初始值不能设 0 —— 否则高度计算失效。
- 展开动画用
max-height: 0 → max-height: 500px，500px 是预估最大高度，别用fit-content（不支持过渡） - 每个
<dt>后加<button type="button" aria-expanded="false">，用aria-controls关联对应<dd> - 禁用
will-change: transform在折叠容器上——它会让 iOS 触发不必要的 GPU 合成，反而更慢
最易被忽略的是：授权清单一旦上了政务类网站，往往要求支持无障碍键盘导航（Tab 键跳转到每家服务商），<dl> 本身不支持 tab-index，得靠 <dt> 包裹 <button> 来实现，这点连很多前端框架组件都漏掉。
