使用img标签插入图片需设置src和alt属性，路径分相对与绝对两种，可通过width、height或CSS控制尺寸，注意文件名、路径正确性及图片优化。
在网页中插入图片是HTML的基础操作之一，主要通过img标签实现。这个标签是自闭合的，不需要单独的结束标签。要正确显示图片，除了使用正确的语法，还需要设置好图片路径。下面详细介绍如何插入图片以及不同路径的设置方法。
1. 使用img标签插入图片
在HTML中插入图片的基本语法如下：
<img src="图片路径" alt="替代文字">其中：
- src：指定图片文件的路径，是必填属性。
- alt：当图片无法加载时显示的替代文字，对可访问性和SEO有帮助，建议始终填写。
示例：
立即学习“前端免费学习笔记（深入）”；
<img src="photo.jpg" alt="我的照片">2. 图片路径的设置方式
图片路径分为相对路径和绝对路径两种，选择合适的路径方式能让图片正确显示。
相对路径：相对于当前HTML文件的位置来定位图片。
- 图片与HTML文件在同一目录：
src="photo.jpg" - 图片在子文件夹中（如images文件夹）：
src="images/photo.jpg" - 图片在上级目录中：
src="../photo.jpg"
绝对路径：完整的网络地址或本地磁盘路径（一般用于线上项目）。
- 网络图片：
src="https://example.com/photo.jpg" - 本地绝对路径（不推荐用于发布网站）：
src="C:/Users/Name/Pictures/photo.jpg"
3. 设置图片大小与优化显示
可以通过width和height属性控制图片显示尺寸：
单位默认为像素。也可以在CSS中设置，更灵活：
<img src="photo.jpg" alt="我的照片" style="width: 300px; height: auto;">建议保持宽高比，避免图片变形。使用height: auto可以等比缩放。
4. 常见问题与注意事项
确保图片能正常显示，需注意以下几点：
- 检查文件名是否拼写正确，包括大小写和扩展名（如.jpg、.png）。
- 确认图片文件已上传到服务器或存在于指定路径。
- 尽量使用
alt属性，提升网页可访问性。 - 避免使用过大的图片，影响加载速度，建议提前压缩。
基本上就这些。掌握img标签和路径设置，就能在网页中灵活插入图片了。不复杂但容易忽略细节。
