应使用标记招聘职位，因其语义准确；放职位名，用data-*属性标注薪资、地点等结构化数据；用实现折叠，data-job-id替代id避免冲突。
用 <dl></dl> 而不是 <div> 套列表<p>招聘职位本质是「名称-描述」成对出现的结构，<code><dl></dl>（definition list）语义最贴切，比用一堆 <div> 或 <code><ul></ul> 更利于屏幕阅读器识别、seo 和后续样式控制。
常见错误是把每个职位写成独立 <div class="job">，结果丢失岗位名与职责之间的逻辑关联，后期加无障碍支持或批量提取职位标题时就得额外加 <code>aria-label 或 js 解析。
-
<dt></dt>放职位名称（如<dt>前端开发工程师</dt>），它天然可被document.querySelector('dt')批量抓取 -
<dd></dd>放公司、地点、要求、薪资等字段，可用data-*属性标记类型，例如<dd data-type="location">上海</dd> - 避免嵌套
<h3></h3>到<dt></dt>里——<dt></dt>本身已有标题语义，加<h3></h3>会破坏层级
薪资和地点字段必须用 data- 属性标注类型
纯文本“15K–25K·14薪”或“北京/远程”对人友好，但对机器不友好。HR 系统或爬虫要自动归类，靠正则匹配容易出错（比如把“15K”误判为经验要求）。
用 data-salary、data-location 等属性，能直接用 CSS 选择器或 JS 提取：
立即学习“前端免费学习笔记（深入）”；
<dd data-salary="15000-25000" data-pay-cycle="14">15K–25K·14薪</dd> <dd data-location="beijing,remote">北京/远程</dd>- 值用英文逗号分隔多选项（如
data-location="shanghai,remote"），比用斜杠更易解析 - 数值类字段（薪资、经验）统一存为数字区间或最小值，避免单位混在字段值里（别用
data-salary="15K-25K"） - 不要用
class="salary"替代data-属性——class 是给样式的，不是给数据的
移动端折叠职位详情要靠 <details></details> + CSS，别用 JS 控制显隐
职位列表一长，全展开会撑满屏幕。用原生 <details></details> 标签实现点击展开，不依赖 JS，加载快、兼容性好（chrome 12+、firefox 49+、safari 12.1+ 都支持），而且自带键盘焦点和 Enter 触发逻辑。
- 把
<dd></dd>包进<details></details>，用<summary></summary>做摘要行（如“查看岗位职责与要求”） - 别给
<summary></summary>加role="button"——它本来就是可聚焦、可交互的元素 - 如果需要默认展开某个职位（如置顶推荐岗），加
open属性：<details open></details> - 旧版 IE 不支持？那就退化为全展开，不影响内容可读性——这不是功能缺陷，是优雅降级
避免用 id 绑定职位卡片，改用 data-job-id
很多人给每个职位加 id="job-123"，想着方便 JS 操作。但 ID 在页面中必须唯一，一旦动态插入新职位或服务端渲染重复 ID，就违反 html 规范，JS 的 document.getElementById() 行为不可靠，Vue/React 也可能报 key 警告。
- 统一用
data-job-id="123"，既保持语义清晰，又允许重复、可批量查询：document.querySelectorAll('[data-job-id]') - 如果要用锚点跳转（如分享链接到某个职位），用
<a href="#job-123"></a>+ 对应<div data-job-id="123" id="job-123"> 是可以的，但 <code>id仅用于锚点，不参与业务逻辑 - 服务端渲染时，确保
data-job-id来自真实数据库 ID，别用循环索引（如i），否则缓存或分页后会错乱
实际做时最容易漏掉的是 data- 字段的标准化约定——团队没对齐字段名和格式，后端吐一个 data-salary-range，前端查 data-salary，接口联调卡半天。这个细节不在视觉上，但决定后续所有自动化处理能不能跑通。