【HTML入门】第十六课 - 网页中的按钮们

经海路大白狗

于 2024-07-20 14:15:00 发布

阅读量181

点赞数 4

分类专栏： WEB前端小白从这里出发文章标签： html 前端

本文链接：https://blog.csdn.net/xingyu_qie/article/details/140556712

版权

WEB前端小白从这里出发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这一小节，我们说一说 html网页 中的按钮。按钮的作用，就是让用户点呗，点了以后触发一些事件，可以做一些事情。

1 input 按钮一

没错，input这个控件，可以做输入框，也可以做按钮。可以把type的属性值设置为 submit 。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

2 input 按钮二

我们还可以把type的属性值设置为 button 。同样也可以展示出按钮的效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form method="get" action="http://www.aatest.com/setUser" target="_blank">
            <input type="button" value="button的提交" />
        </form>
    </body>
</html>

3 button 按钮

我们还可以用button来做一个按钮，没错，就是 button 标签。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <button>这是一个button按钮哦</button>
    </body>
</html>

4 链接a标签

有时候，我们看见的可点击的按钮，不一定都是按钮的形状，而是一个简单的链接a标签。虽然说a标签主要用于做链接跳转，但仍然有很多网站，用这种样式来做一个可点击的按钮，但却不是用来做跳转的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">登录</a>
    </body>
</html>