:图像嵌入元素

您所在的位置:网站首页 div元素是什么意思 :图像嵌入元素

:图像嵌入元素

2024-06-27 00:49:01| 来源: 网络整理| 查看: 265

alt

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

备注: 浏览器并非总是会显示图像。比如:

非可视化浏览器(Non-visual browsers)(比如有视力障碍的人使用的音频浏览器) 用户选择不显示图像(比如为了节省带宽,或出于隐私考虑) 图像文件无效,或是使用了不支持的格式

在这些情况下,浏览器很可能会将图像替换为图像所属 元素的 alt 属性所提供的文本。基于上面罗列的原因,建议尽可能地通过 alt 属性提供一些有用的信息。

如果把这个属性设置为空字符串(alt=""),则表明该图像不是内容的关键部分(这是一种装饰或者一个追踪像素点),非可视化浏览器在渲染 (en-US)的时候可能会忽略它。而且,如果图片加载失败,可视化浏览器会隐藏表示图片损坏的图标。

将图像复制并粘贴为文本,或是将图像的链接保存为浏览器书签时,也会用到此属性。

crossorigin

这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像可以在 元素中重复使用,而不会被标记为“污染(tainted)”。

如果未指定 crossorigin 属性,则会发送不启用 CORS 的请求(不会携带 Origin 请求标头),且浏览器会将图像标记为“被污染”并拒绝对图像数据的访问,阻止其在 元素中的使用。

如果指定了 crossorigin 属性,则会发送启用 CORS 的请求(会携带 Origin 请求标头);但是如果服务器不选择允许源站点对图像数据进行跨源访问(不发送任何 Access-Control-Allow-Origin 响应标头,或发送的 Access-Control-Allow-Origin 标头中不包含源站点),浏览器则会阻止图像的加载,并在开发者工具的控制台中记录 CORS 错误。

允许的值有:

anonymous

发送忽略凭据的跨源请求(即,不携带 cookie、X.509 证书 或 Authorization 请求标头)。

use-credentials

发送携带凭据的跨源请求(比如 cookie、X.509 证书和 Authorization 请求标头)。如果服务器不选择与源站共享凭据(通过返回 Access-Control-Allow-Credentials: true 响应标头) ,则浏览器会将图像标记为被污染且限制对其图像数据的访问。

如果属性是无效值,浏览器默认将其当做 anonymous 关键字。更多信息,请查看 CORS 属性设置。

decoding

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

sync

同步解码图像,实现与其他内容互斥的原子渲染。

async

异步解码图像,以减少其他内容的渲染延迟。

auto

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

fetchpriority 实验性

提供获取图像时要使用的相对的优先级提示。允许的值:

high

表示其获取优先级相对其他图像要高。

low

表示其获取优先级相对其他图像要低。

auto

默认值:表示自动确定其相对其他图像的获取优先级。

height

图像的固有高度,以像素为单位。必须是没有单位的整数值。

备注: 同时包括 height 和 width 使浏览器在加载图像之前计算图像的长宽比。此长宽比用于保留显示图像所需的空间,减少甚至防止在下载图像并将其绘制到屏幕上时布局的偏移。减少布局偏移是良好用户体验和 Web 性能的主要组成部分。

ismap

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

备注: 只有在 元素是一个拥有有效 href 属性的 元素的后代元素的情况下,这个属性才会被允许使用。

loading

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

eager

立即加载图像,不管它是否在可视视口(visible viewport)之外(默认值)。

lazy

延迟加载图像,直到它和视口接近到一个计算得到的距离(由浏览器定义)。目的是在需要图像之前,避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。

备注: 仅在启用 JavaScript 时才会延迟加载。这是一种反跟踪的措施,因为,如果用户代理在禁用脚本的情况下支持延迟加载,网站仍然跨源通过在图像中策略性地放置图像来跟踪用户在整个会话期间的大致滚动位置,这样服务器可以跟踪请求了多少图像以及请求在何时发起。

referrerpolicy

一个字符串,指示在获取资源时使用的来源地址(referrer):

no-referrer:不会发送 Referer 标头。 no-referrer-when-downgrade:若未使用 TLS(HTTPS)导航到源站,则不发送 Referer 标头。 origin:发送到源站的来源地址将被限制为:协议、主机和端口。 origin-when-cross-origin:发送到其他来源的来源地址会被限制为协议、主机和端口。同源导航仍将包含路径。 same-origin:仅同源请求发送来源地址,而跨源请求则不包含来源地址信息。 strict-origin:仅在协议安全级别保持不变(HTTPS→HTTPS)的情况下将文档的来源作为来源地址发送。而在目标的安全性降低(HTTPS→HTTP)时则不发送来源地址。 strict-origin-when-cross-origin(默认值):执行同源请求时发送完整的 URL,且仅在协议安全级别保持不变(HTTPS→HTTPS)时发送来源(origin),在目标安全性降低(HTTPS→HTTP)时则不发送来源。 unsafe-url:来源地址包括来源(origin)和路径(path)(但不包括片段、密码或用户名)。这个值是不安全的,因为它将来源和路径从受 TLS 保护的资源泄露到不安全的来源。 sizes

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

一个媒体条件。最后一项一定是被忽略的。 一个资源大小的值。

媒体条件描述视口的属性,而不是图像的属性。例如,如果视口不高于 500px,则建议使用 1000px 宽的资源:(max-height: 500px) 1000px。

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

src

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

srcset

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

指向图像的 URL。 可选地,再加一个空格之后,附加以下的其一: 一个宽度描述符(一个正整数,后面紧跟 w 符号)。该整数宽度除以 sizes 属性给出的资源(source)大小来计算得到有效的像素密度,即换算成和 x 描述符等价的值。 一个像素密度描述符(一个正浮点数,后面紧跟 x 符号)。

如果没有指定源描述符,那它会被指定为默认的 1x。

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

用户代理自行决定选择任何可用的来源。这位它们提供了一个很大的选择余地,可以根据用户偏好或带宽条件等因素来进行选择。有关示例,可以参阅响应式图像教程。

width

图像的宽度,以像素为单位。必须是没有单位的整数。

usemap

与元素相关联的图像映射(image map) (en-US)的部分 URL(以 # 开始的部分)。

备注: 如果 元素是 或 元素的后代元素则不能使用这个属性。



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭