HTML中button标签点击实现页面跳转的三种方法

法1：使用onclick事件

<input type="button" value="按钮"
onclick="javascrtpt:window.location.href='http://www.baidu.com/'" />

或者直接使用button标签

<button onclick="window.location.href = 'https://www.baidu.com/'">百度</button>

方法2：在button标签外套一个a标签

<a href="http://www.baidu.com/">
 <button>百度</button>
</a>

或使用

<a href="http://www.baidu.com/"><input type="button" value='百度'></a>

方法3：使用JavaScript函数

信
51rgb
网页自动跳转页面的代码在很多时候都非常的有用，下面的是两个简单的例子。仅供参考。

方案一，用<meta>里直接写刷新语句：

<html>
<head>
<meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="refresh" content="5;url=http://www.51rgb.com">
<title>html网页自动跳转代码--西农大网站</title>
</head>
<body>
测试：html网页自动跳转代码<br/>
你可以在这里写下你想的一切东西！<br />
如：西北农林科技大学是一所985、211院校。<br />
</body></html>

方案二，用javascript脚本来跳转

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在进入西农大网站</title>
</head>
<body>
<form name=loading>
<p align=center> <font color="#0066ff" size="2">正在进入，请稍等</font><font color="#0066ff" size="2" face="Arial">...</font>
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">
<inputtype=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">
<script>
var bar=0
var line="||"
var amount="||"
count
function count{
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count",100);}
else
{window.location =http://www.51rgb.com;}
}</script>
</p>
</form><p align="center">
测试：html网页自动跳转代码<br/>
你可以在这里写下你想的一切东西！<br />
如：西北农林科技大学是一所985、211院校。<br /><br />
如果您的浏览器不支持跳转,<astyle="text-decoration: none" href="http://www.mycodes.net
"><font color="#FF0000">请点这里</font></a>.</p>
</body>
</html>

↓↓↓

言

实践源于需求，



一个前端需求，需求如下：
前端网页有三种联系方式，邮箱，手机号，微信，
怎么实现手机上在网页上点击该文字进行相应的跳转
如：
点击邮箱号跳转到邮箱应用
点击手机号跳转到拨号应用
点击微信号跳转到微信应用
点击QQ号跳转到QQ应用

下面是简单的实现步骤。
              -- 记录与 2021年09月19日 测试可用

环境

简单的HTML页面
任意手机浏览器
Android手机 或 IOS手机

HTML实现

点击邮箱号跳转到邮箱应用 (已测试)

<a href="mailto:support@xxx.com">邮箱：mailto:support@xxx.com</a>

点击手机号跳转到拨号应用 (已测试)

<a href="tel:123">手机：123 </a>

点击微信号跳转到微信应用 (已测试)

<a href="weixin://">微信号：123 </a>

点击QQ号跳转到QQ应用 (未测试)

# 这个未测试，网上两种方法，可以都实践下
<a hfer="tencent://message/?uin=12345&Site=&Menu-=yes">弹出QQ为12345的窗口</a>

<a href="http://wpa.qq.com/msgrd?v=3&uin=1846189021&site=qq&menu=yes">联系客服</a>

整理

<a href="mailto:support@xxx.com">联系我们</a>
<a href="tel:110">123 </a>
<a href="weixin://">123 </a>
<a hfer="tencent://message/?uin=12345&Site=&Menu-=yes">弹出QQ为12345的窗口</a>

总结

前三个邮箱、手机、微信都自身测试过，
Android， IOS点击可跳转对应应用，

QQ只是在网上搜了下，没做测试，可以尝试下看能不能成功

不过话说回来，找了半天，只在网上一些博客里找到了上述这几种的应用跳转，
不知道有没有比较官方的文档或者资料可以找到的，
当然，也可能是我关键词没搜对？
有知道的麻烦留言或者私我呼我下