href属性值应写目标html文件的相对路径（如about.html）或绝对路径（如/pages/about.html），需包含扩展名、注意大小写，并避免file://协议；锚点用#id，跨域链接支持mailto:、tel:等协议。
href 属性值写什么才能跳转到另一个 HTML 文件
直接写文件名或相对路径，浏览器就能加载对应页面。比如当前页面在 index.html，同目录下有 about.html，href 就填 about.html；如果它在 pages/ 子目录里，就写 pages/about.html。
常见错误是漏掉扩展名（如写成 about），或路径层级搞反（比如误用 ../pages/about.html 却没确认上级目录结构）。Windows 下大小写不敏感，但部署到 Linux 服务器后，About.html 和 about.html 就是两个文件。
- 路径以
/开头表示从网站根目录开始（绝对路径），例如/products/list.html - 不以
/开头且不以./或../开头，浏览器默认按相对路径解析 - 想跳转到同一站点其他目录，优先用相对路径，避免硬编码域名或根路径
href="#top" 和 href="#" 的区别
href="#top" 是锚点跳转，前提是目标页面里有 <div id="top"></div> 或类似带匹配 id 的元素；而 href="#" 默认滚动到页面顶部，但会触发一次空哈希变更，可能干扰前端路由（比如 Vue Router 或 React Router 在 hash 模式下）。
更稳妥的做法是：需要回到顶部时用 href="#top" 并确保 id="top" 存在；纯 JS 控制滚动时，直接调用 scrollTo(0, 0)，别依赖 #。
-
href="#nonexistent"不报错，只是不滚动——因为找不到对应id - 多个元素用了同一个
id，href只会跳到第一个 - 现代页面中，用
id做锚点仍有效，但语义化推荐配合aria-label提升可访问性
跨协议、跨域链接的限制和表现
a 标签本身不限制协议或域名，href="https://example.com" 或 href="mailto:someone@example.com" 都能正常打开外部应用或新页面。但注意：file:// 协议在 Chrome 等现代浏览器中默认被禁用，本地双击打开 HTML 后点击 href="file:///other.html" 会失败，提示“Not allowed to load local resource”。
- 开发阶段测试多页跳转，务必起一个本地服务（如
python3 -m http.server），别直接用file:// -
href="tel:+8613800138000"在手机浏览器中可唤起拨号界面，桌面端通常无反应 - 含空格或中文的路径必须编码，比如
href="page%201.html"，不能写href="page 1.html"
target="_blank" 必须配 rel="noopener"
加 target="_blank" 会新开标签页，但如果不加 rel="noopener"，新页面可通过 window.opener 访问原页面的 window 对象，存在安全风险（比如被恶意页面调用 window.opener.location = "https://phishing.site" 劫持原页）。
正确写法只有这一种：@#@#@#@#@#@#@#@#@#@0。曾经有人用 rel="noreferrer"，它会额外屏蔽 Referer，但多数场景只需 noopener。
- Vue / React 中动态生成链接时，别只拼
target忘了rel - 使用
rel="noopener noreferrer"也没问题，但noreferrer会影响分析来源的统计逻辑 - Firefox 62+、Chrome 88+ 已默认给
target="_blank"加noopener，但不能依赖这个行为——老版本或其它浏览器仍需显式声明
file:// 协议限制。本地调试时一切正常，一上传就 404，八成是路径写成了绝对路径却没配对 Web 服务器的根目录，或者忘了起服务直接双击运行。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
