怎样将一幅图片放到网页上?
我们可以用<img> 元素来把图片放到网页上。它是一个空元素（它不需要包含文本内容或闭合标签），最少只需要一个 src （一般读作其全称 source）来使其生效。src 属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对URL，就像 <a> 元素的 href 属性一样。
搜索引擎也读取图像的文件名并把它们计入SEO。因此你应该给你的图片取一个描述性的文件名：dinosaur.jpg 比 img835.png要好。
注意：像<img>和<video>这样的元素有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身。
备选文本
属性是 alt ，它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。
为什么我们需要备选文本呢？它可以派上用场的原因有很多：
用户有视力障碍
图片的路径或文件名拼错
浏览器不支持该图片类型
提供一些文字描述来给搜索引擎使用
用户关闭的图片显示以减少数据的传输
到底应该在 alt 里写点什么呢？这首先取决于为什么这张图片会在这儿
装饰：如果图片只是用于装饰，而不是内容的一部分，可以写一个空的alt=""
内容：如果你的图片提供了重要的信息，就要在alt文本中简要的提供相同的信息，甚至更近一步，把这些信息写在主要的文本内容里，这样所有人都能看见。
链接：如果你把图片嵌套在<a>标签里，来把图片变成链接，那你还必须提供无障碍的链接文本。
文本：你不应该将文本放到图像里。
宽度和高度
用宽度和高度属性来指定你的图片的高度和宽度，显示多大的图就放多大的图。
通过为图片搭配说明文字的方式来解说图片
使用 HTML5 的 <figure> 和 <figcaption> 元素，为图片提供一个语义容器，在标题和图片之间建立清晰的关联。
<figcaption> 元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了 <figure> 元素的内容.
注意 <figure> 里不一定要是一张图片，只要是一个这样的独立内容单元：
- 用紧凑、简洁的方式表达意图。
- 可以置于页面线性流的某处。
- 为主要内容提供重要的补充说明。
<figure> 可以是几张图片、一段代码、音视频、方程、表格或别的。
CSS 背景图片
CSS 属性 background-image 和另其他 background-* 属性是用来放置背景图片的。
CSS 背景图片只是为了装饰 — 如果你只是想要在你的页面上添加一些漂亮的东西，来提升视觉效果，那 CSS 的做法是可以的。但是这样插入的图片完全没有语义上的意义，它们不能有任何备选文本，也不能被屏幕阅读器识别。这就是 HTML 图片有用的地方了。