HTML点击跳转按钮未指向Inscription.html而是跳转至当前文件如何解决

问题根源 #

• 可交互元素嵌套不符合规范：HTML 标准不允许 <a> 标签嵌套 <input> 这类可交互元素，不同浏览器对这种写法的解析逻辑不一致，会导致跳转行为失效
• type="submit" 的默认行为冲突：如果你的 <input> 处于 <form> 标签内部，点击后会优先触发表单提交逻辑，默认提交到当前页面，直接覆盖 <a> 标签的跳转行为
• 路径大小写不匹配：你代码里写的路径是 inscription.html，目标文件实际名为 Inscription.html，Linux 系统和线上服务端都区分文件路径大小写，也可能导致跳转失败

解决方法 #

方案1：修改input类型，移除默认提交行为 #

把input的type从submit改为button，消除表单提交的默认行为：

<a href="../html/Inscription.html">
  <input type="button" class="button-2" value="Inscription">
</a>

注意调整路径的大小写和实际文件名保持一致。

方案2：阻止submit的默认提交事件 #

如果你必须保留submit类型，可以给input添加点击事件阻止默认行为，直接通过JS触发跳转：

<input type="submit" class="button-2" value="Inscription" onclick="event.preventDefault(); location.href='../html/Inscription.html'">

这种写法可以不用嵌套<a>标签，也能实现跳转效果。

方案3（更推荐）：语义化实现按钮跳转 #

直接给<a>标签设置和按钮一致的样式，完全不需要嵌套input，符合HTML规范，兼容性最好：

<a href="../html/Inscription.html" class="button-2">Inscription</a>

只需要把原.button-2的样式适配到a标签即可，没有多余的交互冲突。

内容的提问来源于stack exchange，提问作者saad akil