什么时候用button,什么时候用a标签

一、问题

能实现链接功能的标签一般就a标签,button标签,input submit标签

input submit肯定是提交表单的时候用

那什么时候用button,什么时候用a标签

能用a标签的地方尽量使用a标签么?

只有在例如type=submit的时候才使用button标签?

是否a标签比button标签更好?原因是什么?

那一个按钮 点击弹出来弹窗,或者一个按钮点击触发一个事件(例如收藏),用什么比较好?

二、解答

特意去翻了之前看过的一篇文章。
你不能创造一个按钮

个人觉得主要三个原因:

    • 尊重一个标签被创造出来时的初衷

    • 在PC端使用tab或者方向键切换焦点后,按下enter键,button(input[type=button])的click事件会被触发而其他标签不会。

    • 你想实现一个disabled属性时,a标签需要一句似乎麻烦一些

语义上说,a一般是链接,一般指向一个地址button是按钮,一般点击后调用本页方法

实际上随你便,只要你写的代码没有看了想开除你,想用什么都无所谓

另外,button貌似默认就是type=submit吧,放在表单里的裸button点击就提交表单了,不过我一般用input type=submit,除非是按钮里需要放一些比较花哨的内容时才会用button

需要添加链接,或者直接从服务端get数据的用a标签。其他地方button可以的话就用button。没有哪个便签比哪个更好,只有哪个标签更适用哪些场景。你可以通过以下方法权衡一下:

1.需要与后端进行数据交互吗?不需要的话button即可

2.要与后端交互?如果是get方式的话使用a标签很方便。如果是post等方式,用button,绑定ajax事件即可

具体看情况,按钮功能上用input或者button都可以。
但是button里面可以嵌套内容,input则不行,所以具体情况具体看。
a标签一般用作超链接或者锚链接。
理论上你用一个a标签也可以做出button的样式。所以具体还是要看实际情况的。

什么时候用button,什么时候用a标签的更多相关文章

  1. a标签中可以加button,但是不提倡;button中不能加a标签,否则不能跳转

    a标签中可以加button,但是不提倡:button中不能加a标签,否则不能跳转

  2. 如何解决button,a,input标签自带蓝色边框

    通常我们会设置该标签outline:0;但是我在使用iview自带的button组件的时候,设置无效,经过测试只要设置 :focus{      outline:0; }  即可,方便有效

  3. 让button居中显示的的标签

    <center> <input type="button" class="buttoncls" style="width:80px& ...

  4. button提交表单 a标签提交表单

    <form name="searchForm" id="searchForm" method="get" action="/ ...

  5. 【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件

    刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法, ...

  6. [Learn AF3]第四章 App framework组件之Button

    Button    组件名称:Button     是否js控件:否     使用说明:如果说panel组件是af3的“核心(heart of the ui)”,那么Button就是af中的五虎上将之 ...

  7. antd button

    引用 :import { Button } from 'antd'; <Button type = "primary" //按钮样式颜色 shape = "circ ...

  8. button在firefox 和 ie 下的问题

    最近做了一个关于数据库管理的项目,因为不用考虑ie9以下的兼容性,所以一股脑的写完啦,到测试的时候发现了一个bug IE和火狐下有个模块关闭按钮的hover没有反应,ie不行就算了,火狐怎么也不行?我 ...

  9. amazeui学习笔记--css(HTML元素1)--按钮Button

    amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...

  10. web前端基础知识

    #HTML    什么是HTML,和他ML...    网页可以比作一个装修好了的,可以娶媳妇的房子.    房子分为:毛坯房,精装修    毛坯房的修建: 砖,瓦,水泥,石头,石子....    精 ...

随机推荐

  1. Maven项目:Plugin execution not covered by lifecycle configuration 解决方案

    这个是eclipse中配置文件pom.xml报的错.具体错误信息: Plugin execution not covered by lifecycle configuration: org.apach ...

  2. Git放弃本地更改恢复到资源库版本

    使用git版本控制工具在本地clone一份代码后,如果发现修改错误想恢复到资源库版本,下面两行可以轻松加愉快的搞定: git clean -xdf git checkout -f git的更多详细用法 ...

  3. Android RecyclerView和ScrollView嵌套使用

    我们的recyclerView有多个layoutmanager,通过重写layoutmanager的方法就可以让recyclerView和ScrollView嵌套了.但是请注意,如果recyclerV ...

  4. OGG切换步骤

    步骤描述 提前准备好切换方案:以及其他相关人员的配合 切换至容灾数据库: (1)停止前端业务,确认目标端数据已经追平 (2)数据校验,确认数据一致 (3)停止生产库OGG进程(停止后可以直接删除) ( ...

  5. day01-Python介绍,安装,idea

    一. python 简介 Python,读作['paɪθɑn],翻译成汉语是蟒蛇的意思,Python 的 logo 也是两条缠绕在一起的蟒蛇的样子,然而 Python 语言和蟒蛇实际上并没有一毛钱关系 ...

  6. error_reporting()函数

    定义和用法 error_reporting() 函数跪地你给应该报告何种 PHP 错误. error_reporting() 函数能够在运行时设置 error_reporting 指令. PHP 有诸 ...

  7. 题解 HDU1565 【方格取数(1)】

    给你一个n*n的格子的棋盘,每个格子里面有一个非负数. 从中取出若干个数,使得任意的两个数所在的格子没有公共边,就是说所取的数所在的2个格子不能相邻,并且取出的数的和最大. 题目清晰明了,这道题应该用 ...

  8. 【Codeforces Round #465 (Div. 2) C】Fifa and Fafa

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 这个x2,y2和圆心(x1,y1)相连.形成的直线和圆交于点(x3,y3) 则(x2,y2)和(x3,y3)的中点就是所求圆的圆心. ...

  9. List和iterator的区别

    (1)在用Query方法查询的时候,通过HQL语句来得到Query对象,并对Query对象进行操作,首先是用list方法获取到Query的List集合并输出 public void listQuery ...

  10. 基于ArcGIS Flex API实现动态标绘(1.2)

    动态标绘API 1.2,相较前一版本号(点击进入),该版本号新增对基本标绘符号的支持,包含: 单点.多点.折线.手绘线.多边形.手绘多边形.矩形,并提供对应的编辑功能. 例如以下图所看到的,对多点的编 ...