<span> vs <figure> vs <area>

Question

我想知道'span‘和新的HTML5标签'figure’和'area‘有什么不同。

每种方法的预期目的是什么?适当的用途是什么？例如，我经常使用背景图像的“span”而不是“img”标记来阻止图像可选；实现这一点的最佳元素是什么？

Answer 1

div是一个内联元素，本质上就像一个内联<span>。它是“一个通用的包装器，用于表述本身并不代表任何内容的内容”(W3C spec)。

<figure>与<figcaption>元素一起使用，用于标记“可以从文档的主流中移出而不会影响文档的含义”的内容。(W3C spec)

<area>用于制作图像映射，并在<map>元素中使用。

在您的示例中，我建议使用div，甚至使用带有透明png的img标记作为带有背景图像的内容。您可以使用带有user-select:none；的img标记，并使用常用的前缀来停止可选择的图像。

Answer 2

<span>标签用于文本或其他内联元素。它主要用于使用CSS进行格式化。

<figure>标签指定流内容，如图像、图表、照片、代码等。

<area>标签定义了图像映射中的一个区域。