html5的button标签何时使用?为什么主流网站在非跳转按钮上仍然使用a标签?
程序员文章站
2024-01-13 22:54:40
...
如果构建一个网站,不需要兼容ie6-8。使用button标签作为按钮是否更符合语义?
没错,如果不是超链接跳转,那么不应该用a,而应该用 button 或者 input[type=button] 。
button和input的问题是,因为是表单控件,所以在某些浏览器或平台上可设置的样式受到限制,或者干脆存在样式bug。尽管随着时间推移这种问题越来越少,但是坏习惯已经养成了。 有时候可能是为了风格统一吧。
你看知乎的回答下面的一行东东,有的是跳转新页面,有的不是,但是它们都用了a标签。
如果跳转用a,非跳转用button,看起来不统一不一致的吧
关于这个问题的这个部分:为什么主流网站在非跳转按钮上仍然使用a标签?
这并不是强制的,而且符不符合语义,对开发者来说并看不到什么明显的效果,所以语义化很多时候,只是一种口头表达。
有几个开发者严格规范自己写的每一句代码去适应一个发虚的规范呢。如果一个规范的意义没有强到一定程度,大部分都不会遵守这个规范。 感觉就是这意思,尤其配合css3。
而且a是inline,button是inline-block。
用a或许也有用a的好处,但我没研究。 链接功能是A,按钮功能是BUTTON。
这两个根本意义就不一样。
再引申下,跳页面用A,不跳用BUTTON 我发现在window平台的firefox和Safari上,默认就给button加了用户自定义样式,无法通过css修改字体,很难看,还是用a好 我觉得是a标签和button的默认表现样式不一样。做前端的肯定积累了好多常用的样式比如a标签的按钮样式等,如果改用button标签的话这些样式就要重新写,没必要 我现在写页面,优先还是使用a标签。
兼容上来说:毕竟在国内ie6还是不可忽略的,在定义鼠标经过效果的时候“a:hover”还是比较好用的。还有就是“按钮”长度自适应的问题,比如使用圆角、阴影等特殊效果的,就只能使用背景图片,a标签完全可以嵌套span等,来实现效果。button就显得比较呆板了。
回复内容:
主流网站的html代码写得保(烂)守(挫),也不是第一天的事情了。没错,如果不是超链接跳转,那么不应该用a,而应该用 button 或者 input[type=button] 。
button和input的问题是,因为是表单控件,所以在某些浏览器或平台上可设置的样式受到限制,或者干脆存在样式bug。尽管随着时间推移这种问题越来越少,但是坏习惯已经养成了。 有时候可能是为了风格统一吧。
你看知乎的回答下面的一行东东,有的是跳转新页面,有的不是,但是它们都用了a标签。
如果跳转用a,非跳转用button,看起来不统一不一致的吧
关于这个问题的这个部分:为什么主流网站在非跳转按钮上仍然使用a标签?
这并不是强制的,而且符不符合语义,对开发者来说并看不到什么明显的效果,所以语义化很多时候,只是一种口头表达。
有几个开发者严格规范自己写的每一句代码去适应一个发虚的规范呢。如果一个规范的意义没有强到一定程度,大部分都不会遵守这个规范。 感觉就是这意思,尤其配合css3。
而且a是inline,button是inline-block。
用a或许也有用a的好处,但我没研究。 链接功能是A,按钮功能是BUTTON。
这两个根本意义就不一样。
再引申下,跳页面用A,不跳用BUTTON 我发现在window平台的firefox和Safari上,默认就给button加了用户自定义样式,无法通过css修改字体,很难看,还是用a好 我觉得是a标签和button的默认表现样式不一样。做前端的肯定积累了好多常用的样式比如a标签的按钮样式等,如果改用button标签的话这些样式就要重新写,没必要 我现在写页面,优先还是使用a标签。
兼容上来说:毕竟在国内ie6还是不可忽略的,在定义鼠标经过效果的时候“a:hover”还是比较好用的。还有就是“按钮”长度自适应的问题,比如使用圆角、阴影等特殊效果的,就只能使用背景图片,a标签完全可以嵌套span等,来实现效果。button就显得比较呆板了。