写在开篇

始终在想，在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为多个图像资源定义容器
好了，正式靠近序幕！望宽广盆友对咱们多多反对，多多关注、点赞、转发。非常感谢！