外贸网站建设服务器,重庆潼南网站建设公司,腾讯的网络营销模式,wordpress 文章 目录编程笔记 html5cssjs 029 HTML图像 一、img#xff1a;图像元素二、支持的图像格式三、属性四、练习小结 图像#xff08;图片#xff09;是网页的必备元素。 一、img#xff1a;图像元素
img HTML 元素将一张图像嵌入文档。
img … 编程笔记 html5cssjs 029 HTML图像 一、img图像元素二、支持的图像格式三、属性四、练习小结 图像图片是网页的必备元素。 一、img图像元素
img HTML 元素将一张图像嵌入文档。
img srcimages/029-1.png alt /上面的例子展示了 img 元素的用法 src 属性是必须的它包含了你想嵌入的图片的路径。 alt 属性包含一条对图像的文本描述这不是强制性的但对无障碍而言它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听让他们知道图像的含义。如果由于某种原因无法加载图像普通浏览器也会在页面上显示 alt 属性中的备用文本例如网络错误、内容被屏蔽或链接过期。 还有很多其他属性可以实现各种不同的目的 Referrer/CORS 控制保证安全与隐私详见 crossorigin 和 referrerpolicy 属性。 使用 width 和 height 设置图像的固有尺寸intrinsic size这将设置图像应占用的空间以确保图像被加载之前页面的布局是稳定的。使用 sizes 和 srcset 设置响应式图像。
二、支持的图像格式
HTML 标准并没有给出需要支持的图像格式的列表因此每个用户代理支持一组不同的格式。 备注 网页浏览器图像格式指南提供了有关图像格式及 Web 浏览器支持的综合信息。本节只是一个总结 Web 最常用的图像格式是 APNG动态可移植网络图形——无损动画序列的不错选择GIF 性能较差。 AVIFAV1 图像文件格式——静态图像或动画的不错选择其性能较好。 GIF图像互换格式——简单图像和动画的不错选择。 JPEG联合图像专家组——有损压缩静态图像的不错选择目前最流行的格式。 PNG便携式网络图形——对于无损压缩静态图像而言是不错的选择质量略好于 JPEG。 SVG可缩放矢量图形——矢量图像格式。用于必须以不同尺寸准确描绘的图像。 WebP网络图片格式——图像和动画的绝佳选择。 推荐使用诸如 WebP 和 AVIF 等图像格式因为它们在静态图像和动画的性能均比 PNG、JPEG、JIF 好得多。WebP 得到了广泛的支持而 AVIF 则缺乏 Safari 的支持。 对于必须以不同尺寸准确绘制的图像则仍然推荐使用 SVG 格式。
三、属性
此元素支持全局属性 (en-US)。 alt 定义了图像的备用文本描述。 非可视化浏览器Non-visual browsers比如有视力障碍的人使用的音频浏览器 用户选择不显示图像比如为了节省带宽或出于隐私考虑 图像文件无效或是使用了不支持的格式 在这些情况下浏览器很可能会将图像替换为图像所属 元素的 alt 属性所提供的文本。基于上面罗列的原因建议尽可能地通过 alt 属性提供一些有用的信息。 如果把这个属性设置为空字符串alt“”则表明该图像不是内容的关键部分这是一种装饰或者一个追踪像素点非可视化浏览器在渲染 (en-US)的时候可能会忽略它。而且如果图片加载失败可视化浏览器会隐藏表示图片损坏的图标。 将图像复制并粘贴为文本或是将图像的链接保存为浏览器书签时也会用到此属性。
crossorigin 这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像可以在 元素中重复使用而不会被标记为“污染tainted”。 如果未指定 crossorigin 属性则会发送不启用 CORS 的请求不会携带 Origin 请求标头且浏览器会将图像标记为“被污染”并拒绝对图像数据的访问阻止其在 canvas 元素中的使用。 如果指定了 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 这个布尔属性表示图像是否是服务器端图像映射的一部分。如果是那么点击图片的精准坐标将会被发送到服务器。 备注 只有在 img 元素是一个拥有有效 href 属性的 a 元素的后代元素的情况下这个属性才会被允许使用。 loading 指示浏览器应当如何加载该图像。允许的值 eager 立即加载图像不管它是否在可视视口visible viewport之外默认值。 lazy 延迟加载图像直到它和视口接近到一个计算得到的距离由浏览器定义。目的是在需要图像之前避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。 备注 仅在启用 JavaScript 时才会延迟加载。这是一种反跟踪的措施因为如果用户代理在禁用脚本的情况下支持延迟加载网站可以在会话中策略性地放置图像通过服务器跟踪请求了多少图像以及请求在何时发起来跟踪用户在整个会话期间的大致滚动位置。 referrerpolicy 一个字符串指示在获取资源时使用的来源地址referrer no-referrer不会发送 Referer 标头。 no-referrer-when-downgrade若未使用 TLSHTTPS导航到源站则不发送 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以 # 开始的部分。 备注 如果 img 元素是 a 或 button 元素的后代元素则不能使用这个属性。
四、练习
练习时可尝试使用不同属性。
!DOCTYPE html
html langzh-cntitle编程笔记 html5cssjs HTML图片/titlemeta charsetutf-8 /stylebody {color: cyan;background-color: teal;}.container {width: 500px; /* 设置容器的宽度 */margin: 0 auto; /* 将左右边距设置为自动 */line-height: 2;}/stylebodydiv classcontainerimg srcimages/029-1.png alt //div/body
/html小结
在网页的综合设计中是以需求为导向不是以标准为导向的。
