使用 <img> 标签来展示图片，不要使用按钮、锚点或输入框等元素，因为它们会让用户认为该元素是可交互的，即使没有 JavaScript 的情况下也是如此。
点击图片应该调用一个动作（通过 JavaScript 实现，但这不是重点）。
我不同意，这才是重点 :)
因为点击操作只能在启用了 JavaScript 的环境下才能生效，所以你的图片应该只在 JS 环境下可用。
因此，正确的方法是使用 JavaScript 插入图片；虽然 HTML 文档应该具有语义正确性，但 DOM 结构并不一定需要具备语义正确性，因此使用哪个元素已经变得不那么重要了。
<div>
Click on the image to do something: <a href="javascript:wtv()" style="background-image:url(...)"> </a>
</div>
<div>
Click on the image to do something: <input type="image" onclick="wtv()" src="..." />
</div>
<div>
Click on the image to do something: <img onclick="wtv()" src="..." />
</div>
<div>
Click on the image to do something: <button onclick="wtv()"><img onclick="wtv()" src="..." /></button>
</div>
<img>是较小的问题，因为它不暗示交互元素。最大的问题是将<a>作为锚点使用，应该将其作为超链接指向另一个文档，并且永远不要使用javascript:协议。/* external .js file */
document.getElementById("myButton").onclick = wtv;
<!-- HTML document -->
<div id="myButtonParent">
Click on the image to do something: <a id="myButton" href="#" style="background-image:url(...)"> </a>
</div>
再次提醒，您仍然可以向那些没有JavaScript的用户提供（无效）超链接。
相反地，使用DOM脚本插入整个内容！我将使用带有onclick事件的<img>：
/* external .js file */
window.onload = function() {
var img = document.createElement("img");
img.src = "...";
img.onclick = wtv;
img.style.cursor = "pointer"; // so the mouse turns into a finger,
// like on a hyperlink
// Note: instead assign a class attribute and put this in an external CSS file...
document.getElementById("myButtonParent").appendChild(img);
}
<image />而不是全部使用JS。 - Richard JP Le Guen<img id='image1' onclick="javascript:DoSomething()"...
或者通过jQuery添加：
$("#image1").click(
function() {
DoSomething();
});
我不太明白你想要实现什么。但是你尝试过图像输入吗？
<input type="image" src="image source">
它将执行类似于表单提交的操作。
<button>，但这取决于你。 我自认为是一个纯粹主义者，但我还没有思考过这个问题 :) - MvanGeest<img>（并通过DOM脚本添加JavaScript操作，因为我们希望对非JavaScript用户友好）。(2) 由于我的应用程序是内部使用的，所以我会调皮地选择<img>，并直接附加JavaScript...感谢大家快速而好的回答！非常有帮助 :-) - thomastiger