用html+css可实现语义化、响应式、无障碍的示意性路线页：以定义顺序，表示站点，用伪元素（如::before/::after）绘制连接线和箭头，通过类名（如status-done）配合css控制状态样式，避免图片、绝对定位和svg冗余，确保文字可选、缩放清晰、适配多端。
怎么用 HTML + CSS 实现静态导航路线页
纯 HTML/CSS 能做的只是「示意性」路线页，比如展示固定起点、终点和几个途经点的线性路径图。它不调用地图 API，也不算实时路径，但足够用于文档、演示或内部系统中简化版流程指引。
关键不是“画线”，而是让路线在视觉上有方向感、可读性强、适配不同屏幕。容易踩的坑是直接用 <img> 塞一张路线图——结果缩放失真、文字不可选、无障碍支持差、改个站点就得重出图。
- 用语义化 HTML 描述路线结构：
<ol></ol>表示步骤顺序，<li>每个站点，<span class="step-label"></span>标站点名 - 用 CSS 的
::before和渐进式border-left或伪元素画连接线，避免绝对定位错位 - 移动端必须加
meta name="viewport"，否则竖屏下路线溢出或字体过小 - 别给路线容器设固定高度——内容长度不确定时，撑开更安全
如何让路线带箭头和状态标识（如“已到达”“进行中”）
靠纯 CSS 就能实现动态状态反馈，不需要 JS 控制（除非要交互切换）。核心是利用类名控制伪元素和背景色，而不是写一堆 <svg></svg> 标签。
常见错误是把箭头做成图片或字体图标，结果在高 DPI 屏幕模糊，或加载失败就空一块。推荐用 CSS 绘制三角形箭头：
li::after {
content: "";
display: inline-block;
width: 0; height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid #007bff;
margin-left: 8px;
}
- 每个
<li>加类名如status-current、status-done，再用 CSS 控制background-color和color - “已完成”站点可用
text-decoration: line-through，比打勾图标更轻量且语义清晰 - 避免用
position: absolute叠加状态徽章——响应式断点一变就偏移
为什么不用 SVG 画路线？什么情况下才该用
SVG 不是不好，而是过重：一个简单 5 站点路线，手写 SVG 路径代码可能比 HTML+CSS 多 3 倍行数，且无法用 CSS 直接控制文字颜色或 hover 效果，还得额外处理 <title></title> 和 aria-labelledby 才算可访问。
只在以下情况考虑 SVG：
- 路线含复杂曲线（如地铁环线、折返路径），CSS 难以准确表达
- 需要导出高清路线图（PDF/PNG），而 CSS 渲染截图质量不稳定
- 已有设计稿明确要求非直线连接（贝塞尔曲线、圆弧过渡）
- 团队有现成 SVG 路线生成工具，且维护成本可控
否则，老实用 <ol></ol> + flex 布局 + 伪元素连线，开发快、改得动、语义对。
怎么接入真实地理路径（比如调用高德/百度地图）
HTML 本身做不到。必须引入第三方地图 SDK，并用 JavaScript 发起路径规划请求。这时候 HTML 只是容器，真正逻辑在 JS 里。
典型流程是：input 输入起点终点 → JS 调用 AMap.Driving 或 BMap.RoutePlan → 解析返回的 steps 数组 → 动态生成 HTML 路线列表 + 地图标注。
- 注意高德/百度地图 API 需要申请 key，且有调用量限制；免费版常禁用批量路径请求
- 返回的路线数据含
distance、duration、polyline（坐标串），别直接渲染polyline字符串——要用AMap.Polyline实例化 - 如果只要文本路线（无地图），建议用它们的「路线描述」字段，比自己解析
steps更稳 - 服务端代理跨域请求比前端直连更可靠，尤其在企业内网环境
路线页最易被忽略的其实是容错：API 请求失败时，降级显示静态 HTML 路线；坐标解析异常时，跳过该段而非整个页面崩溃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
