标题图像

Question

使用最新的HTML/CSS在网络上标题图像的最佳方法是什么？请演示代码.

Answer 1

有几种语义方法可以标记图像及其标题.

守旧派的方式

旧学校方法是使用HTML定义列表,以语义方式查看图像标题.(还有其他很好的教程演示了这种方法.)

<dl>
    <dt><img src="foo.jpg" /></dt>
    <dd>Foo</dd>
</dl>

微格式

还有一个数字微格式适用于任何常规标记:

<div class="figure">
  <img class="image" src="foo.jpeg" alt="" /><br/>
  <small class="legend">Foo</small>
</div>

HTML5

HTML5现在为带有字幕<figure>和<figcaption>元素的图像提供了一种干净的直接方法.

<figure>
  <img src="foo.jpg" alt="">
  <figcaption>Foo</figcaption>
</figure>

Answer 2

编辑 -

悬停图像标题上的 CSS示例

其他示例：网页上的图像标题