html - 带有图像的 HTML 帮助按钮：最好的语义是什么？

Question

我想创建一个 HTML 帮助按钮（看起来像一个图像）。

最好的语义方式是什么？

这就是我的想法：

第一种解决方案：

HTML

<button class='help'>
    <img/>
</button>

第二种解决方案：

HTML

<button class='help'>
</button>

CSS

button.help
{
    background-image:...;
}

第三个解决方案

HTML

<img class='button' src='blabla'/>

我认为button标签是必不可少的，因为它的行为就像一个按钮（你可以点击它来获得一些帮助，基本上）

Answer 1

我会说：

<button class='help'>
</button>

还可以补充：

<button class="help" role="button">Help</button>

Answer 2

如果您使用按钮进行某些form提交，那么我更愿意使用

<input type="image" src="PATH_TO_IMAGE" alt="Submit Button" />

如果你想坚持button标签，我更喜欢使用这种background-image方式。

为什么？

好吧，您可以为您的网站使用CSS Sprites并将图像放在画布上，而不是使用background-position属性映射图像，这样它将减少一个 http 请求，实际上不仅仅是一个，如果您愿意，它将为您节省更多以后有更多带有不同图像的按钮...