文章の目录

1、什么是图像标签 img
2、支持的图像格式
3、基本语法格式
4、常见的属性
- 4.1、属性src
- 4.2、属性alt
- 4.3、crossorigin
- - 4.3.1.anonymous
  - 4.3.2.use-credentials
- 4.4、decoding
- - 4.4.1.sync
  - 4.4.2.async
  - 4.4.3.auto
- 4.5、height
- 4.6、importance
- - 4.6.1.auto
  - 4.6.2.high
  - 4.6.3.low
- 4.7、ismap
- 4.8、loading
- - 4.8.1.eager
  - 4.8.2.lazy
- 4.9、referrerpolicy
- - 4.9.1.no-referrer
  - 4.9.2.no-referrer-when-downgrade
  - 4.9.3.origin
  - 4.9.4.origin-when-cross-origin
  - 4.9.5.unsafe-url
- 4.10、sizes
- 4.11、srcset
- 4.12、width
- 4.13、usemap
- 4.14、属性title
5、浏览器兼容性
6、img 总结
7、路径
- 相对路径
- 绝对路径
写在最后

单词缩写：image 图像

1、什么是图像标签 img

<img> 将一份图像嵌入文档。

2、支持的图像格式

至于具体格式之间的区别，后期再深入学习了解。

3、基本语法格式

<img src="./../images/felaol_wechat.jpg" alt="">

4、常见的属性

图像标签 img 支持 HTML 中的全局属性。

img 标签还拥有如下属性：

4.1、属性src

图像的 URL，这个属性对 <img> 元素来说是必需的。在支持 srcset 的浏览器中，src 被当做拥有一个像素密度的描述符 1x 的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在 srcset 或者 srcset 包含 w 描述符中定义了。

4.2、属性alt

定义了图像的备用文本描述。

浏览器并非总是会显示图像。比如：
非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器）
用户选择不显示图像（比如为了节省带宽，或出于隐私等考虑不加载包括图片在内的第三方资源文件）图像文件无效，
或是使用了不支持的格式
在这些情况下，浏览器很可能会将图像替换为图像所属 <img> 元素的 alt 属性所提供的文本。

mdn中介绍该属性还有如下一句话”将图像复制并粘贴为文本，或是将图像的链接保存为浏览器书签时，也会用到此属性。“

4.3、crossorigin

这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像可以在 <canvas> 元素中重复使用，而不会被污染（tainted）。允许的值有：

4.3.1.anonymous

执行一个跨域请求（比如，有 Origin HTTP header）。但是没有发送证书（比如，没有 cookie，没有 X.509 证书，没有 HTTP 基本授权认证）。如果服务器没有把证书给到源站（没有设置 Access-Control-Allow-Origin HTTP 头），图像会被污染，而且它的使用会被限制。

4.3.2.use-credentials

一个有证书的跨域请求（比如，有 Origin HTTP header）被发送（比如，cookie，一份证书，或者 HTTP 基本验证信息）。如果服务器没有给源站发送证书（通过 Access-Control-Allow-Credentials HTTP header），图像将会被污染，且它的使用会受限制。

当用户并未显式使用本属性时，默认不使用 CORS 发起请求（例如，不会向服务器发送原有的HTTP 头部信息），可防止其在 <canvas> 中的使用。如果无效，默认当做 anonymous 关键字生效。

4.4、decoding

为浏览器提供图像解码方式上的提示。允许的值：

4.4.1.sync

同步解码图像，实现与其他内容的显示相互斥的原子显示。

此图像的解码将是一个原子操作，在完成解码显示之前，不被其他内容的显示而打断，因此其他内容的显示会被延迟。

4.4.2.async

异步解码图像，以减少其他内容的显示延迟。

4.4.3.auto

默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。

4.5、height

图像的高度，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。

4.6、importance

指示下载资源时相对重要性，或者说优先级。允许的值：

4.6.1.auto

不指定优先级。浏览器可以使用自己的算法来为图像选择优先级。

4.6.2.high

此图像在下载时优先级较高。

4.6.3.low

此图像在下载时优先级较低。

4.7、ismap

这个布尔属性表示图像是否是服务器端 map 的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。

使用说明：只有在 <img> 元素是一个拥有有效 href 属性的 <a> 元素的后代元素的情况下，这个属性才会被允许使用。

4.8、loading

指示浏览器应当如何加载该图像。允许的值：

4.8.1.eager

立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。

4.8.2.lazy

延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。

4.9、referrerpolicy

定义了<img> 元素在获取资源时的引用方式。

4.9.1.no-referrer

HTTP头部信息将不会发送 referrer 。

4.9.2.no-referrer-when-downgrade

向不受 HTTPS 保护的 origin 发送请求时，不发送 Referer 首部。在没有指定任何策略的情况下用户代理的默认行为。

4.9.3.origin

referrer 只包含策略、主机名、端口等页面源的信息。

4.9.4.origin-when-cross-origin

发起跨域请求时，仅在 referrer 中包含来源页面的源。发起同源请求时，仍然会在 referrer 中包含来源页面在服务器上的路径信息。

4.9.5.unsafe-url

引用者将包括源站和路径（但不包括片段、密码或用户名）。这种情况是不安全的，因为它可能会泄漏路径信息，这些信息已被使用TLS隐藏到第三方。

4.10、sizes

表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括：

一个媒体条件。最后一项一定是被忽略的；
一个资源尺寸的值；

资源尺寸的值被用来指定图像的预期尺寸。当 srcset 中的资源使用了宽度描述符 w 时，用户代理会使用当前图像大小来选择 srcset 中合适的一个图像 URL。被选中的尺寸影响图像的显示大小（如果没有影响大小的 CSS 样式被应用的话）。如果没有设置 srcset 属性，或者没有属性值，那么 sizes 属性也将不起作用。

4.11、srcset

以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：

指向图像的 URL；
可选地，再加一个空格之后，附加以下的其一：一个宽度描述符，这是一个正整数，后面紧跟 ‘w’；
- 符号。该整数宽度除以sizes属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和x描述符等价的值；
- 一个像素密度描述符，这是一个正浮点数，后面紧跟 ‘x’ 符号。如果没有指定源描述符，那它会被指定为默认的 1x；

在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的 srcset 两个源都是 2x）也是无效的。

4.12、width

图像的宽度，在 HTML5 中单位是 CSS 像素，在 HTML 4 中可以是像素也可以是百分比。

4.13、usemap

与元素相关联的 image map的部分 URL（以 ‘#’ 开始的部分）。

注意：如果 <img> 元素是 <a> 或 <button> 元素的后代元素则不能使用这个属性。

4.14、属性title

title 属性不是 alt 属性可接受的替代品。

title 属性也不该被用作一幅图片在 alt 之外的补充说明信息。

title 元素的值一般作为提示条（tooltip）呈现给用户，在光标于图片上停下后显示出来。

5、浏览器兼容性

6、img 总结

<img> 没有基线（baseline）;
根据图像文件的类型，图像可能会有一个原始分辨率（intrinsic dimension）或者叫原始宽高。对于一些类型的图像，原始分辨率并不是必要的；
在高分辨率设备上， srcset 将被优先加载，取代 src 属性中的图像。在支持 srcset 的用户代理中，src 属性中的图片被作为 1x 候选项；
alt 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。如果因为图像没有等价的文本描述， alt 属性只得不写或留白，那么可以考虑使用其他方法来呈现图像试图传递的内容；

7、路径

实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

1)、目录文件夹就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件，图片等等。
2)、打开目录文件夹的第一层就是根目录。

页面中的图片会非常多，通常我们再新建一个文件夹专门用于存放图像文件（images），这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。路径可以分为：相对路径和绝对路径。

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

简而言之，相对路径，是从代码所在的这个文件出发，去寻找我们的目标文件的，而我们所说的上一级、下一级、同一级，简单说，就是图片位于HTML页面的位置。

绝对路径

绝对路径以web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

“D:\Web\BlogTable\image\qrcode_for_gh_9c2713babf49_258.jpg”或完整的网络路径，例如“https://img-blog.csdnimg.cn/ced7bddafb4049858b0bd886e3aad9e9.jpg#pic_center”

注意：

绝对路径用的较少，理解下就可以了。但是要注意，它的写法特别是符号 \ 并不是相对路径的 /。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

HTML系列之图像标签img相关推荐

R语言使用cowplot包的plot_grid函数将两个ggplot2可视化结果并排组合起来并添加图像标签A、B、设置组合图像使用共享的图例（shared legend in cowplot）
R语言使用cowplot包的plot_grid函数将两个ggplot2可视化结果并排组合起来并添加图像标签A.B.设置组合图像使用共享的图例(combine two plots side by sid ...
如何用html语言定位img,html经常使用标签(图像标签img，连接标签a，锚点定位，及路径)...
1 图像标签img (重点) 单词缩写: image 图像html HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就须要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性 ...
html2image api,图像标签_图像识别 Image_API参考_API_华为云
功能介绍图像标签服务准确识别自然图片中数百种场景.上千种通用物体及其属性.让智能相册管理.照片检索和分类.基于场景内容或者物体的广告推荐等功能更加直观.使用时用户发送待处理图片,返回图片标签内容及相 ...
Web前端开发笔记——第二章 HTML语言第五节图像标签
目录前言一.图像标签的属性 (一)src属性和alt属性 (二)width属性和height属性 (三)borde属性二.绝对路径和相对路径三.图像映射例题结语前言本节介绍图像标签即i ...
a标签传参接收_[pyecharts1.8] 系列配置之标签设置
今日心情 :em....又是一堆蛋疼的事情堆积的一周...文章会迟到,但不会缺席,准备好脑子接收下 [pyecharts1.8] 系列配置之标签设置本文档(以及pyecharts使用手册中的其他文档 ...
设置图像的title_【HTML】2 图像标签和属性
1.图像标签和属性图像标签:<img>标签引入外部图片文件,并进行显示,单标签,不需要成对出现. 属性:属于标签的特性.标签要通过属性来定义所希望的设置参数. 2.应用案例 <!D ...
插入图像标签(HTML)
插入图像标签(HTML) <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
HTML学习总结基础篇图像标签imag的使用及其属性
图像标签在HTML中,用img标签显示图像. 语法格式: < img src=" 图像路径">,src为必须要写的元素,用于指定文件的路劲和文件名属性属性值说明 ...
html图像标签、绝对路径和相对路径
仅供学习,转载请注明出处 html图像标签 <img>标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有: src属性定义图片的引用地址 alt属性定义图片加载失败时显示 ...

HTML系列之图像标签img