在HTML中，图片引用是一种将图像嵌入网页的方法，通过使用<img>标签，可以将图片文件与网页内容关联起来，使得在浏览器中查看网页时，图片能够显示在指定的位置，图片引用在网页设计中起着至关重要的作用，因为它可以增强视觉效果，吸引用户的注意力，提高用户体验。
我们需要了解<img>标签的基本语法。<img>标签是一个空标签，意味着它不需要闭合标签，其基本语法如下：
<img src="图片文件路径" alt="替代文本">
src属性用于指定图片文件的路径，可以是相对路径、绝对路径或外部链接。alt属性则用于为图片提供替代文本，当图片无法显示时，浏览器会显示这段文本，这对于提高网页的可访问性非常重要，特别是对于视觉障碍用户和搜索引擎优化（SEO）。
接下来，我们来看一个实际的例子，假设我们有一个名为"example.jpg"的图片文件，位于与HTML文件同一目录下的"images"文件夹中，我们可以通过以下代码将该图片嵌入网页：
<img src="images/example.jpg" alt="示例图片">
在浏览器中查看此网页时，用户将看到"example.jpg"图片显示在页面上，如果图片无法加载，用户将看到"示例图片"这个替代文本。
除了基本的图片引用之外，还可以使用<img>标签的其他属性来控制图片的显示效果。width和height属性可以用于指定图片的宽度和高度，如下所示：
<img src="images/example.jpg" alt="示例图片" width="300" height="200">
这将使图片的宽度为300像素，高度为200像素，需要注意的是，为了保持图片的原始比例，通常只设置宽度或高度中的一个属性，另一个属性将自动调整。
还可以使用title属性为图片添加鼠标悬停时显示的提示信息。
<img src="images/example.jpg" alt="示例图片" title="将鼠标悬停在图片上查看提示">
当用户将鼠标悬停在图片上时，浏览器将显示"将鼠标悬停在图片上查看提示"这段文本。
HTML中的图片引用是一种将图像嵌入网页的有效方法，通过使用<img>标签及其属性，我们可以轻松地在网页中插入图片，并控制其显示效果，这不仅有助于提高网页的美观程度，还能增强用户体验，提高网站的访问量。