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

Question

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

最好的语义方式是什么？

以下是我的想法：

第一个解决方案：

HTML

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

第二个解决方案：

HTML

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

CSS

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

第3个解决方案

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请求减少一个，实际上不仅仅是一，如果你希望以后有更多按钮和不同的图像，它会为你节省更多...