在构建网页时，图片是增强视觉效果和传达信息的重要元素。HTML 提供了简单的标签来引用图片，下面我们将深入探讨如何使用 <img> 标签以及一些高级技巧。
基本用法
首先，让我们复习一下引用图片的基本代码：
<img src="图片的路径" alt="图片描述">
这里，src 属性是必需的，它指定了图片的位置。这个路径可以是相对路径（相对于当前页面的路径），也可以是绝对路径（例如完整的URL）。alt 属性则提供了图片的替代文本，这在图片无法加载时显示给用户，同时也对网站的可访问性和搜索引擎优化（SEO）有益。
示例
假设你有一个图片文件 example.jpg 存放在同一个目录下，你的代码可以是这样的：
<img src="example.jpg" alt="示例图片">
如果图片位于另一个目录中，比如 images/，则需要使用相对路径：
<img src="images/example.jpg" alt="示例图片">
对于网络图片，路径可以是完整的URL：
<img src="http://example.com/images/example.jpg" alt="示例图片">
高级技巧
图片尺寸
如果你知道图片的确切尺寸，可以在标签中添加 width 和 height 属性来指定图片的大小：
<img src="example.jpg" alt="示例图片" width="100" height="100">
请注意，调整图片大小时可能会影响图片质量。
图片对齐
align 属性可以用来控制图片在文本中的对齐方式：
align="left"：图片将左对齐align="right"：图片将右对齐align="center"：图片居中对齐
然而，使用 align 属性并不是最佳实践，因为它会破坏文档的语义结构。更好的做法是使用CSS样式。
替代文本的重要性
良好的替代文本不仅帮助那些使用屏幕阅读器的用户，还能改善SEO。例如：
<img src="infographic.jpg" alt="年度销售图表，展示了2019年的收入增长趋势">
CSS样式
为了更好地控制图片的显示，可以使用CSS：
<img src="example.jpg" alt="示例图片" class="responsive-image">
然后在CSS中定义.responsive-image类的样式：
.responsive-image {
max-width: 100%;
height: auto;
}
这样图片就会在保持其原始宽高比的情况下，宽度不超过其容器的宽度。
总结
使用 <img> 标签引用图片是HTML的基础，但通过理解其属性和高级技巧，你可以创建更加丰富和交互式的网页。记住，始终为图片提供有意义的替代文本，并考虑使用CSS来控制图片的显示。