3.4 HTML 图片

Web上最主要的 媒体(media)

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

.svg(矢量图)等。

语法

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

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

<p>
  Landing page background of techbrood:
  <br>
  <img src="http://wow.techbrood.com/assets/landing.jpg" width="700" height="375">
</p>

Landing page background of techbrood:

尺寸(Dimensions)

图片通过宽(width)高(height)来限定尺寸大小。

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

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

#块还是内联?

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

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


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

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

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