应使用语义化的 标签表达简历中的键值对信息，如“公司名称：xx科技”，而非 ；配合 （加 role="heading"）和 结构，用 display: flex 对齐双栏内容， 标记时间，并在 @media print 中显式设置 list-style-type 以确保多端兼容。
用 HTML 写简历，列表清单不是靠 <ul></ul> 或 <ol></ol> 堆砌出来的，而是靠语义结构 + CSS 控制缩进与对齐——否则打印出来或屏幕阅读器识别时会乱。
用 <dl></dl> 而不是 <ul></ul> 表达“项目名：描述”类清单
简历里大量出现的是「公司名称：XX科技」「职位：前端开发」「时间：2022.03–2024.08」这种键值对，<dl></dl>（description list）才是语义正确的选择。用 <ul></ul> 套 <li> 再塞冒号，是视觉模拟，不是结构表达。
实操建议：
-
<dt></dt>放标题类内容（如「教育背景」「技能」），加role="heading"和aria-level="2"提升可访问性 -
<dd></dd>放具体内容，每个<dd></dd>可嵌套<p></p>或<ul></ul>（比如技能项下的子项） - 避免把整段经历写进一个
<dd></dd>；按逻辑拆成多个<dd></dd>，方便后期用 CSS 单独控制间距或悬停效果
用 display: flex 对齐「时间+公司」这类双栏信息
常见错误是用两个 <div> + <code>float 或 inline-block，结果在窄屏或打印时错位、换行混乱。现代做法是包裹一层 <div class="job-header">，内部用 <code>display: flex + justify-content: space-between。
注意点：
- 给
.job-header加flex-wrap: wrap，防止超长公司名撑破容器 - 时间字段用
<time datetime="2022-03">2022.03</time>，既利于 SEO，也方便后续用 JS 批量计算工龄 - 不要用
text-align: right对齐时间——它依赖父容器宽度，而简历常需响应式适配 A4 宽度（96dpi 下约 595px）
打印时 <ul></ul> 项目符号消失？加 list-style-type 和 @media print
浏览器默认在打印模式下禁用部分样式，包括 list-style。如果你用 <ul></ul> 写「技术栈」清单，PDF 里可能只剩光秃秃的文字。
解决方法：
- 显式声明
ul { list-style-type: "• "; }（注意末尾空格，避免和文字粘连） - 在
@media print里重置ul, ol的margin和padding，避免因默认值差异导致换页错乱 - 避免用自定义 SVG 或伪元素
::before生成项目符号——它们在多数打印引擎中不渲染
真正难的不是写出列表，而是让每一条 <dt></dt> 和 <dd></dd> 在不同输出目标（Chrome PDF、Edge 打印、JAWS 屏幕阅读器）下都保持可读、可定位、不折行错位。细节全在标签选择和 media query 的组合里，而不是 class 名起得多漂亮。
