HTML无内置标尺，需用CSS渐变、伪元素或Canvas实现；CSS适合静态刻度，伪元素支持动态标签，Canvas适用于高精度交互场景，仅语义分隔不可作标尺。
HTML 本身没有内置标尺或参考线机制，所有“标尺效果”都得靠 CSS 或 Canvas 手动实现；浏览器原生的 <hr> 标签只是语义化分隔线，不是视觉标尺。
用 CSS linear-gradient 快速画静态等距刻度
适合固定宽度、不需交互、只作视觉参考的场景（比如页面顶部时间轴底纹、表单进度提示）。核心是把背景当“尺子纸”，用渐变重复绘制短线。
- 短刻度用
background-size: 10px 100%控制间距，linear-gradient(to right, #000 1px, transparent 1px)画 1px 高短线 - 长刻度（如每 50px 一条）需叠加第二层渐变：
background-image: linear-gradient(...), linear-gradient(...)，注意后写的在上层 -
box-sizing: border-box必须设，否则 padding/margin 会错位；height要显式设（如20px），不然刻度可能塌缩 - IE 不支持多背景渐变，若需兼容旧版，直接换 SVG 或放弃该方案
div.ruler {
height: 20px;
background-image: linear-gradient(to right, #000 2px, transparent 2px),
linear-gradient(to right, #000 4px, transparent 4px);
background-size: 50px 100%, 10px 100%;
background-position: 0 0, 0 0;
}
用伪元素 ::before/::after 实现带数字标签的动态标尺
当你需要显示具体数值（如 0、25、50、75、100）、响应式缩放、或后续绑定 JS 拖动逻辑时，伪元素比渐变更可控。
- 每个刻度用一个
<span class="tick"></span>或伪元素生成，配合position: absolute定位到父容器左/右偏移位置 - 数字标签建议用
data-value属性存值，JS 读取方便，避免文本硬编码 - 注意父容器必须设
position: relative，否则绝对定位会脱出文档流 - 移动端要加
user-select: none，防止长按触发文字选中干扰拖动
用 <canvas></canvas> 绘制高精度可交互标尺
需要像素级控制、缩放不变形、带拖拽反馈、或与图表坐标系对齐时，Canvas 是唯一靠谱选择。
立即学习“前端免费学习笔记（深入）”；
- 刻度线、数字、主轴线全由
context.moveTo()/context.fillText()手绘，无渲染偏差 - 关键参数如
AXIS_MARGIN、TICK_WIDTH建议抽成配置项，避免魔数 - 监听
mousemove+getBoundingClientRect()可实现“鼠标悬停显示当前刻度值” - Canvas 内容不会被 CSS transform 缩放拉伸，但需手动处理
window.devicePixelRatio高清屏适配
别踩这些坑：参考线 ≠ 标尺，也别混淆语义
很多人搜“HTML 标尺参考线”，其实心里想的是设计工具（如 Figma、Publisher）里的辅助线功能——但 HTML 页面里没有“全局参考线”概念。所谓“参考线”，只能是开发者自己画的一条 <div> 或 Canvas 线，它不会自动吸附元素，也不影响布局流。
<ul>
<li>
<code><hr> 是语义化水平分隔符，不是标尺，别用它模拟刻度
position: fixed 模拟“全局参考线”？小心滚动时脱离视口或遮挡内容grid-lines 只在开发工具里可见，无法导出为用户可见的参考线
