关于html:对html中的图片进行深度实践一个简单到爆的知识点到底要不要看

5次阅读

共计 6595 个字符，预计需要花费 17 分钟才能阅读完成。

始终在想，在 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 属性使图像向左或向右浮动

图片映射是什么鬼？也就是在图像上创立可单击的区域，单机后能够跳转到指定的链接，废话不说，间接看小栗子。

<!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>

再看如下图获取某区域坐标的办法，如下：

下面点击的区域，在地址栏中会呈现坐标。至于为啥没有达到预期的成果，笔者也不再深究了，跪求各路前端大神速度分割我，为我解除困惑，笔者感激不尽。

背景图像是什么鬼？就是背景图像啊！比方 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%，最终的效果图如下：

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> 元素的的图片。