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.comimages 目录中的名为 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">

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

HTML 图片标签

标签 描述
<img> 定义图像。
<map> 定义图像映射。
<area> 定义图像映射内的可单击区域。