今天学到一个小技巧,平时用以下代码标记图片
<img src="images/Yi01.jpg"/>
<p>this is ...</p>
这种方法没有富有语义的将图片和文字说明进行关联
我们可以使用figure及figcaption标签将图形说明文字与图形配对起来。
figure标签能独立的表示文档流内容(图片、图表、代码等),figure 元素的内容应该与主内容相关,但如果被删除,则不会对文档流产生影响。
使用 figcaption元素为 figure 添加标题(caption),一个figure里只能有一个figcaption元素,但其他元素可以有多个。
figure内只有一个元素 举例:
<figure class="effect">
<img src="images/Yi01.jpg"/>
<figcaption>
<p>this is Yi01</p>
</figcaption>
</figure>
figure内有多个元素标签
<figure class="effect">
<img src="images/Yi01.jpg" alt="img01"/>
<img src="images/Yi02.jpg" alt="img02"/>
<img src="images/Yi03.jpg" alt="img03"/>
<figcaption>
<h2> <span>image</span></h2>
<div>
<p>this is Yi01</p>
<p>this is Yi02</p>
<p>this is Yi03</p>
</div>
<a href="#">View more</a>
</figcaption>
</figure>