button、a标签、input button的区别

最新推荐文章于 2024-02-01 22:16:39 发布
最新推荐文章于 2024-02-01 22:16:39 发布
阅读量4.5k 收藏 3
点赞数 2
文章标签： html button a 标签 按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31092813/article/details/76034151
版权 


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style type="text/css">        
        table{
            border-spacing: 0;
            border-collapse: 
            collapse;width: 100%;
            border: 1px solid #ccc;
        }
        th{
            line-height: 44px;
            background: #f1f1f1;
        }
        td{
            border: 1px solid #ccc;
            padding: 4px 8px;
        }
        button{
            background: #666;
            color: #fff;
            cursor: pointer;
        }
        a{
            background: #666;
            color: #fff;
        }
        .button-btn{
            width: 150px;
            background: #f00;
            border:1px solid #ccc;
            color: #fff;
        }
        .a-btn{
            display: inline-block;
            width: 150px;
            background: #f00;
            border: 0;
            color: #fff;
            text-align: center;
            text-decoration: none;
            font-size: 14px;
        }
        .inputbutton-btn{
            display: inline-block;
            width: 150px;
            background: #f00;
            border: 0;
            color: #fff;            
        }

    </style>
</head>
<body>
<table>
    <tr>
        <th></th>
        <th>button</th>
        <th>a标签</th>
        <th>input type="button"</th>
    </tr>
    <tr>
        <td rowspan="7">不同</td>
        <td>标签语义就是按钮</td>
        <td>标签语义为超链接</td>
        <td>标签语义为可点击的按钮，但没有任何行为</td>
    </tr>
    <tr>
        <td> <button draggable="true" type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="alertBtn">button标签</button></td>
        <td><a href="">a标签</a></td>
        <td><input type="button" value="input button标签"></td>
    </tr>
    <tr>
        <td>可变元素</td>
        <td>内联元素</td>
        <td>内联元素</td>
    </tr>
    <tr>
        <td>默认字号为14PX</td>
        <td>默认字号为16px</td>
        <td>默认字号为14PX</td>
    </tr>
    <tr>
        <td>文字默认居中</td>
        <td>文字默认左对齐</td>
        <td>文字默认居中</td>
    </tr>
    <tr>
        <td>我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。</td>
        <td>用于从一张页面链接到另一张页面。</td>
        <td>button 类型常用于在用户点击按钮时启动 JavaScript 程序</td>
    </tr>    
    <tr>
        <td>不同的浏览器会提交不同的值。IE将提交 ‹ button › 与 ‹button/›之间的文本，而其他浏览器将提交 value 属性的内容</td>
        <td>如果未设置 href 属性，则只是超链接的占位符。</td>
        <td>FORM下type 属性规定 input 元素的类型。</td>
    </tr>
    <tr>
        <td rowspan="2">调整到相同样式代码</td>
        <td> <button draggable="true" class="button-btn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined" id="alertBtn">button标签</button></td>
        <td><a class="a-btn" href="javascript:;">a标签</a></td>
        <td><input draggable="true" class="inputbutton-btn" type="button" value="input button标签"></td>
    </tr>
    <tr>
        <td>
            <pre>.button-btn{
                    width: 150px;
                    background: #f00;
                    border:1px solid #ccc;
                    color: #fff;
                }
            <pre>
        </td>
        <td>
            <pre>.a-btn{
                    display: inline-block;
                    width: 150px;
                    background: #f00;
                    border: 0;
                    color: #fff;
                    text-align: center;
                    text-decoration: none;
                    font-size: 14px;
                }
            <pre>
        </td>
        <td>
            <pre> .inputbutton-btn{
            display: inline-block;
            width: 150px;
            background: #f00;
            border: 0;
            color: #fff;            
        }<pre>
        </td>
    </tr>
    <tr>
        <td>对H5的支持</td>
        <td> 支持draggable="true"</td>
        <td> 不支持draggable="true"</td>
        <td> 支持draggable="true"</td>
    </tr>
</table>




</body>
</html>

如有商业用途使用，请注明转载自咻咻飞碟！

咻咻飞碟
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么时候用button，什么时候用a标签
weixin_34273479的博客
04-25 309
什么时候用button，什么时候用a标签 一、问题 能实现链接功能的标签一般就a标签，button标签，input submit标签 input submit肯定是提交表单的时候用 那什么时候用button，什么时候用a标签   能用a标签的地方尽量使用a标签么？ 只有在例如type=submit的时候才使用button标签？ 是否a标签比button标签更好？原因是什么？ 那一...
button、input和a标签作为按钮时的区别
吴小粥的博客
10-25 7052
我们都知道，button、input、a标签都可以加上一定的样式之后成为外观上没有太大差别的按钮，那么，这三个标签都适合在什么场景下作为按钮使用呢？
button与a标签的区别
07-24
button与a标签的区别
关于tp5.1的a标签和button标签的区别（地址跳转）
weixin_43202364的博客
01-17 1859
我们以下载一个phpexcel文件为例 首先看，button标签： html代码 &lt;button class="layui-btn layui-btn-fluid" onclick="download()"&gt;下载&lt;/button&gt; js代码： function download(){ $.post("{:url('download')}",{},fun...
a标签IE浏览器兼容问题
GeneralYY0的专栏
01-28 7229
原文：http://hi.baidu.com/pdj408/item/b5d79ec26aaa422399b4986a a标签中如果有button, 那么在IE下就不能跳转到herf的链接 a标签中如果有button, 那么在IE下就不能跳转到herf的链接。而火狐和google中可以 如下：此种在IE中不可以。这边的class中的属性只用于按钮样式。
a 和 button
Melissa的博客
04-27 1154
像 button 的原始目的就是一个通用的按钮，点击后应该触发  JavaScript， 没有其它附带的隐含的附加效果； 标签的隐含附带效果就是跳转页面到其它地方，而提交表单时应该有一个隐含附带的让浏览器触发提交表单的效果， 它就与 button 默认的行为不一样了。所以我们根据这点来区分我们应该用 button 还是用 input 或 a 标签。 今天遇到一个难题，代码如
<button>标签与<form>标签对于创建按钮的区别
Kanglizi的专栏
08-17 685
若使用创建按钮，应该使用:，否则按钮并不能实现它的一些功能，比如说onclick；使用button则可以直接用
BUTTON和INPUT的区别
10-31
BUTTON和INPUT的区别
button和input type=button的区别及注意事项
09-28
在HTML中，`<button>`和`<input type="button">`都是用于创建按钮的元素，但它们之间存在一些关键的区别。理解这些差异对于编写兼容各种浏览器和提供良好用户体验的网页至关重要。 首先，`<button>`标签允许在按钮...
input button文字的行高在FF下的显示问题
12-13
最近国外有开发者发现Firefox和Opera的一个BUG：无法改变按钮里文字的行高（包括input type=”sumbit”和HTML的button标签）。举个例子，对一个按钮使用以下样式： 复制代码代码如下: input#button { border: 2px ...
input、button的不同type值在ajax提交表单时导致的陷阱
09-06
input标签的type属性可以取多种值，例如text、password、radio、checkbox、submit、reset、file等，而button标签的type属性也可以取多种值，例如submit、reset、button等。这些type值的不同将导致不同的行为和效果。...
BootStrap入门（三）全局CSS样式
qq_41763734的博客
07-22 270
BootStrap入门（三）全局CSS样式 BootStrap中CSS样式有许多，这里挑一些学习 过程中的来展示，更多样式移步link 一、按钮 <body> <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-d...
a标签与按钮的顺序问题
m0_54058795的博客
06-06 151
1.
HTML两大点击元素:button和a
JavaIdot的博客
01-16 2396
您将学习到两大点击元素button和a（按钮和超链接）的用法。还有拓展如何让超链接像按钮一样有点击事件。如果拓展让您感到有所帮助，不忘点赞加关注！
【原生Button和antd的Button】
小蓝人的博客
01-16 1063
与按钮所关联的form元素。此属性的值必须是同一文档中form的id。如果未设置此属性，则 < Button>与其祖先< form>元素相关联此属性允许将< Button>元素关联到文档中的任意位置< form>，而不仅仅是< form>内，他还可以覆盖祖先< form>元素。
点击按钮，按钮变输入框或输入框输入内容后，出现确认的图标 antd-design-vue
花椒和蕊的博客
08-05 1465
经历了上周比较痛苦的一周，遇到的点都记录下来，温故而知新 1、点击按钮，按钮变输入框 使用labelFlag变量来控制 <a-button class="left_content_button" v-if="labelFlag" size="large" @click="changeInput">创建新标签</a-button> <a-input class="left_content_input" v-else v-model="createPutv
TouchGFX学习笔记3：标签按钮、图标按钮、开关按钮和单选按钮
最新发布
qq_46038320的博客
02-01 497
在Button的基础上添加文本显示，可以提示该按钮的功能，例如在按钮上显示开灯/关灯字样。
【Java GUI】标签、按钮和按钮事件
Bill_Utada的成长之路
06-07 8486
标签标签(JLabel)是最简单的Swing组件，标签对象的作用是对位于其后的组件作说明，可以设置标签的属性，即前景色，背景色，字体等。但不能动态地编辑标签中的文本。程序关于标签的基本内容有以下几个方面： 1.声明一个标签名 2.创建一个标签对象 3.将标签对象加入到某个容器JLabel类的主要构造方法是：JLabel()//构造一个无显示文字的标签 JLabel(String s)//构造一
【Ant Design Vue】button组件用法大全
热门推荐
Hit the keyboard hard
12-03 1万+
Ant官方推荐了button组件属性的使用顺序：type -> shape -> size -> loading -> disabled 具体做法如下： <a-button type="primary" shape="round" size="default" :loading="false" :disabled="false"> 按钮 </a-button&
button和input标签的区别
07-14
button 标签和 input 标签都可以用来创建按钮，但它们之间有一些区别。 1. 语法：button 标签是一个容器标签，它可以包含文本或其他 HTML 元素，而 input 标签是一个自闭合标签，只能包含属性。 2. 内容：button ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值