图片是网页内容的重要组成部分，能够使页面更加生动直观。在HTML中，使用<img>标签插入图片，而正确设置图片路径则是确保图片能够正常显示的关键。
一、图片标签（<img>）
1. 图片标签的基本语法
<img>标签是一个自闭合标签（空标签），不需要结束标签。基本语法格式如下：
<img src="图片路径" alt="图片描述">
2. 图片标签的核心属性
（1）src 属性
src（source的缩写）是图片标签最重要的属性，用于指定图片文件的路径（地址），浏览器会根据这个路径加载并显示图片。
示例：
<img src="image.jpg" alt="示例图片">
（2）alt 属性
alt（alternative的缩写）属性用于为图片提供替代文本，其主要作用包括：
当图片无法加载时（如路径错误或网络问题），会显示该文本
帮助屏幕阅读器（辅助工具）理解图片内容，提升无障碍性
有助于搜索引擎优化（SEO），让搜索引擎更好地理解图片内容
示例：
<img src="nature.jpg" alt="山间的瀑布和绿色植被">
注意：为图片添加有意义的alt文本是良好的开发实践，不应省略。
（3）width 和 height 属性
这两个属性用于指定图片的宽度和高度，单位通常为像素（px）。
示例：
<img src="photo.jpg" alt="示例照片" width="400" height="300">
注意事项：
如果只指定其中一个属性（width或height），浏览器会自动计算另一个属性值，保持图片的原始比例
建议通过CSS控制图片尺寸，而不是使用这两个属性
如果同时指定width和height且比例与原图不符，图片会被拉伸变形
（4）title 属性
title属性用于为图片添加额外的描述信息，当鼠标悬停在图片上时会显示该文本。
示例：
<img src="city.jpg" alt="城市天际线" title="夜晚的城市全景">
3. 图片标签完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片标签示例</title>
</head>
<body>
<h2>自然风光</h2>
<p>山脉图片：</p>
<img src="https://picsum.photos/id/29/600/400" alt="连绵的山脉和蓝天白云"
width="600" title="壮观的山脉景观">
<p>海洋图片：</p>
<img src="https://picsum.photos/id/1024/600/400" alt="蓝色的海洋和沙滩"
width="600" title="美丽的海滩景色">
</body>
</html>
二、图片路径详解
图片路径是src属性的值，用于告诉浏览器图片文件的位置。图片路径主要分为两类：相对路径和绝对路径。
1. 相对路径（Relative Path）
相对路径是指以当前HTML文件所在位置为基准，描述图片文件位置的路径。适用于网站内部的图片文件。
（1）图片与HTML文件在同一文件夹中
当图片文件和当前HTML文件位于同一个文件夹时，直接使用图片文件名作为路径。
示例：如果在index.html中引用同目录下的test.jpg（假设存在）：
<img src="test.jpg" alt="示例图片">
（2）图片在HTML文件的子文件夹中
当图片位于当前HTML文件所在文件夹的子文件夹中时，路径格式为：子文件夹名/图片文件名。
示例：在index.html中引用images文件夹下的logo.png：
<img src="images/logo.png" alt="网站logo">
（3）图片在HTML文件的多级子文件夹中
当图片位于更深层次的子文件夹中时，依次写出各级文件夹名称，用/分隔。
示例：在index.html中引用images/products文件夹下的product1.jpg：
<img src="images/products/product1.jpg" alt="产品1图片">
（4）图片在HTML文件的上级文件夹中
当图片位于当前HTML文件所在文件夹的上级文件夹中时，使用../表示向上一级文件夹，多个../表示向上多级。
示例1：在pages/contact.html中引用images文件夹下的banner.jpg：
<img src="../images/banner.jpg" alt="横幅图片">
（解释：contact.html在pages文件夹中，需要先向上一级到website文件夹，再进入images文件夹）
示例2：如果有更深层次的文件，如website/pages/sub/info.html引用images/logo.png：
<img src="../../images/logo.png" alt="网站logo">
（解释：../../表示向上两级文件夹）
2. 绝对路径（Absolute Path）
绝对路径是指完整的图片地址，包括协议（如http://、https://）和完整的目录结构。适用于引用外部网站的图片或内部网站的固定位置图片。
（1）外部网站图片的绝对路径
引用其他网站的图片时，必须使用完整的绝对路径。
示例：
<img src="https://picsum.photos/id/10/800/600" alt="示例图片">
（2）内部网站图片的绝对路径
对于自己网站的图片，绝对路径通常从网站根目录开始，以/开头。
示例：假设网站域名为https://www.example.com，在任何页面中引用images/logo.png：
<img src="/images/logo.png" alt="网站logo">
这相当于：https://www.example.com/images/logo.png
3. 相对路径与绝对路径的对比
相对路径优点：
路径简短，易于书写和管理
当整个网站文件夹移动到其他位置或服务器时，路径仍然有效
适合网站内部图片的引用
相对路径缺点：
当HTML文件或图片文件的位置发生变化时，路径可能需要修改
不适合引用外部网站的图片
绝对路径优点：
路径明确，不会因HTML文件位置变化而失效
适合引用外部网站的图片
在大型网站中，使用从根目录开始的绝对路径便于管理
绝对路径缺点：
路径较长，书写不便
当网站域名或目录结构变化时，路径需要修改
本地开发时，引用外部绝对路径图片需要联网
4. 路径使用的注意事项
路径区分大小写：在Linux和macOS系统中，文件和文件夹名称区分大小写（如Logo.png和logo.png是不同的文件），Windows系统不区分，但建议保持一致
避免使用中文文件名：虽然现代浏览器支持中文文件名，但可能在某些服务器环境中出现问题，建议使用英文、数字和下划线
路径中的空格：尽量避免在文件或文件夹名称中使用空格，如必须使用，浏览器通常会自动处理，但最好用下划线代替
正确使用斜杠：HTML中统一使用正斜杠/表示路径分隔，不要使用反斜杠\（Windows系统文件管理器使用反斜杠，但网页中不适用）
检查路径正确性：图片无法显示时，首先检查路径是否正确，可以通过浏览器开发者工具（F12）的控制台查看错误信息
三、图片格式与使用建议
1. 常见图片格式
JPG/JPEG：适合照片等色彩丰富的图片，压缩率高，但不支持透明背景
PNG：支持透明背景，适合图标、Logo等，压缩率低于JPG，文件体积较大
GIF：支持动画和透明背景，色彩最多256种，适合简单动画
WebP：现代图片格式，压缩效率高于JPG和PNG，支持透明和动画，但旧浏览器可能不支持
SVG：矢量图格式，放大不失真，适合图标、Logo等，文件体积小
2. 使用图片的最佳实践
为图片添加有意义的alt属性，提升无障碍性和SEO
优化图片大小：过大的图片会影响页面加载速度，应适当压缩
使用合适的图片格式：根据图片内容选择最优格式
考虑响应式图片：使用CSS或srcset属性使图片在不同设备上正确显示
避免使用过大尺寸的图片然后通过width/height属性缩小显示，这会浪费带宽
四、综合示例：图片标签与路径
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片路径综合示例</title>
</head>
<body>
<h2>不同路径的图片引用示例</h2>
<h3>1. 相对路径 - 子文件夹中的图片</h3>
<p>引用images文件夹下的图片：</p>
<img src="images/logo.png" alt="网站logo" width="200">
<h3>2. 相对路径 - 多级子文件夹中的图片</h3>
<p>引用images/products文件夹下的图片：</p>
<img src="images/products/product1.jpg" alt="产品图片" width="400">
<h3>3. 绝对路径 - 外部网站图片</h3>
<p>引用外部服务器上的图片：</p>
<img src="https://picsum.photos/id/26/600/400" alt="森林景色" width="600">
<h3>4. 绝对路径 - 网站根目录图片</h3>
<p>从网站根目录引用图片：</p>
<img src="/images/banner.jpg" alt="网站横幅" width="800">
</body>
</html>
五、总结
图片是网页设计中不可或缺的元素，掌握<img>标签的使用和图片路径的设置是基础且重要的技能：
<img>标签的核心属性是src（图片路径）和alt（替代文本）
图片路径分为相对路径和绝对路径，各有适用场景
相对路径以当前HTML文件位置为基准，适合网站内部图片引用
绝对路径是完整的图片地址，适合引用外部图片或内部固定位置图片
使用图片时应注意路径的正确性、图片格式的选择和图片的优化
正确使用图片标签和路径，能够确保图片在网页中正常显示，提升用户体验和网页质量。