最可控的HTML连线方式是使用，因其原生支持坐标系和矢量线段，通过标签指定x1、y1、x2、y2即可画直线，并可配合viewBox实现自适应，动态场景需JS实时更新坐标。
用
HTML 本身没有“连线”语义标签，直接用 关键点： 如果两个元素位置固定、无需精确角度控制，CSS 更轻量。但要注意：这不是真“连线”，而是视觉模拟。 常见做法： 立即学习“前端免费学习笔记（深入）”； 当被连接的 DOM 元素会移动、缩放或 DOM 结构变化时，仅靠初始计算一次坐标是不够的。 必须监听并响应： 如果要画上百条线、且每条线都随数据实时变化（比如拓扑图、流程图）， 典型用法： 真正难的不是画线，而是让线“活”在真实 DOM 生命周期里——位置、缩放、销毁、重连，每个环节漏掉一个，线就断了。 拼位置容易错位、响应式失效。真正靠谱的方式是嵌入 ，它原生支持坐标系和矢量线段。
x1、y1、x2、y2 四个属性就能画直线viewBox 实现缩放自适应getBoundingClientRect() 并更新 用 CSS
border 或 transform 连接固定位置元素
border-left 或 border-bottom，模拟垂直/水平连接线::after + transform: rotate() 画斜线，但旋转中心默认是元素左上角，需配合 transform-origin 调整width: 2px; height: 80px;），再用 top/left 手动对齐——仅适合静态布局
JavaScript 动态连线时别漏掉重绘逻辑
window.addEventListener('resize', updateLine)
ResizeObserver 监听目标元素（比轮询高效）scroll 事件，并注意 getBoundingClientRect() 返回的是视口坐标，需转换resize 和 scroll 做节流（如 setTimeout 防抖）Canvas 连线适合大量动态线段但不可选中
性能优于 SVG。但它生成的是位图，线条无法单独绑定事件、不能被 CSS 样式化、也不能被屏幕阅读器识别。
ctx.beginPath() → ctx.moveTo(x1, y1) → ctx.lineTo(x2, y2) → ctx.stroke()
ctx.clearRect() 清空画布，否则旧线残留click 事件）
