写在开篇
一直在想，在HTML中对图片的使用，这个简单到爆的知识点要不要单独拿一篇来讲。起初是不想单独拿一篇来讲的，后来发现，关于它的使用场景还挺多。有时候，越是简单的知识点，我们越是要掌握好。于是，有了本篇的输出，欢迎广大盆友批评指正。HTML图片
下面我们继续讲解在html中如何嵌入图片，少来前戏，直接步入主题。看下面小栗子：指定了本地的图片，看下面代码
陪你复习巩固，攻破前端技能 - 锐客网
彩虹运维技术栈社区
文章图片
效果如下图：
文章图片
如果不能正确的找到图片，将会显示alt属性中的内容，效果如下图：
文章图片
很明显了，想要使用图片，是用img标签实现，src属性是指定图片的位置（可以是本地、也可以是来自其他网站的图像链接）那么width和height属性，一眼就可以看出是控制宽度和高度。再看这个小栗子：从其他站点引入图片，看下面代码
陪你复习巩固，攻破前端技能 - 锐客网
彩虹运维技术栈社区，Hello World!
文章图片
效果如下图：
文章图片
我们继续，深入剖析一下图像的大小、宽度和高度这两个知识点，在上面的例子中，直接使用了width和height属性指定了宽度和高度。那么，其实还可以使用style属性指定图像的宽度和高度，下面我们一起来看看小栗子：
陪你复习巩固，攻破前端技能 - 锐客网
彩虹运维技术栈社区，Hello World!
文章图片
效果如下：
OK！非常完美，突然发现一个问题，width,height和style属性在HTML中都有效，那到底使用哪个好？笔者建议使用style属性，因为它可以防止样式表更改图像的大小，看下面的小栗子：
陪你复习巩固，攻破前端技能 - 锐客网 img{
width:50%;
}
彩虹运维技术栈社区，Hello World!
文章图片
文章图片
效果图如下：
文章图片
注意到head中的style标签了嘛？它控制了img元素的width属性。那么，在body中img标签，使用了style属性来控制宽度和高度的图片没有受到影响，这就是其精华之所在。继续下一个知识点，如果想将图片可作为链接，也就是点击图片可跳转到其他的站点，怎么做？看下面的小栗子：
陪你复习巩固，攻破前端技能 - 锐客网
彩虹运维技术栈社区网友来稿：内网环境或网速差怎么破？一文带你搭建本地Yum源，点击下面图片进入公众号速看！
文章图片
效果如下图：
文章图片
下面，我继续新的知识点，浮动图像，什么鬼？意思就是使用CSS的float属性使图像浮动到网页的右侧或左侧，废话不说，看小栗子，代码：
陪你复习巩固，攻破前端技能 - 锐客网
彩虹运维技术栈社区，诚邀广大盆友的关注！
文章图片
文章图片
效果如下图：
文章图片
注意到上面的效果图了嘛？一个在左边，一个在右边。接下来，我们汇总一下浏览器（特别是Chrome）都支持最常见的图像文件类型都有哪些：
| 缩写 | 文件格式 | 文件扩展名 |
|---|---|---|
| APNG | 动画便携式网络图形 | .apng |
| GIF | 图形交换格式 | .gif |
| ICO | 微软图标 | .ico, .cur |
| JPEG | 联合摄影专家组图片 | .jpg、.jpeg、.jfif、.pjpeg、.pjp |
| PNG | 便携式网络图形 | .png |
| SVG | 可缩放矢量图形 | .svg |
- 使用 HTML
文章图片
