HTML自定义按钮超链接无法打开本地文件问题求助

你的问题核心是误用了<b>标签实现跳转——<b>仅作为文本加粗标签存在，本身不支持href属性，浏览器不会将其识别为可跳转的链接，不管是网络链接还是本地文件都无法正常生效。

正确实现方案：用<a>标签做跳转，赋予按钮样式 #

将<b>替换为原生支持跳转的<a>标签，再给<a>添加自定义按钮样式，就能实现带按钮外观的超链接，同时兼容本地文件和网络链接跳转。

修改后的完整代码：

<html>
<head>
    <style>
        /* 定义按钮样式类 */
        .btn {
            color: rgb(0, 0, 0);
            background-color: rgb(252, 239, 0);
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
        }
        /* 可选：鼠标悬停时的样式变化 */
        .btn:hover {
            background-color: rgb(230, 219, 0);
        }
        body {
            background-color: rgb(48, 45, 45);
        }
        h1 {
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Science</h1>
    <!-- 用a标签实现跳转，本地路径注意格式 -->
    <a class="btn" href="file:///D:/School Project/Physics.html">Physics</a>
</body>
</html>

本地路径的关键注意点 #

• 路径中的反斜杠\要改为正斜杠/，或者转义为\\，否则浏览器会解析错误
• 如果目标文件和当前主页在同一文件夹内，推荐使用相对路径（比如./Physics.html），比绝对路径更灵活，示例：

  <a class="btn" href="./Physics.html">Physics</a>
  

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