第一一部分：最简洁的方法

说真实的，在HTML里面放张图片，真实的超级简洁！就像吃火锅加一块肉那么简单。只需要两行代码就搞定！

• img 当前这个标签就是告诉浏览器："老弟，我要插入一张图片哦！"
• src="你的图片.jpg" 这里写上你的图片名字
• alt="这是啥图片" 当前这个是给盲人用户看的文字说明， 或者万一图片加载失利时体现

举个栗子： 如果你有一张叫做"较小猫咪.jpg"的照片， 不忍直视。 和HTML文件放在同一个文件夹里面那么代码就变成这样：

注意一定要记住把后缀名写对！比如jpg、png这一些。 给力。 不要写错成jepg或者pgn哪些的！

第二一部分：不同路径下的图片怎么插入？

有时候我们有可能把图片放在不同的地方：

1. 和HTML文件同一个文件夹

2. 放在子文件夹里面 比如有一个叫"images"的文件夹，里面有张叫"风景.png"的照片：，这是可以说的吗？

3. 放在上级文件夹 比如你当前在一个叫做"子目录"里工作岗位：，离了大谱。

4. 摆烂。 直接从网络抓取 比如想用百度logo： html

第三一部分：更更多花样玩法

1. 调整较大较小

html 这样较大象就会变成较宽300像素较高200像素，我明白了。。

2. 加鼠标提示信息

当鼠标悬停在上面时会体现文字。

3. 添加边框

这样会给照片加一个红色圆角边框。

4. 作为链接采用

html

第四一部分：常见错误及解决办法

错误1：路径写错了！

表现页面体现不出图片。 解决仔细检查src属性中的路径有没有正确！记住Windows用\而HTML要用/，就这？！

错误2：遗忘写alt属性！

表现SEO排名有可能受作用于。 解决哪怕是随便写点文字也比没有良好，说句实话…。

错误3：没有指定较宽较高引起布局乱掉！

表现页面跳跃或排版杂乱。 解决尽量设置width和height属性， 或者用CSS控制最较 我满足了。 大尺寸： css img { max-width:100%; height:auto; }

第五一部分：较高级技巧

懒加载技术手段

html 这样能够让浏览器先不加载这张图，等滚动到可见区域时再申请数据。

响应式设计

css @media { img { width:98%; } }

第六一部分：一下啦

把图片插入到HTML页面其实很简洁：

1. 用``标签；
2. 填良好src和alt；
3. 按需求添加其他属性；
4. 检查路径有没有正确；
5. 测试浏览器能否正常体现。

有啥用呢？ 记住！别乱抄网上的代码！自己动手实践才是王道！！！

最后再来看送较大家一句话：学编程就像学开车——先学倒车入库然后才能驰骋赛道！！