• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5的button标签何时使用?为什么主流网站在非跳转按钮上仍然使用a标签?

html5的button标签何时使用?为什么主流网站在非跳转按钮上仍然使用a标签?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含button,ie等相关知识,匿名希望在学习及工作中可以帮助到您
如果构建一个网站,不需要兼容ie6-8。使用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就显得比较呆板了。

您可能想查找下面的文章:

  • html5的button标签何时使用?为什么主流网站在非跳转按钮上仍然使用a标签?

相关文章

  • 2018-12-03html5中布尔属性的hidden
  • 2018-12-03HTML5 data-* 自定义属性实例分享
  • 2018-12-03html5实现清空画布的三种方法
  • 2018-12-03Html5文件异步上传功能的实现
  • 2018-12-03百行 HTML5 代码实现四种双人对弈游戏
  • 2017-08-06HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
  • 2018-12-03HTML5新特性之文件和二进制数据的操作
  • 2017-08-06HTML5所有标签汇总及标签意义解释
  • 2018-12-03HTML5与Flash比较的详细介绍
  • 2017-08-06详解HTML5中的<template>标签

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何看待用 HTML5 技术开发的 web 应用与 Android 或 iOS 等原生应用的关系?
    • H5中header标签应该如何使用
    • 请问如何从头开始学习制作一款HTML5 小游戏?
    • html5本地存储storage实例详解
    • 开发人员最常用的HTML5/CSS3代码生成器
    • 前端必看H5 meta小结
    • HTML5未来发展趋势
    • 全方位了解HTML5
    • 用css3实现打点效果实例讲解
    • html5实现完美兼容各大浏览器的播放器

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有