图片是网页设计中不可或缺的元素，它们能让网页内容更加丰富和吸引人，在HTML中，图片的插入和使用非常简单，主要通过<img>标签来实现，下面，就让我们一起如何巧妙地使用这个标签，让你的网页更加生动有趣。

你需要了解<img>标签的基本用法，这个标签不接受任何结束标签，只需要一个开始标签，后面跟着一个src属性，这个属性的值就是图片的URL地址，你想在你的网页上显示一张名为"example.jpg"的图片，你可以这样写：

<img src="example.jpg" alt="描述性文字">

这里的alt属性非常重要，它为图片提供了替代文本（alternative text），当图片无法显示时，这个文本会显示出来，同时对于搜索引擎优化（SEO）和屏幕阅读器用户也非常有用。

除了基本的图片显示，<img>标签还有许多其他属性可以帮助你更好地控制图片的显示效果：

1、宽度和高度：通过width和height属性，你可以指定图片的显示尺寸。

<img src="example.jpg" alt="描述性文字" width="300" height="200">

这会将图片显示为300像素宽和200像素高。

2、对齐方式：使用align属性可以设置图片的对齐方式，不过需要注意的是，这个属性在HTML5中已经不推荐使用，更现代的方法是通过CSS来控制。

3、边框：border属性可以给图片添加边框，

<img src="example.jpg" alt="描述性文字" border="5">

这会给图片添加一个5像素的边框。

4、使用CSS进行样式控制：虽然<img>标签有一些内联样式属性，但更灵活和强大的方法是使用CSS，你可以设置图片的边框、阴影、圆角等：

img {
  border: 5px solid #000;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  border-radius: 10px;
}

5、响应式图片：为了让图片在不同设备上都能良好显示，可以使用srcset和sizes属性。srcset属性允许你为不同的屏幕分辨率指定不同的图片源，而sizes属性则定义了不同屏幕尺寸下图片的宽度。

<img src="example.jpg" alt="描述性文字" srcset="example-small.jpg 500w, example-medium.jpg 1000w, example-large.jpg 1500w" sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px">

6、懒加载：懒加载是一种性能优化技术，可以让图片在滚动到视图中时才开始加载，减少页面加载时间，这通常通过JavaScript实现，但HTML5提供了loading属性来实现懒加载：

<img src="example.jpg" alt="描述性文字" loading="lazy">

通过这些方法，你可以有效地控制图片的显示效果，提升网页的用户体验，记得，合理使用图片和优化图片加载，可以让你的网页更加快速和吸引人，这些技巧，你的网页设计之路将更加顺畅。