3.4 HTML 图片

图片 是Web上出现的第一种非文本内容。Web中使用的图片格式主要有： .jpg, .gif (通常是动画图片), .png (通常是透明背景的图片), .bmp（位图）

语法

图片 使用 <img> 元素，这是一个自关闭（self-closing） 元素（只有一个开始标签）。

src 属性定义图片的位置。和链接类似，你可以使用 相对 或 绝对 URL。

<p>
  Landing page background of xnip:
  <br>
  <img src="https://www.xnip.cn/wp-content/uploads/2021/07/landing.jpg" width="700" height="375">
</p>

Landing page background of xnip:

尺寸（Dimensions）

图片通过宽（width） 和 高（height）来限定尺寸大小。

默认情况浏览器会以全尺寸来显示图片。但我们可以通过img元素的宽高属性来改变其显示尺寸。上述例子中为图片指定了显示尺寸为宽700px*高375px，源图片的尺寸为宽1400px*高750px。

尽管可以直接在元素中改变显示尺寸，但出于内容和样式分离的考虑，我们推荐使用CSS来改变，后面的章节会讲解到。

#块还是内联？

我们可能会有疑问，图片拥有宽高属性，记得我们在前面的章节说过内联元素一般不能设置宽高属性，那么图片究竟是内联还是块元素呢？答案是内联。

这是因为 <img> 是一个自关闭（self-closing） 元素：技术上它不能包含任何其他HTML元素，所以只能被看作是一个内联元素。

<p>图片是有独立宽高属性的内联元素</p>
<p>
  在文本中插入一张
  <img src="frog.jpg">
  图片，要意识到可能会影响原有的行距。
</p>

图片是有独立宽高属性的内联元素

在文本中插入一张 图片，要意识到可能会影响原有的行距。