为什么不鼓励按钮导航?

2023-01-01前端开发问题
6

本文介绍了为什么不鼓励按钮导航?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

这可能是一个固执己见的问题,但我环顾网络,似乎网络开发人员喜欢将 <a> 标记设置为看起来像按钮,而不是使用特定的 <按钮>标签.我在查看导航时明显看到了这一点

This may be an opinionated question, but I was looking around the web and it seems like web developers like to style <a> tags to look like buttons, rather than use a specific <button> tag. I've noticeably seen this when looking at navigations

经过一番研究,我发现了这个:

After a bit of research, I found this:

  • 按钮不适合搜索,因为其中的文本对搜索引擎是不可见的.
  • 按钮比链接更难更新,每次更新都需要 Photoshop 和新图片.
  • 按钮加载速度比链接慢,这对移动访问者尤其不利.
  • 视觉障碍者不太容易使用按钮.
  • 按钮是不必要的,即使你想使用非标准字体,这要归功于 TypeKit 等工具.~ 引用自这里

但是,这些原因"中的大多数似乎都非常站不住脚,并且您需要 photoshop"之类的答案似乎……嗯……无效?

However, most of these 'reasons' seems quite flimsy and answers like 'you need photoshop' seem... well... invalid?

所以我想知道:

在创建导航菜单时不使用 <button> 标签是否有实际原因,而是将 <a> 标签设置为看起来像按钮?为什么按钮不是常态?这不是他们的目的吗?

Is there an actual reason why the <button> tags aren't used when creating navigation menus, and instead style <a> tags to look like buttons? Why aren't buttons the norm? Is this not what they're made for?

* 我不希望你在这里发表意见,也不希望有观点.仅关于为什么会这样的事实信息

推荐答案

阅读了评论中发布的多个文档后,似乎确实有一个明确的事实原因按钮没有使用导航栏.

After reading up on multiple documents posted in the comments, it seems that there is actually a clear factual reason buttons are not used in navigation bars.

当存在页面重定向或将用户带到网站的其他位置时使用这些.

These are used when there is a page redirect or taking a user elsewhere on the website.

  • 如果它导航,它就是一个链接.使用具有有效超文本引用的链接标记

~链接不是按钮

按钮元素

当您想要doSomething() 重定向用户时使用这些.IE.提交表单/等.

Button elements

These are used when you want to doSomething() that is not redirecting the user. I.e. submitting a form / etc.

你需要问自己的问题是:

The question you need to ask yourself is:

此控件是否用于启动即时操作该操作是导航到另一个页面吗?

Will this control be used to initiate an immediate action or Is the action to navigate to another page?

如果您的问题的答案是第一部分,那么您应该使用 button 元素.而如果您希望使用后者,那么您应该使用 a 元素.

if the answer to your question is the first part, then you should be using a button element. Whereas if it is the latter that you are wishing to do, then you should be using an a element.

进一步阅读:

  • w3.org

链接不是按钮.DIV 和 SPAN 也不是

何时使用按钮元素

这篇关于为什么不鼓励按钮导航?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui tree树组件怎么自定义添加图标
经常用到layui的朋友都知道,layui tree默认是不能自定义图标的,那么我们要自定义的话要怎么操作呢? 首先用编辑器软件(修改时候用编辑器记得编码),打开layui.js。搜索: i class="layui-icon layui-icon-file" 改为如下代码: i class="'+ (i.icon || "l...
2024-10-26 前端开发问题
493

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

jQuery怎么动态向页面添加代码?
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。 语法: $(selector).append( content ) var creatPrintList = function(data){ var innerHtml = ""; for(var i =0;i data.length;i++){ innerHtml +="li class='contentLi'"; innerHtml +="a href...
2024-10-18 前端开发问题
125

“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时
quot;Each child in an array should have a unique key propquot; only on first time render of page(“数组中的每个孩子都应该有一个唯一的 key prop仅在第一次呈现页面时)...
2024-04-20 前端开发问题
5