Html 包含按钮的链接，2016版 代码示例： 为什么？

我想要纽扣。但我也希望它的行为像一个链接。这意味着当我用鼠标中键单击它时，它将在一个新选项卡中打开。当我按住shift键并单击它时，它将在一个新窗口中打开。当我按住ctrl键单击时，它将在一个新选项卡中打开。当我在没有修改器的情况下单击时，它将在当前选项卡中打开

这是在没有框架的情况下完成的

将链接设置为按钮样式是不可接受的，因为“看起来像按钮”是特定于浏览器和设备的

那又怎么样？

---

就我目前所能测试的而言，它似乎一直运行良好。浏览器对此行为（包括移动浏览器）的支持状态如何？不支持的浏览器会以何种方式将其搞糟，例如，通过将按钮移动到DOM中链接的外部？

根据HTML5规范，

按钮

标记不能嵌套在

标记内。虽然浏览器“可能”呈现您试图实现的内容，但它在技术上是无效的HTML，并且不能保证将来可以工作

“‘看起来像按钮’是特定于浏览器和设备的”不正确。如果您不使用浏览器默认样式的按钮，那么按钮看起来完全依赖于CSS。如果您想要有效的HTML和所描述的效果，只需使用CSS将
a
标记样式设置为按钮

编辑：

您可能会发现使用了
外观
CSS属性，强制对某些元素进行本机UI呈现，但这并不普遍或标准，每个浏览器的实现都会有所不同，并且可能在不同版本之间完全中断或更改。换句话说，我不推荐它，但它是最接近您要求的东西，而无需使用自定义CSS。
如果您使用的是bootstrap，那么它的视图是惊人的。就像这样



或者你可以这样做，
问题在于，你想要的东西既是一个“真正的按钮”（在某种意义上，浏览器将其呈现为按钮的视觉效果，它会像按钮一样触发），但也具有“真正的锚定”特性（例如，它可以右键单击以在新选项卡中打开，可以设置样式等），但按钮和锚定（显然）不是一回事。它们是相似的，但都作为不同的想法存在，因为它们不一样

也许你可以想象一个像“type=link”这样的属性，它可以实现你所想象的，但在HTML规范中目前还不存在

此外，关于为什么这不是“刚刚起作用”的事情，一些原因可能是：

从将浏览器指向新位置/URL的意义上讲，按钮本身没有目标。按钮可能具有这种效果，但按钮通常用于触发脚本或提交表单等操作。这两种方式都不会隐式地指示浏览器转到新位置

假设该按钮旨在触发一个javascript函数，在该函数中，有一行代码使用
location
重定向浏览器。该按钮没有重定向浏览器，javascript函数执行了此操作。浏览器事先不知道会发生这种情况

现在，假设该按钮触发一个函数，将页面的背景颜色从红色更改为蓝色。不更改浏览器的位置/URL

如果有某种方法使按钮的行为类似于锚定，并且用户使用ctrl+click来单击按钮，那么新的浏览器窗口在这个新窗口/选项卡中会做什么？打开与以前完全相同但背景为蓝色的内容？或者打开一个没有内容但只有蓝色背景的空白窗口

如果如您所述将按钮嵌套在链接中：


实际上，您正在告诉浏览器执行两个操作。其中一个是“跟踪此链接”，另一个是“执行此按钮单击”。正如嵌套锚元素具有意外和不受支持的结果一样，嵌套按钮和锚元素也会产生意外和不受支持的结果。浏览器如何知道用户“真正的意思”是哪个元素，或者从每个元素中使用哪个部分

如果您想要一种方法，使UI控件通知浏览器打开一个新位置，允许浏览器具有诸如右键单击并复制该位置、为该位置添加书签或在新选项卡中打开该位置等选项，则此方法已经存在。它被称为锚，看起来像
，这意味着锚的样式看起来像按钮。样式应该通过CSS完成，而不是通过看起来更像您想要的元素。我敢肯定Jeff提倡让元素具有其固有风格的价值（比如不尝试过度设置链接、段落或输入的样式，允许元素只遵循基于浏览器/用户的样式选项默认使用的外观和感觉），与其说是建议使用不合适的元素，不如说是为了利用其他元素的内置样式，而不是使用正确的样式

最后，我在昨天看到的一个相关的答案中提到了这类问题。HTML规范中的某些东西可能会像您所希望的那样作为一个预期的中间地带，可以是元素，但到目前为止，它还没有在任何主流浏览器中以正确（遵循规范）的方式实现。但这可能是因为没有人直言不讳地支持它可能拥有的用例。所以，也许这可能是其中之一，你可以团结起来，让这个元素被采纳，而不是再次被忽略

嗯，我使用的是浏览器默认样式的按钮。有一件事我喜欢称之为“原生UI”，杰夫·阿特伍德（Jeff Atwood）写了一篇非常好的文章，讲述了如何使用它。所以不幸的是，简单地使用CSS在这里是行不通的，那么HTML就不适合你了。我知道这不是你想要的答案，但这是正确的答案。如果你不愿意使用CSS，你就无法获得你想要的行为
<a href="//google.com/"><button>Click me</button></a>