HTML 图片

图像改善了外观并直观展示了网页的许多概念。

在 HTML 文档中插入图像

网络不仅仅是文本，它的多媒体和 HTML 的多媒体功能允许你在网页中包含图像，音频剪辑，视频剪辑和其他多媒体元素。

<img> 标签是用来在 HTML 文档中插入图片。它是一个空元素，仅包含属性。 <img> 标签的语法如下：

<img src="url" alt="some_text">

以下示例在网页上插入三个图像：

<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Hot Air Balloons">

注： 同 <br> 一样图像 <img> 元素也是空元素，并没有闭合标签。在 XHTML 中，它以 /> 结尾。

图像的 Src 属性

每个图像都有一个 src 属性（src 代表源代码）。src 属性告诉浏览器在哪里可以找到要显示的图像。作为 src 属性值提供的图像的 URL 指向存储图像的位置。

例如，位于 www.tastones.com 上 images 目录中的名为 sky.jpg 的图像具有以下 URL： http://www.tastones.com/images/sky.jpg

<img url =“http://www.tastones.com/images/sky.jpg” alt= `Sky` \>

图像的 Alt 属性

如果无法显示图像，则 alt 属性是图像的替代描述。alt 属性的值是作者定义的文本。

<img url =“http://www.tastones.com/images/kites.jpg” alt=“Sky kites”\>

**注意：**如果由于某种原因的用户由于连接速度慢， src 属性错误或用户使用屏幕阅读器而无法查看图像，则 alt 属性会为图像提供备用信息。

设置图像的宽度和高度

width 和 height 属性用于指定图像的高度和宽度。

默认情况下，属性值以像素为单位指定。

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Hot Air Balloons" width="200" height="200">

注意： 指定图像的两个 width 和 height 属性是一个好习惯。如果没有这些属性，图像会加载其原始大小，这可能会导致网站布局失真或闪烁。

HTML 图片标签