为图像添加标题[关闭]

2024-02-22

使用最新的 HTML/CSS 在网络上为图像添加标题的最巧妙方法是什么?请演示代码。


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

老派方式

一种老式方法是使用 HTML 定义列表,请参阅图像标题的语义方式 http://www.naterkane.com/blog/image-captions-the-semantic-way/。 (还有其他不错的教程 http://www.tjkdesign.com/articles/thumbnail_and_caption/gallery_of_thumbnails.asp演示此方法。)

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

微格式

还有一个图形微格式 http://microformats.org/wiki/figure适用于任何常规标记:

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

HTML5

HTML5 现在为带有标题的图像提供了一种干净直接的方法<figure> and <figcaption>元素 http://html5doctor.com/the-figure-figcaption-elements/.

<figure>
  <img src="foo.jpg" alt="">
  <figcaption>Foo</figcaption>
</figure>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为图像添加标题[关闭] 的相关文章

随机推荐