参考：HTML中的图像
1、我们如何在网页上放置图像？
注意：元素<img>和 <video>有时被称为替换元素。这是因为元素的内容和大小由外部资源（如图像或视频文件）定义，而不是由元素本身的内容定义。
例如：
1 <img src="images/dinosaur.jpg" 2 alt="The head and torso of a dinosaur skeleton; 3 it has a large head with long sharp teeth">
举例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Images in HTML</title> 6 </head> 7 <body> 8 <h1>Images in HTML</h1> 9 10 <img src="dinosaur.jpg" 11 alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" 12 width="400" 13 height="341" 14 title="A T-Rex on display in the Manchester University Museum"> 15 </body> 16 </html>
输出结果：
1.1 替代文字（alt）
我们将看到的下一个属性是alt。它的值应该是图像的文本描述，用于无法查看/显示图像的情况。例如，我们上面的代码可以像这样修改：
1 <img src="images/dinosaur.jpg" 2 alt="The head and torso of a dinosaur skeleton; 3 it has a large head with long sharp teeth">
测试alt文本的最简单方法是故意拼错您的文件名。例如，如果我们的图像名称已拼写 dinosooooor.jpg，则浏览器将不显示图像，而是显示替代文字：
1.2 宽度和高度
可以使用width和height属性指定图像的宽度和高度。您可以通过多种方式找到图像的宽度和高度。例如，在Mac上，您可以使用Cmd+ I来显示图像文件的信息。回到我们的例子，我们可以这样做：
1 <img src="images/dinosaur.jpg" 2 alt="The head and torso of a dinosaur skeleton; 3 it has a large head with long sharp teeth" 4 width="400" 5 height="341">
在正常情况下，这不会对显示器产生太大影响。但是，如果没有显示图像，例如，用户刚刚导航到该页面，并且图像尚未加载，您会注意到浏览器正在为图像留出空间：
1.3 图片标题
作为与链接，你也可以添加title属性的图像，如果需要进一步提供支持信息。在我们的示例中，我们可以这样做：
1 <img src="images/dinosaur.jpg" 2 alt="The head and torso of a dinosaur skeleton; 3 it has a large head with long sharp teeth" 4 width="400" 5 height="341" 6 title="A T-Rex on display in the Manchester University Museum">
这为我们提供了鼠标悬停的工具提示，就像链接标题一样
但是，这不建议 - title有许多可访问性问题，主要是因为屏幕阅读器支持非常难以预测，大多数浏览器都不会显示它，除非你用鼠标悬停（例如，无法访问键盘用户） ）。如果您对此有关的更多信息感兴趣，请阅读Scott O‘Hara 的标题属性的试验和磨难。
最好在主要文章文本中包含此类支持信息，而不是附加到图像。
2、用图形和图形标注注释图像编辑
说到字幕，可以通过多种方式添加标题以与图像一起使用。例如，没有什么可以阻止你这样做：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Images in HTML</title> 6 </head> 7 <body> 8 9 <div class="figure"> 10 <img src="dinosaur.jpg" 11 alt="The head and torso of a dinosaur skeleton; 12 it has a large head with long sharp teeth" 13 width="400" 14 height="341"> 15 16 <p>A T-Rex on display in the Manchester University Museum.</p> 17 </div> 18 19 </body> 20 </html>
还行吧。它包含您需要的内容，并且使用CSS可以很好地设置样式。但是这里存在一个问题：没有任何语义将图像链接到其标题，这可能会给屏幕阅读器带来问题。例如，当您有50个图像和标题时，哪个标题与哪个图像一致？
更好的解决方案是使用HTML5 <figure>和<figcaption>元素。这些是为了这个目的而创建的：为图形提供语义容器，并清楚地将图形链接到标题。我们上面的例子可以像这样重写：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Images in HTML</title> 6 </head> 7 <body> 8 9 <figure> 10 <img src="dinosaur.jpg" 11 alt="The head and torso of a dinosaur skeleton; 12 it has a large head with long sharp teeth" 13 width="400" 14 height="341"> 15 16 <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> 17 </figure> 18 19 </body> 20 </html>
该<figcaption>元素告诉浏览器和辅助技术，标题描述<figure>元素的其他内容。
注意：从辅助功能的角度来看，标题和alt文本具有不同的角色。即使是能够看到图像的人，字幕也会受益，而 alt文本则提供与缺少图像相同的功能。因此，字幕和alt文字不应该只是说同样的事情，因为它们都会在图像消失时出现。尝试在浏览器中关闭图像并查看其外观。
图形不一定是图像。它是一个独立的内容单元：
- 以紧凑，易于掌握的方式表达您的意思。
- 可以在页面的线性流程中的几个位置。
- 提供支持正文的基本信息。
一个数字可以是几个图像，代码片段，音频，视频，方程式，表格或其他东西。
3、CSS背景图片
还可以使用CSS将图像嵌入到网页（和JavaScript，但这完全是另一个故事）。CSS background-image属性和其他background-*属性用于控制背景图像放置。例如，要在页面上的每个段落上放置背景图像，您可以执行以下操作：
1 p {
2 background-image: url("images/dinosaur.jpg");
3 }
得到的嵌入图像可以说比HTML图像更容易定位和控制。那么为什么要烦扰HTML图像呢？如上所述，CSS背景图像仅用于装饰。如果你只是想在你的页面上添加一些漂亮的东西来增强视觉效果，这很好。但是，这些图像根本没有语义含义。它们不能有任何文本等价物，对于屏幕阅读器是不可见的等等。这是HTML图像时间闪耀！
总结：如果图像具有含义，就您的内容而言，您应该使用HTML图像。如果图像纯粹是装饰，则应使用CSS背景图像。
注意：您将在我们的CSS主题中学习更多关于CSS背景图像的知识。
原文地址：https://www.cnblogs.com/zyjhandsome/p/9775622.html