一、今日学习目标
- 掌握
img图片标签语法结构、单标签特性及五大核心属性用法与书写规范。 - 熟记主流图片格式特点、适用场景，理解图片格式对 HTML 引用是否存在影响。
- 掌握绝对路径、相对路径、网络路径的书写格式、层级规则及各自优缺点。
- 区分 HTML 原生
width/height与 CSS 样式中加不加px的区别，掌握图片不变形设置方法。 - 规范标签属性书写格式，掌握属性间隔、属性值引号等编码规范。
- 掌握图片嵌套超链接、去除默认蓝色边框的写法。
- 理解图片懒加载
loading属性作用、语法与使用场景。 - 掌握 Base64 图片概念、优缺点及适用场景。
- 学会图片自适应布局、清除图片默认底边留白问题。
- 掌握相对路径多级上级
../../多层级跳转写法。
二、核心知识详解
2.1 图片标签基础语法
img为单标签，无闭合标签，同时属于行内块元素，兼具行内元素可同行排列、块元素可设置宽高的特性。HTML5 规范中自闭合标签可省略末尾/，直接书写即可。
基础语法结构：
<img 属性1="值" 属性2="值" 属性3="值">书写规范：
- 多个属性之间只用空格隔开，禁止用逗号分隔。
- 所有属性值统一使用双引号包裹。
- 属性书写无固定先后顺序。
2.2 img 核心属性
常用核心属性包含：src、alt、width、height、title，现代开发还常用loading、srcset拓展属性。
| 属性 | 作用 | 书写位置 |
|---|---|---|
| src | 指定图片路径地址，浏览器依据路径加载图片 | 标签内部，必填核心属性 |
| alt | 图片加载失败时显示替代文本，兼顾无障碍访问与 SEO | 标签内部，开发建议必写 |
| width | 控制图片宽度尺寸 | 可写标签属性，推荐改用 CSS 控制 |
| height | 控制图片高度尺寸 | 可写标签属性，推荐改用 CSS 控制 |
| title | 鼠标悬浮图片上时，显示提示文字 | 标签内部，可选属性 |
| loading | 图片懒加载，设置loading="lazy"滚动到可视区域才加载，优化页面首屏加载性能 | 标签内部，优化性能常用 |
| srcset | 响应式多分辨率适配，为不同屏幕设备加载不同尺寸图片，适配高清屏 | 标签内部，响应式开发常用 |
title 仅做鼠标悬浮提示，不能替代 alt；alt 专供读屏软件、搜索引擎和图片加载失败兜底使用。
2.3 width、height 加不加 px 区别
1.HTML 标签原生属性
正确写法：
<img width="400" height="300">错误写法：
<img width="400px" height="300px">规则：HTML 原生宽高只能写纯数字，默认单位为像素，不能加 px。
2.CSS 样式写法
正确写法：
width: 400px; height: 300px;错误写法：
width: 400; height: 300;规则：CSS 设置宽高必须带 px 单位，无单位样式直接失效。
3.图片变形与布局规则
- 只单独修改 width 或 height：图片自动等比例缩放，不会变形。
- 同时手动修改 width 和 height：若与原图比例不一致，图片会拉伸、压缩产生变形。
- 开发规范：宽高样式优先使用 CSS 控制，不建议在标签内写宽高属性。
- img 行内块特性会导致图片底部出现默认几像素留白，常用解决方案：给图片设置
display: block;或给父容器设置font-size: 0;。
2.4 常见图片格式及作用
- JPG/JPEG：有损压缩，体积小、色彩丰富，不支持透明，适用于人物、风景摄影类图片。
- PNG：无损压缩，支持透明背景，体积偏大，适用于图标、Logo、透明素材。
- GIF：支持动态效果，色彩数量有限，适用于表情包、简易小动画。
- WebP：高压缩率，体积比 JPG/PNG 更小，支持透明与动图，是网页开发首选格式，企业项目优先使用。
- SVG：矢量图形，放大缩小永不失真，可直接嵌入 HTML 代码，适用于图标、品牌 Logo。
规则：图片格式不影响 HTML 语法引用，只影响图片体积、清晰度、透明效果、动态效果。网页开发禁止使用 BMP 格式，无压缩、体积过大，严重影响加载速度。
将图片编码为文本字符的 Base64 格式，可直接赋值给 src 无需单独图片文件；优点是减少网络请求次数，适合小图标、小装饰图，缺点是大图会造成 HTML 代码臃肿、页面加载变慢，仅适合小尺寸图片使用。
2.5 图片路径分类及用法
路径作用：告知浏览器图片文件存放位置，路径书写错误会直接导致图片无法加载。
1. 相对路径（项目开发最常用）
以当前 HTML 文件为参照，定位图片位置。
- 同级目录：图片与 HTML 文件在同一文件夹，写法：
src="图片名.后缀" - 下级目录：图片存放在当前文件夹的子文件夹中，写法：
src="文件夹名/图片名.后缀" - 上级目录：图片在当前文件夹的上一级目录，写法：
src="../图片名.后缀" - 多级上级目录：往上几层就写几个
../，上两级：../../图片名.后缀，上三级：../../../图片名.后缀
优点：项目整体迁移、上传服务器，只要文件夹结构不变，图片可正常显示。
缺点：若调整文件夹层级，需同步修改对应路径代码。
2. 绝对路径
从电脑磁盘根目录开始的完整路径，示例：C:\Users\xxx\Desktop\html\images\test.jpg
优点：本机固定位置可直接访问。
缺点：更换电脑、部署到服务器立马失效，正式项目禁止使用。
3. 网络路径
引用互联网在线图片地址，以http/https开头。
优点：无需本地存放图片，直接调用线上资源。
缺点：依赖网络环境，线上原图删除或地址变更后，本地无法加载；存在防盗链裂图风险，正式项目不随意引用外网图片。
2.6 图片嵌套超链接与边框处理
日常开发中常给图片添加超链接，用 a 标签直接包裹 img 标签即可：
<a href="跳转地址"> <img src="图片路径" alt="图片描述"> </a>a 标签包裹图片后会默认自带蓝色边框，去除边框常用两种方式：
- 标签属性写法：
<img src="" border="0">- CSS 全局写法：
img { border: none; }2.7 图片自适应与懒加载规范
网页、移动端通用图片自适应样式，可实现大图不溢出容器、自动等比例缩放：
img { max-width: 100%; height: auto; display: block; }图片懒加载适合长页面、非首屏列表图片，能有效提升首屏加载速度，语法示例：
<img src="images/banner.jpg" loading="lazy" alt="轮播图">2.8 图片开发命名规范
- 图片文件名：全部小写，用下划线 / 横线分隔，如
logo.png、banner_01.jpg。 - alt 属性：简洁描述图片内容，不建议空值
alt=""，不利于 SEO 和无障碍访问。
三、今日学习易错点总结
img是单标签，无需手动添加闭合标签；标签属性只能用空格分隔，严禁用逗号。- HTML 标签内宽高不能加
px，CSS 样式宽高必须加px，两种写法规则不可混淆。 - 同时设置
width和height极易造成图片变形，遵循只改一个、自动等比例缩放原则。 - 实际网页开发统一使用相对路径，坚决不用本地绝对路径。
- 相对路径层级易出错：同级直接写文件名，下级拼接文件夹名 /，上级固定用
../。 src为必填属性，alt开发规范建议必写，提升网页兼容性与无障碍体验。- img 是行内块元素，默认底部有留白，用
display:block可清除留白。 - a 标签包裹图片会自带蓝色默认边框，必须设置去除边框样式。
- 相对路径多层向上跳转，按层级对应书写
../../，层数写错图片直接失效。 - 懒加载
loading="lazy"只适合长页面非首屏图片，优化性能。 - 大尺寸图片不建议使用 Base64，会增加页面体积、拖慢加载。
- 正式项目禁止随意引用外网网络图片，避免防盗链裂图风险。
