html模板本身不处理跳转逻辑，所有跳转均由浏览器解析标签或javascript触发；href属性是唯一决定跳转目标的事实来源，其他如data-url、onclick字符串等均不参与导航。
HTML模板本身不处理跳转逻辑，所有跳转行为都由浏览器原生解析 <a></a> 标签或 JavaScript 主动触发；所谓“模板处理”，其实是控制 href 值生成方式 + 防止被框架/构建工具意外覆盖。
href 属性是跳转的唯一事实来源
无论你用的是静态 HTML、Vue 模板还是 Hugo 页面，最终浏览器执行跳转时，只看渲染后 DOM 中 <a></a> 元素的 href 属性值。其他任何地方（比如 data-url、onclick 里写的字符串、CSS 类名）都不参与实际导航。
- 改了 JS 里的字符串但没更新
href？跳转目标不会变 - 用了 Vue Router 的
<router-link></router-link>却没配路由表？页面会 404 或白屏 - 本地双击打开 HTML 文件时，
href="/about.html"会尝试访问系统根目录，不是网站根目录——必须用本地服务器（如python3 -m http.server）验证
静态模板中 href 路径怎么写才不翻车
相对路径（href="about.html"）在文件挪动后极易失效；绝对路径（href="/about.html"）在子路径部署时又会跳错。折中且可控的做法是：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 开发阶段统一用根目录绝对路径：
href="/about.html"，配合本地服务器运行 - 上线前若部署在子路径（如
https://example.com/myapp/），加<base href="/myapp/">到，之后所有相对路径都自动补前缀 - 避免在 href 里拼接变量（如
href="{{base}}/about.html"），除非你确认模板引擎真能正确渲染——很多轻量模板根本不支持这种语法 - 检查是否混入全角空格或不可见字符：
href=" /about.html "和href="/about.html"是两回事
为什么加了 onclick 还是跳错了
很多人想在跳转前做校验或埋点，于是写 onclick="track(); window.location.href='/next.html';"，结果发现有时跳转失败、有时重复跳转。根本原因是事件执行时机和默认行为没协调好。
- 别在
onclick里直接赋值window.location.href后不管——它会立即触发，但可能被浏览器拦截（尤其在异步操作后） - 更稳的做法是：用
event.preventDefault()显式阻止默认跳转，做完逻辑后再手动跳：onclick="event.preventDefault(); if (check()) window.location.href='/next.html';" - 如果用了
target="_blank"，务必同步加rel="noopener noreferrer"，否则新页能通过window.opener控制原页，有安全风险 - 注意：
return false在内联 handler 中等价于preventDefault + stopPropagation，但语义模糊，建议拆开写清楚
前端框架模板里跳转失效的典型原因
Vue / React 模板里改了 href 却没反应，大概率是因为框架路由接管了点击行为。这时候 <a href="/about"></a> 只是个占位符，真正跳转靠的是 router.push() 或 history.pushState()。
- Vue 中应优先用
<router-link to="/about"></router-link>，而不是手写<a href="/about"></a>—— 后者会被 router 忽略，除非你禁用scrollBehavior并配置linkActiveClass - React Router v6+ 废弃了
<link>的to字符串简写，必须用对象形式带pathname才能兼容搜索参数 - Hugo/Jekyll 等静态站点生成器中，
href常由{{ "about.md" | relURL }}这类函数生成，改 HTML 文件里的链接没用，得去改模板或config.yaml里的baseURL
最常被忽略的一点：跳转是否成功，和你写的代码无关，只和最终渲染出的 <a href="xxx"></a> 是否存在、是否可点击、路径是否真实可达有关。调试时别只看源码，一定要打开开发者工具，检查 Elements 面板里那个 <a></a> 标签的 href 是什么、有没有被 JS 动态清空、是不是被 CSS pointer-events: none 锁死了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
