html按钮跳转网页代码

做网页导航最基础的按钮一步，就是跳转让按钮点下去能跳到另一个页面。这件事用HTML实现起来简单到离谱——一个标签加一个属性就完事。网页但别看它简单，代码我见过不少刚入门的按钮朋友卡在这里，要么按钮点了没反应，跳转要么跳转后新页面把原来的网页页面覆盖了，回来还得重新操作。代码下面直接上代码，按钮边写边说。跳转

最核心的网页写法就是 <a> 标签包一个按钮样式。比如：

<a href="https://www.example.com"> <button>点我跳转</button> </a>

把这段扔进HTML文件里，代码浏览器打开，按钮点一下“点我跳转”，跳转页面就跑到 example.com 去了。网页注意 href 里写完整网址，别漏了 https://，否则浏览器会把它当成你本地文件夹里的一个文件去拼路径，结果就是404。我一开始就犯过这毛病，写了个 href="www.baidu.com"，点完直接报错，还纳闷半天。

那如果不想用 <button> 呢？其实给 <a> 标签加个样式，让它看起来像个按钮也行。比如：

<a href="https://www.example.com" style="display:inline-block; padding:10px 20px; background:#007bff; color:#fff; text-decoration:none; border-radius:4px;">跳转按钮</a>

这样写出来的“按钮”本质上还是链接，但视觉上跟按钮没区别。好处是少一层嵌套，代码干净。坏处是没法直接用 <button> 的一些默认行为，比如表单提交。不过做普通页面跳转完全够用。

有人会问：我想让新页面在新标签页打开，别覆盖当前页。加个 target="_blank" 就行：

<a href="https://www.example.com" target="_blank"> <button>新标签页打开</button> </a>

这个属性挺实用。比如你做了一个产品列表页，每个产品点进去看详情，用户可能想对比着看，新标签页打开就舒服很多。不过也别滥用，有些用户讨厌满屏标签页，该当前页跳转就当前页跳转。

还有一种情况：按钮不在 <a> 里面，而是单独一个 <button>，想用JavaScript控制跳转。代码长这样：

<button onclick="window.location.href='https://www.example.com'">JS跳转</button>

或者更规范一点，把JS写在脚本里：

<button id="myBtn">点我</button> <script> document.getElementById('myBtn').onclick = function() {  window.location.href = 'https://www.example.com'; }; </script>

这两种写法效果一样。用JS的好处是可以在跳转前做判断，比如检查用户有没有登录，没登录就先弹窗提示，而不是直接跳走。我做过一个后台系统，删除按钮点下去先 confirm 一下，确认了才跳转到删除接口，就是用的这种模式。

另外提一嘴，window.location.href 和 window.open 不一样。前者是当前页跳转，后者是新开窗口。别搞混了。还有 location.replace，它跳转后不会在浏览器历史里留下记录，用户按后退键回不来。这个适合做退出登录后的跳转，防止用户点后退又回到登录后的页面。

实际项目里，按钮跳转往往还带着参数。比如跳转到用户详情页，得把用户ID传过去：

<a href="user.html?id=123"> <button>查看用户</button> </a>

然后在 user.html 里用JS解析URL参数，拿到id去请求数据。这是很常见的做法，写多了就成肌肉记忆了。

最后说个坑：如果 <a> 里面套了 <button>，有些浏览器里点击按钮可能不触发跳转，因为按钮自己会拦截点击事件。解决办法是给 <a> 加 style="display:inline-block"，或者干脆别套按钮，直接给 <a> 做按钮样式。我倾向于后者，少一层嵌套少一个坑。

代码就这些，复制过去改改网址就能用。别想复杂了。