css小tips -- figcaption标签

今天看到了figcaption标签：

<div class="col-md-4">
    <figure class="single bg">
        <img class="img-fluid" src="https://res.cloudinary.com/kirillkrasin/image/upload/v1529409840/codepen/cat.jpg" alt="image">
        <figcaption>Adorable Cat</figcaption>
    </figure>
</div>

    查了菜鸟教程，figcaption用于描述figure标签的标题，figure用于标记img，<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置；

对于figure标签，developer.mozilla上面的说明：

    HTML <figure> 元素代表一段独立的内容, 经常与说明(caption) <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主体(main flow)时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

可以通过在<figure>元素中插入一个<figcaption>来为其关联一个标题(作为它的第一个或者最后一个子元素)；

    所以，我之前的错误观点是把<figcaption>和<img>关联在了一起，实际上，<figcaption>是和<figure>关联，作为它的第一个子元素或者最后一个，<fugure>里面可以放不止是<img>还可以是代码段，图片（规定独立的流内容）等等，所以<figcaption>和<img>是没有必要关联的。