img用来在网页插入图片image 的缩写。img是单标签没有结束标签/img。 注意img 标签写在body里面不要写到 head。基础语法img src图片地址 alt图片描述文字img 核心属性属性作用是否必须srcsource图片的地址路径告诉浏览器图片在哪里✅必须altalternative图片替代文本。图片加载失败时页面显示这段文字给读屏软件识别图片含义✅建议必写width设置图片宽度可以写像素 px只写宽度高度会自动等比例缩放可选height设置图片高度像素 px尽量不要同时乱改宽高图片会拉伸变形可选title鼠标悬浮在图片上弹出提示文字全局属性可选1、src 图片路径最重要src 填写图片的地址分绝对路径网络图片和相对路径本地电脑图片。① 网络图片互联网上的图片地址直接复制图片完整 url 地址https 开头直接可以使用不需要本地存图片。 示例!DOCTYPE html html langzh‑CN head meta charsetUTF‑8 title图片演示/title /head body !-- 网络图片直接写完整网址 -- img srchttps://picsum.photos/id/10/400/250 alt风景照片 /body /html解释srchttps://picsum.photos/id/10/400/250网上图片完整地址。alt风景照片万一网络不好图片打不开页面位置显示文字 “风景照片”。② 本地图片自己电脑上的图片相对路径项目文件夹结构举例网页文件夹 ├─ index.html └─ images └─ cat.jpghtml 文件和 images 文件夹同级。 在 index.html 里面引用图片img srcimages/cat.jpg alt小猫图片images/cat.jpgimages 文件夹里面的 cat.jpg。情况 1图片和 html 放在同一个文件夹网页文件夹 ├─ index.html └─ dog.jpg写法img srcdog.jpg alt小狗⚠新手最常见坑路径写错图片显示不出来出现破碎小图标。大小写注意Cat.jpg和cat.jpg在部分服务器是两张不一样图片。路径不要带中文图片文件名、文件夹名全部用英文、数字中文路径容易图片加载失败。 ❌错误src图片/猫咪.jpg✅推荐srcimg/cat.jpg2、alt 属性 替代文本img srccat.jpg alt一只白色小猫趴在草地上两种作用图片加载失败、链接失效的时候原来图片位置显示 alt 的文字。盲人读屏软件会朗读 alt 文字告诉用户这张图片是什么内容利于无障碍和搜索引擎。alt 不要空写无意义文字如实描述图片内容。对比演示src 故意写错地址模拟图片失效img srccat‑wrong.jpg alt白色小猫图片打不开页面会显示文字白色小猫。3、width 和 height 设置图片大小单位px 像素。✔技巧只写 width不写 height图片会自动等比例缩放不会拉伸变形。示例设置宽度 300px高度自动计算img srchttps://picsum.photos/id/10/400/250 alt风景 width300❌不推荐同时随便写宽高容易图片压扁拉伸变形!-- 错误图片会被强行拉伸变形 -- img srcxxx.jpg alt风景 width300 height100后期开发图片尺寸更推荐写在 CSS 里面width、height HTML 属性仅做简单测试。4、title 属性鼠标悬浮提示鼠标放到图片上面弹出小提示文字alt 是图片失效显示title 是悬浮提示两者不一样。img srchttps://picsum.photos/id/10/400/250 alt海边风景 title美丽的海边日落鼠标放在图片上弹出文字美丽的海边日落。5、图片放在超链接里面点击图片跳转网页a包裹img实现点击图片跳转。a hrefhttps://www.baidu.com target_blank img srchttps://picsum.photos/id/10/300/200 alt跳转百度 /a解释点击整张图片新标签页打开百度。完整综合示例复制直接运行!DOCTYPE html html langzh‑CN head meta charsetUTF‑8 meta nameviewport contentwidthdevice‑width, initial‑scale1.0 title图像img完整练习/title /head body h2网页图片演示/h2 p1、网络图片设置宽度300px/p img srchttps://picsum.photos/id/10/400/250 alt海边风景照片 width300 title海边日落 p2、图片作为链接点图片跳转到百度/p a hrefhttps://www.baidu.com target_blank img srchttps://picsum.photos/id/24/300/180 alt森林图片 /a p3、模拟图片路径错误看alt效果/p img srcerror‑pic.jpg alt这张图片加载失败这里显示alt文字 width200 /body /html新手高频错误汇总错误 1img 写成双标签写/imgimg srccat.jpg/img !-- 错误img是单标签不要闭合标签 -- ✅ img srccat.jpg alt小猫错误 2src 路径写错图片显示破碎小图标排查顺序文件名有没有写错大小写文件夹路径是否正确图片、文件夹不要中文名字。错误 3忘记写 alt 属性虽然浏览器能显示图片但是不符合规范不利于无障碍尽量都加上 alt。错误 4把 img 写到 head 标签中img 是页面内容必须写在 body。错误 5同时设置 width 和 height图片拉伸变形尽量只设置宽度高度自动适配。错误 6网络图片地址缺少 https://❌srcwww.xxx.com/a.jpg✅srchttps://www.xxx.com/a.jpgCSS 设置图片样式拓展实际开发中图片样式更多交给 CSS 控制比如边框、圆角。!DOCTYPE html html langzh‑CN head meta charsetUTF‑8 style .pic { width:280px; border:3px solid #666; /*灰色边框*/ border‑radius:8px; /*圆角*/ } /style /head body img classpic srchttps://picsum.photos/id/10/400/250 alt风景 /body /html本篇知识点总结img插入图片单标签无结束标签写在 body 内。src图片地址分网络绝对路径、本地相对路径文件名避免中文。alt图片加载失败的替代文字读屏软件识别建议必写。width宽度、height高度建议只写宽度高度自动防止图片拉伸。title鼠标悬浮弹出提示文字。img 可以放在a内部实现点击图片跳转链接。网页图片显示破碎图标优先检查 src 路径。✍小练习写页面插入一张网络图片设置宽度 350px写 alt 描述套上 a 标签点击图片新窗口跳转百度。