html按钮怎么设置超链接?html按钮超链接的四种实现方法

宜家博客
宜家博客
宜家博客
47420
文章
0
评论
2020年7月1日16:00:43 评论 3 1186字阅读3分57秒

在html中,有时候为了好看与方便可能会需要设置按钮超链接,那么html按钮怎么设置超链接呢?接下来本篇文章我们就来看看html按钮超链接的四种实现方法,有需要的朋友可以参考一下。

html按钮设置超链接的方法一:使用超链接与button结合的方法

html按钮超链代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<a rel="external nofollow" target="_blank" href="https://www.yjro.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAuY24v">
<input type=button value="php教程" >
</a>
</body>
</html>

html按钮超链接效果如下:

html按钮怎么设置超链接?html按钮超链接的四种实现方法

说明:<a> 标签的 href 属性用于指定超链接目标的URL。

html按钮设置超链接的方法二:使用链接和css样式设置将超链接设置成按钮的形状

html按钮超链接代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
   a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    color: initial;
}
</style>
</head>
<body>
<a rel="external nofollow" target="_blank" href="https://www.yjro.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAuY24=" class="button">php教程</a>
</body>
</html>

html按钮设置超链接的方法三:使用 form表单来设置html按钮超链接

html按钮超链接代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<form method="get" action="http://www.php.cn/">
    <button type="submit">php教程</button>
</form>
</body>
</html>

html按钮设置超链接的方法四:使用window.location.href方法

完整的写法:

<a href="链接"> 
  <input type=button onclick="window.location.href('连接')">
</a>

说明:

1、若直接在本页跳转到新的页面,则用: <input type=button onclick="window.location.href('连接')">
2、如果需要打开一个新的页面进行跳转,则用: <input type=button onclick="window.open('连接')">

以上就是本篇文章的全部内容了,更多其他精彩的内容大家可以关注PHP中文网!!!

以上就是html按钮怎么设置超链接?html按钮超链接的四种实现方法的详细内容,更多请html教程其它相关文章!

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
宜家博客
图文详解怎么去除HTML超链接的下划线 css教程

图文详解怎么去除HTML超链接的下划线

在页面布局时,经常会用到a标签,大家都知道a标签默认有下划线,而且颜色也有所不同,有时为了页面的美观,需要去除部分超链接的下划线,或者改变超链接的颜色,你知道怎么实现这个效果吗?这篇文章就和大家讲讲如...
如何用Windows自带画图工具吸取色值 html教程

如何用Windows自带画图工具吸取色值

1、打开画图windows自带画图软件 2、用qq截图要吸取颜色的图片,ctrl+v粘贴到画图软件中 3、点击取色器,吸取颜色,这是会看到吸取成功的颜色 4、打开编辑颜色 5、这样就得到了RGB颜色 ...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: