写在开篇
始终在想，在 HTML 中对图片的应用，这个简略到爆的知识点要不要独自拿一篇来讲。起初是不想独自拿一篇来讲的，起初发现，对于它的应用场景还挺多。有时候，越是简略的知识点，咱们越是要把握好。于是，有了本篇的输入，欢送宽广盆友批评指正。
HTML 图片
上面咱们持续解说在 html 中如何嵌入图片，少来前戏，间接步入主题。
看上面小栗子：指定了本地的图片，看上面代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
</head>
<body>
<h1> 彩虹运维技术栈社区 </h1>
<img src="./img/logo-wechat-id.jpg" alt="运维技术栈社区图片缺失" width="500" height="333">
</body>
</html>成果如下图：
如果不能正确的找到图片，将会显示 alt 属性中的内容，成果如下图：
很显著了，想要应用图片，是用 img 标签实现，src 属性是指定图片的地位（能够是本地、也能够是来自其余网站的图像链接）那么 width 和 height 属性，一眼就能够看出是管制宽度和高度。
再看这个小栗子：从其余站点引入图片，看上面代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
</head>
<body>
<h1> 彩虹运维技术栈社区，Hello World!</h1>
<img src="https://img0.baidu.com/it/u=3277119817,840848377&fm=253&fmt=auto&app=138&f=JPG?w=500&h=265" alt="来自其余站点的图片缺失" width="500" height="350">
</body>
</html>成果如下图：
咱们持续，深刻分析一下图像的大小、宽度和高度这两个知识点，在下面的例子中，间接应用了 width 和 height 属性指定了宽度和高度。那么，其实还能够应用 style 属性指定图像的宽度和高度，上面咱们一起来看看小栗子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
</head>
<body>
<h1> 彩虹运维技术栈社区，Hello World!</h1>
<img src="./img/logo-wechat-id.jpg" alt="图片缺失" style="width:250px;height:250px;">
</body>
</html>成果如下：
OK！十分完满，忽然发现一个问题，width,height 和 style 属性在 HTML 中都无效，那到底应用哪个好？笔者倡议应用 style 属性，因为它能够避免样式表更改图像的大小，看上面的小栗子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
<style>
img{width:50%;}
</style>
</head>
<body>
<h1> 彩虹运维技术栈社区，Hello World!</h1>
<img src="./img/TtrOpsTackQRCode.jpg" alt="图片缺失" width="300px" height="300px">
<br>
<img src="./img/logo-wechat-id.jpg" alt="图片缺失" style="width:300px;height:300px;">
</body>
</html>效果图如下：
留神到 head 中的 style 标签了嘛？它管制了 img 元素的 width 属性。那么，在 body 中 img 标签，应用了 style 属性来管制宽度和高度的图片没有受到影响，这就是其精髓之所在。
持续下一个知识点，如果想将图片可作为链接，也就是点击图片可跳转到其余的站点，怎么做？看上面的小栗子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
</head>
<body>
<h1> 彩虹运维技术栈社区 </h1>
<p> 网友来稿：内网环境或网速差怎么破？一文带你搭建本地 Yum 源，点击上面图片进入公众号速看！</p>
<a href="https://mp.weixin.qq.com/s/vgeZUqPunVUYRSC9NH1cuA" target="_blank">
<img src="./img/logo-wechat-id.jpg" alt="图片缺失" style="width:300px;height:300px;">
</a>
</body>
</html>成果如下图：
上面，我持续新的知识点，浮动图像，什么鬼？意思就是应用 CSS 的 float 属性使图像浮动到网页的右侧或左侧，废话不说，看小栗子，代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
</head>
<body>
<h1> 彩虹运维技术栈社区，诚邀宽广盆友的关注！</h1>
<img src="./img/TtrOpsTackQRCode.jpg" alt="图片缺失" style="float:left;width:300px;height:300px;">
<br>
<img src="./img/logo-wechat-id.jpg" alt="图片缺失" style="float:right;width:300px;height:300px;">
</body>
</html>成果如下图：
留神到下面的效果图了嘛？一个在右边，一个在左边。
接下来，咱们汇总一下浏览器（特地是 Chrome）都反对最常见的图像文件类型都有哪些：
| 缩写 | 文件格式 | 文件扩展名 |
|---|---|---|
| APNG | 动画便携式网络图形 | .apng |
| GIF | 图形替换格局 | .gif |
| ICO | 微软图标 | .ico, .cur |
| JPEG | 联结摄影专家组图片 | .jpg、.jpeg、.jfif、.pjpeg、.pjp |
| PNG | 便携式网络图形 | .png |
| SVG | 可缩放矢量图形 | .svg |
十分好！那咱们再做个小总结：
- 应用 HTML <img> 元素定义图像
- 应用 HTML src 属性定义图像的 URL
- 应用 HTML alt 属性为其定义备用文本
- 应用 HTML width 和 height 属性 或 CSS width 和 height 属性定义图像的大小
- 应用 CSS float 属性使图像向左或向右浮动
HTML 图片映射
图片映射是什么鬼？也就是在图像上创立可单击的区域，单机后能够跳转到指定的链接，废话不说，间接看小栗子。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
</head>
<body>
<h1> 彩虹运维技术栈社区，诚邀宽广盆友的关注！</h1>
<img src="./img/img_53.jpg" alt="图片缺失" usemap="#maptest">
<map name="maptest">
<area shape="circle" coords="325,164" href="https://mp.weixin.qq.com/s/vgeZUqPunVUYRSC9NH1cuA" alt="搭建本地 Yum 源" target="_blank">
<area shape="circle" coords="707,206" href="https://mp.weixin.qq.com/s/sC9Dj2Bq6WMByidM8KnXcQ" alt="超链接知识点和 CSS 根底" target="_blank">
<area shape="circle" coords="1258,81" href="https://mp.weixin.qq.com/s/-jBbROxV4IZus97oLTyYPw" alt="装置 Python 库" target="_blank">
</map>
</body>
</html>成果如下图：
下面的成果中分了 3 个区域，别离是 yum 那个区域、html 和 css 区域、python 区域，当点击不同的区域就会跳转到不同的文章链接，这是现实的成果。然而笔者在亲测中竟然没有达到预期的成果。就算把坐标搞对了，也毫无效果，甚是无奈啊！心愿各路前端大神能指导一二。尽管毫无效果，但还是想把如何确定图片区域的坐标的办法分享一下。
确定同一张图片不同的区域，办法如下，先看如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#">
<img src="./img/img_53.jpg" ismap="ismap">
</a>
</body>
</html>再看如下图获取某区域坐标的办法，如下：
下面点击的区域，在地址栏中会呈现坐标。至于为啥没有达到预期的成果，笔者也不再深究了，跪求各路前端大神速度分割我，为我解除困惑，笔者感激不尽。
HTML 背景图片
背景图像是什么鬼？就是背景图像啊！比方 body 标签的背景页，div 标签、p 标签等等。简而言之，简直任何 HTML 元素都能够指定背景图像。
看上面的小栗子，在 div 中指定背景图片
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
</head>
<body>
<h1> 彩虹运维技术栈社区，诚邀宽广盆友的关注！</h1>
<p> 微信公众号 ID：TtrOpsStack</p>
<div style="background-image: url('./img/img_55.png');">
TTR，全称 Taste The Rainbow，译指品尝彩虹。依靠彩虹的象征和意义，决定以此为名，于 2022 年 4 月开办了彩虹运维技术栈社区（TtrOps Stack Community）。公众号 ID：TtrOpsStack，咱们会继续公布原创技术文章，分享在理论工作中遇到的运维和运维开发相干的教训，以及分享在日常学习中积攒到的常识。心愿关注咱们的你，能细细品味咱们打造的这抹彩虹。</div>
</body>
</html>效果图下图：
留神到文字的背景了吗？废话不说了，你应该留神到了。
再看一个小栗子，将 div 变成 p 标签，代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
</head>
<body>
<h1> 彩虹运维技术栈社区，诚邀宽广盆友的关注！</h1>
<p> 微信公众号 ID：TtrOpsStack</p>
<p style="background-image: url('./img/img_55.png');">
TTR，全称 Taste The Rainbow，译指品尝彩虹。依靠彩虹的象征和意义，决定以此为名，于 2022 年 4 月开办了彩虹运维技术栈社区（TtrOps Stack Community）。公众号 ID：TtrOpsStack，咱们会继续公布原创技术文章，分享在理论工作中遇到的运维和运维开发相干的教训，以及分享在日常学习中积攒到的常识。心愿关注咱们的你，能细细品味咱们打造的这抹彩虹。</p>
</body>
</html>成果如下图：
好难堪！都是一样的成果。所以，验证了那句：简直任何 HTML 元素都能够指定背景图像。
再来个小栗子，如果想让整个页面具备背景图片，则能够在 body 元素上指定背景图像，代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
<style>
body {background-image: url('./img/img_55.png');
}
</style>
</head>
<body>
<h1> 彩虹运维技术栈社区，诚邀宽广盆友的关注！</h1>
<p> 微信公众号 ID：TtrOpsStack</p>
</body>
</html>效果图下图：
成果是进去了，不过竟然没有平铺。点解会这样？起因是背景图片小于元素，则图片将在程度和垂直方向上反复本身，直到达到元素的末端。
那将整个背景图片平铺在整个页面，看上面代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
<style>
body {background-image: url('./img/img_55.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h1> 彩虹运维技术栈社区，诚邀宽广盆友的关注！</h1>
<p> 微信公众号 ID：TtrOpsStack</p>
</body>
</html>下面的代码中，次要在 style 中设置了相干的 css 属性，如：background-repeat、background-attachment、background-size，对于他们的意义，请自行查看其相干手册，后续笔者将会专门解说 CSS 的知识点。
成果如下图：
其实下面的成果并不是最完满的，持续调优一下，拉伸背景图像以适宜整个元素，将 background-size 属性设置为 100% 100%，最终的效果图如下：
HTML 的 picture 元素
picture 元素的次要利用场景是：能够依据屏幕匹配的不同尺寸显示不同的图片，如果没有匹配到或浏览器不反对 picture 属性则应用 img 元素中的图片，笔者在上面的小栗子中应用了同一张图片
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 陪你温习坚固，攻破前端技能 </title>
</head>
<body>
<h1> 彩虹运维技术栈社区，诚邀宽广盆友扫码关注！</h1>
<picture>
<source media="(min-width: 650px)" srcset="./img/TtrOpsTackQRCode.jpg">
<source media="(min-width: 465px)" srcset="./img/TtrOpsTackQRCode.jpg">
<img src="./img/TtrOpsTackQRCode.jpg" style="width:auto;">
</picture>
</body>
</html>效果图如下：
特地阐明：对于 picture 元素它的次要场景是容许在不同的设施上显示不同的图片，个别用于响应式页面，其是在 HTML5 中引入了 picture 元素，该元素能够让图片资源的调整更加灵便。picture 元素零或多个 source> 元素和一个 img 元素，每个 source 元素匹配不同的设施并援用不同的图像源，如果没有匹配的，就抉择 img> 元素的 src 属性中的 url。且 img 元素是放在最初一个 picture 元素之后，如果浏览器不反对该属性则显示 img> 元素的的图片。
写在最初
对于在 HTML 中应用图片的深度实际，本篇就到此为止了，当初对本篇所提到的标签做个小总结：
| 标签 | 形容 |
|---|---|
| img | 定义图像 |
| map | 定义图像映射 |
| area | 定义图像地图中的可单击区域 |
| picture | 为多个图像资源定义容器 |
好了，正式靠近序幕！望宽广盆友对咱们多多反对，多多关注、点赞、转发。非常感谢！