freeCodeCamp tribute page 笔记

通过为图片搭配说明文字的方式来解说图片

（来自网络）
说到说明文字，这里有很多种方法让你添加一段说明文字来搭配图片。比如，没有人会阻止你这么做：

<div class="figure">
  <img src="/images/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <p>曼彻斯特大学博物馆展出的一只霸王龙的化石</p>
</div>

这是可以的， <p>中包含了你需要的内容，以及方便使用 CSS 的一种很好的风格。但是这里有一个问题，从语义的角度上来讲，<img>和 <p>并没有什么联系，这会给使用屏幕阅读的人造成问题，比如当你有 50 张图片和其搭配的 50 段说明文字，那么一段说明文字是和哪张图片有关联的呢？

有一个更好的做法是使用 HTML5 的 <figure>和 <figcaption>元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。我们之前的例子可以重写为：

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
      alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
      width="400"
      height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

这个 <figcaption>元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了 <figure>元素的内容。

备注： 从无障碍的角度来说，说明文字和 alt 文本扮演着不同的角色。看得见图片的人们同样可以受益于说明文字，而 alt 文字只有在图片无法显示时才这样。所以，说明文字和 alt 的内容不应该一样，因为当图片无法显示时，它们会同时出现。尝试让你的图片不显示，看看效果如何。

注意 <figure>里不一定要是一张图片，可以是几张图片、一段代码、音视频、方程、表格或别的。只要是一个这样的独立内容单元即可：

• 用简洁、易懂的方式表达意图。
• 可以置于页面线性流的某处。
• 为主要内容提供重要的补充说明。

。。。无了，新知识就这一点，完全模仿页面就是审美和设计的问题了