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