这是我参与「第四届青训营 」笔记创作活动的的第11天
HTML中的图片
对于一个HTML网页，仅仅只有文字会显得十分单调乏味。好在HTML提供了一系列的标签，帮助我们嵌入更多的多媒体文件。
如何将一幅图片放到网页上？
我们可以利用<img>元素来将图片放到网页上。这是一个空元素，意味着它不需要包含文本内容或者闭合标签。在<img>元素中，我们可以用src属性指向我们想要引入的图片的路径，可以是相对路径或者绝对URL，类似于<a>元素的href属性。例如：
<!--相同路径下-->
<img src="dinosaur.jpg">
<!--在HTML页面同路径的images文件夹下-->
<img src="images/dinosaur.jpg">
<!—使用绝对路径（不推荐）-->
<img src="https://www.example.com/images/dinosaur.jpg">
注意：像<img>和<video>这样的元素有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源所定义，而不是元素自身。
备选文本
在元素<img>中，有这样一个属性alt，它的值是对图片的文字描述，用于在图片无法显示或者不能被看到的情况。例如：
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth">
为什么我们需要备选文本呢？它派上用场的原因主要有：
- 用户有视力障碍，用屏幕阅读器来浏览网页。
- 因各种原因导致图片无法正常显示。
- 浏览器不支持该图片类型。
- 提供给搜索引擎，便于搜索引擎进行匹配。
本质上，关键在于图片无法被看见时，也能提供一个可用的体验，这确保了所有人都不会错失一部分内容。
宽度和高度
你可以用宽度和高度属性来指定你的图片的宽度和高度。例如：
<img src="images/dinosaur.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="400"
height="341">
这样做的目的是在图片没有加载完之前，为要显示的图片预留一定空间。但需注意的是，你对图片宽高的设置会影响最终图片展示的效果，或许会模糊、扭曲等。
Image titles图片标题
你可以给图片增加title属性来提供需要更进一步的支持信息。例如：
<img src="images/dinosaur.jpg"
alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
width="400"
height="341"
title="A T-Rex on display in the Manchester University Museum">
这会给我们一个鼠标悬停提示，看起来就像链接标题。
事实上title属性并不是推荐的，其适用范围限制了他的作用。大多数浏览器是不会显示它的，除非在鼠标悬停的时候。
通过为图片搭配说明文字的方式来解说图片
使用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> 元素的内容。
注意：<figure>里不一定要是一张图片，只要是一个这样的独立内容单元：
-
用简洁、易懂的方式表达意图。
-
可以置于页面线性流的某处。
-
为主要内容提供重要的补充说明。
<figure>可以是几张图片、一段代码、音视频、方程、表格或其他。
CSS背景图片
你也可以使用CSS把图片嵌入网站中，这个CSS属性background-image和另其他background-*属性是用来放置背景图片的。例如，为页面中所有段落设置一个背景图片：
p {
background-image: url("images/dinosaur.jpg");
}
总而言之，如果图像对您的内容里有意义，则应使用 HTML 图像。如果图像纯粹是装饰，则应使用 CSS 背景图片。
