在构建网页时，图片是增加视觉效果和丰富内容的重要元素。一个设计精良的图片展示可以让你的网页更加生动有趣，避免显得空荡荡。下面，我将带你一步步学会如何使用HTML轻松地展示图片。
图片标签 <img>
HTML 中，用于插入图片的标签是 <img>。它是一个单标签，意味着不需要成对出现。以下是 <img> 标签的基本结构：
<img src="图片地址" alt="图片描述" width="图片宽度" height="图片高度">
src：图片的地址，可以是本地文件路径或者网络上的图片链接。alt：图片的替代文本，当图片无法加载时，浏览器会显示这个文本，对搜索引擎优化（SEO）也有帮助。width和height：图片的宽度和高度，可以用来控制图片的显示尺寸。
示例
假设你有一张名为 beach.jpg 的图片，位于同一目录下，你可以这样插入图片：
<img src="beach.jpg" alt="海滩风景" width="500" height="300">
图文混排
在HTML中，如果你希望图片和文字紧密排列，可以使用 <figure> 和 <figcaption> 标签。这样不仅可以使图片和文字紧密结合，还能为图片添加标题。
示例
<figure>
<img src="beach.jpg" alt="海滩风景" width="500" height="300">
<figcaption>这是一张美丽的海滩风景图片</figcaption>
</figure>
图片链接
HTML 中的 <a> 标签可以用来创建链接，而 <img> 标签也可以嵌入到 <a> 标签中，从而实现图片链接。
示例
<a href="http://www.example.com">
<img src="beach.jpg" alt="点击访问示例网站" width="500" height="300">
</a>
这样，当用户点击图片时，会跳转到指定的链接。
响应式图片
随着屏幕尺寸的变化，图片的显示效果也很重要。HTML5 引入了 <picture> 和 <source> 标签，使得网页能够根据不同的屏幕尺寸显示不同的图片。
示例
<picture>
<source media="(min-width: 600px)" srcset="large-beach.jpg">
<img src="small-beach.jpg" alt="海滩风景" width="500" height="300">
</picture>
在这个例子中，当屏幕宽度大于600像素时，会显示 large-beach.jpg；否则，显示 small-beach.jpg。
总结
通过以上方法，你可以轻松地在HTML中展示图片，让网页变得更加丰富多彩。记住，选择合适的图片、合理地布局，以及利用HTML5的新特性，可以让你的网页在众多网页中脱颖而出。