可以在HTML文档中包含图像。这是通过使用img HTML元素来完成的。她是一个简单的例子：

<img src="myImage.png">

src属性包含要包含的图像的URL。该图像包含在文档中img元素所在的位置。

这是此HTML文档中包含的示例图像：

我们也可以使用CSS设置图像样式。可以使用img元素上的HTML属性和CSS属性来设置图像的某些样式。我更愿意在可能的情况下使用CSS属性。有些方面甚至只能通过CSS设置样式(例如margin)。

图像格式

浏览器目前支持4种不同的图像格式：

• .jpeg
• .gif
• .png
• SVG

JPEG最初最适合照片。它是包含图像有损压缩的格式，因此当JPEG压缩时，图像质量会降低。

GIF图像最多只能包含256种不同的颜色。因此，GIF通常用于创建具有较少色差的更简单图像。 GIF还可以压缩图像，但是压缩是无损的，这意味着在解压缩后，图像将以完整质量显示。 GIF图像也可以设置动画，这意味着我们可以将多个图像打包到同一GIF图像中，并将它们显示为动画。

PNG(便携式网络图形)是一种开放标准，旨在替代不是开放标准的JPEG和GIF。

SVG是可伸缩矢量图形的缩写。它是矢量图形格式，而不是像素图像格式。矢量图形是使用矢量定义的，这些矢量包括线条，曲线等。因此，矢量图像由形状(线条，正方形，三角形，圆形等)组成。作为形状的定义，可以缩放这些形状，这意味着可以放大和缩小矢量图形图像，而不会看起来很糟。

像素图像是使用二维点阵来定义的。图像中的每个点(像素)都有一种颜色。通常放大这种图像的方式是，只需在屏幕上将图像的1点(像素)显示为2x2(4)像素或者4x4(16)像素等。当放大像素图像时，图像通常会开始看起来像块。

在HTML页面中包含SVG图形的方法与像素图像有些不同。此文本仅包括像素图像。我们可以在我的SVG教程中阅读有关SVG的更多信息。

img元素

要将图像包含在HTML文档中，我们需要使用如上所示的img元素：

<img src="myImage.png">

img元素的src属性包含图像的URL。我们可以使用相对URL或者完整URL。相对URL将被解释为相对于HTML文档的URL。

这是使用img元素包含的图像：

alt属性

img元素具有名为alt的属性。此属性提供有关所使用图像的替代信息。如果无法正确显示图像或者由盲人使用的页面阅读器朗读，则可以显示此信息。

Google和其他搜索引擎还使用alt属性的值来查找网页内容。

这是带有alt属性的img示例：

<img src="myImage.png" alt="A diagram of XYZ">

高度和宽度属性

高度和宽度属性用于告诉浏览器我们希望图像在HTML文档中占据多少空间。这是一个例子：

<img src="myImage.png" width="200" height="300">

此示例告诉浏览器将图像缩放为宽度200像素，高度300像素。像素是屏幕上的一个点。

保持图像宽高比

将图像缩放到特定的宽度和高度时，可能会破坏图像的自然宽度和高度之间的原始宽高比。

我们也可以设置width属性或者height属性。如果这样做，浏览器通常会将图像缩放到给定的宽度或者高度，同时保留宽度和高度之间的宽高比。这是两个示例：

<img src="myImage.png" width="200">

<img src="myImage.png" height="300">

这是之前的图片，宽度为500，高度为200：

我们还可以使用CSS的width和height属性设置图片的宽度和高度。

边框属性

当在浏览器中显示时，border属性设置图像周围的边框粗细。这是一个例子：

<img src="myImage.png" border="1">

本示例在图像周围创建一个1像素宽的边框。如果我们希望没有边框，请将" border"属性值设置为" 0"。

这是一个边框为2个像素的图像示例：

我们可以使用borderCSS属性对图像进行更多的边框样式设置。

图片作为链接

通过将img元素嵌入到a元素中，可以将图像用作链接。这是一个例子：

<a href="newPage.html"><img src="anImage.png" border="0"></a>

这是浏览器中的示例：

该图像现在是一个链接。我们可以将鼠标移到其上方，然后查看指针如何变为特征手。我们可以单击该图像，但是该链接仅会将我们带回到此页面。

注意" border"属性如何设置为" 0"。某些浏览器用作链接时，会在图像周围创建蓝色边框。要删除该蓝色边框，可以将" border"属性设置为" 0"。

对齐属性

img元素具有align属性，该属性定义了图像后面的文本应如何环绕图像。这是一个例子：

<img src="myImage.png" align="right" width="200">

当包含在真实的HTML页面中时，上述代码如下所示：

这是很多文本，它们很好地软件包在此处显示的图像旁边。这是很多文本，它们很好地软件包在此处显示的图像旁边。这是很多文本，它们很好地软件包在此处显示的图像旁边。这是很多文本，它们很好地软件包在此处显示的图像旁边。这是很多文本，它们很好地软件包在此处显示的图像旁边。这里有很多文字很好地软件包在此处显示的图像旁边。

如我们所见，图像在文本的右侧对齐，该文本在图像旁边流动，而不是在图像下方再次开始，如果省略了align属性，这是默认设置。

这是我们可以在align属性中使用的值的列表：

其中，左右对齐可能是我们最常使用的对齐方式。无论如何，一旦开始制作精美的布局，最好使用CSS。因此，我省略了其余属性的说明。