HTML5的标签打印时默认无高亮，因浏览器UA样式将其background-color设为transparent；需在@media print中显式设置background-color、color及padding方可可见。
HTML5 用 <mark></mark> 标注重点，打印时默认不显示
浏览器对 <mark></mark> 元素的打印样式普遍采用「无背景、无高亮」处理，即打印预览里几乎看不到黄色底色——这不是 bug，是多数 UA stylesheet 的默认行为。Chrome、Firefox、Edge 均将 mark 的 background-color 重置为 transparent，color 保持继承值，导致视觉上“消失”。
- 直接打印 HTML 页面时，
<mark>关键词</mark>看起来和普通文字完全一样 - PDF 导出（如 Chrome “另存为 PDF”）同样遵循该规则
- 若需保留语义+视觉效果，必须显式覆盖打印样式
让 <mark></mark> 在打印中可见的 CSS 写法
关键是在 @media print 中强制定义背景与文字对比度，避免被 UA 样式覆盖。注意：不能只设 background-color，还需确保 color 可读（比如深色背景配浅色字）。
/* 推荐写法：兼顾可读性与打印兼容性 */
@media print {
mark {
background-color: #ff0;
color: #000;
padding: 0 2px;
}
}- 用
padding避免文字紧贴边缘，提升印刷可读性 - 避免使用半透明色（如
rgba(255,255,0,0.3)），部分打印机驱动会忽略 alpha - 不要依赖
box-shadow或border，它们在多数打印模式下被禁用 - 若页面已用 CSS 重置库（如 normalize.css），检查其是否对
mark做了 print 重置
替代方案：用 <span></span> + 类名更可控
当项目需要精细控制不同场景下的高亮表现（比如屏幕蓝标、打印黑框），直接用语义化标签反而受限。此时改用带类名的 <span></span> 更灵活：
<span class="print-highlight">重点内容</span>
- 类名可自由命名，不受
<mark></mark>语义约束（比如用于强调非“引用相关”的重点） - 可在
@media screen和@media print中分别定义样式，互不干扰 - 便于配合 JS 动态添加/移除，也方便后续做无障碍标注（如加
aria-label） - 注意：放弃
<mark></mark>意味着丢失原生语义，若需 SEO 或屏幕阅读器明确识别“高亮文本”，仍建议保留<mark></mark>并覆盖样式
测试打印效果必须真机验证，不能只看浏览器预览
Chrome 的“打印预览”界面虽快，但渲染逻辑和真实打印机驱动有差异：某些 PCL 或 PostScript 打印机可能进一步简化背景填充，甚至跳过小尺寸 padding。最稳妥方式是导出为 PDF 后用 Acrobat 打开再检查，或直接打样到物理设备。
立即学习“前端免费学习笔记（深入）”；
- Windows 上用“Microsoft Print to PDF”比 Chrome 自带 PDF 导出更接近真实打印行为
- Mac 用户注意：Safari 的打印预览对
mark支持更弱，常完全忽略背景色，务必换 Chrome/Firefox 测试 - 如果页面含大量
mark，建议限制单页数量——部分打印机驱动在密集背景色区域会出现渲染延迟或色块断裂
实际项目里最容易被忽略的是 @media print 中未重置 color，导致黄色背景配默认灰色字，在黑白打印机上彻底不可见。
