什么是内联图像？(an inline image?)

内联图像是插入网页以增加视觉吸引力、提供信息或表示超链接的图形图像。内联图像通常是GIF、JPEG或PNG格式。它们使用数据URI方案合并到web页面中。...

内联图像是插入网页以增加视觉吸引力、提供信息或表示超链接的图形图像。内联图像通常是GIF、JPEG或PNG格式。它们使用数据URI方案合并到web页面中。

数据URI允许嵌入可由浏览器即时检索的小数据。内联图像由浏览器与HTML一起检索，并显示为web文档的一部分。为了使浏览器能够检索和显示图像而不需要太多时间和麻烦，建议使用小尺寸的内联图像。

较大的图像会减慢加载时间，并导致站点在屏幕上显示的时间较长。大多数网络访问者没有耐心呆在那里看它的发生。这将对站点流量产生不利影响。

HTML内联图像源于要显示它们的网站的服务器，或包含在其他外部服务器中。使用来自外部源的内联图像是一个争论的问题，因为这可以在没有许可的情况下完成。img标记用于将内联图像插入网页的段落和标题中。img标记不能以自由浮动形式使用。它必须被封装在另一个元素中。

img标记的必需属性是src属性。src属性指定浏览器可以从中检索图像文件的网址或URL。除了src属性外，HTML内联图像还可以由三个可选属性定义。它们是alt、align和ismap。

alt属性提供了一个内联图像文本选项。因此，如果查看器的浏览器不支持图形，查看器将看到文本而不是图像。强烈建议使用alt属性。

alt属性值可以是空字符串。例如，如果存在装饰性图像，则无需为其提供替代文本。因此，alt属性值可以保留为空。

可以使用“对齐”属性设置内联图像样式。“对齐”属性告诉浏览器内联图像相对于网页上的文本必须出现的位置。内联图像可以与网页上相邻文本的顶部、中部或底部对齐。

使用ismap属性，可以将内联图像标记为活动图像映射。这意味着，每当有人单击图像的不同部分时，可以使图像的不同部分产生不同的动作。例如，如果有一个显示地球和土星的内联图像，点击地球可能会得到关于地球的信息，点击土星可能会得到关于土星的信息。

与alt和align属性不同，ismap属性不能仅包含在img标记中。它需要在服务器上进行一些配置。可能还需要一些编程知识。

发表于 2021-12-11 14:18
阅读 ( 108 )
分类：互联网

你可能感兴趣的文章

宏(macro)和内联函数(inline function)的区别

...称时，它将被宏的内容替换。目录 1. 概述和主要区别 2. 什么是宏 3. 什么是内联函数 4. 并排比较-表格形式的宏与内联函数 5. 摘要什么是宏(macro)？预处理器是在源代码通过编译器之前对其进行处理的程序。它使用预处理器命...

发布于 2020-10-19 00:27
阅读 ( 418 )

块(block)和内联元素(inline elements)的区别

...了显示元素内容所需的宽度。目录 1. 概述和主要区别 2. 什么是块元素 3. 什么是内联元素 4.块和内联元素之间的相似性 5. 并排比较-表格形式的块与内联元素 6. 摘要什么是块元素(block elements)？块元素采用可用的全宽。这些元...

发布于 2020-10-19 13:55
阅读 ( 238 )

如何在googledocs中对图像进行文本包装

...。googledocs中的wrap文本功能使所有这些都更易于管理。什么是文本换行(text wrapping)？在我们开始之前，了解googledocs如何处理图像以及图像如何影响文本是很有帮助的。将图像**文档后，将提供三个选项：内联、换行文本和断...

发布于 2021-04-02 18:53
阅读 ( 132 )

内联(inline)和v型发动机(v engines)的区别

直列vs V引擎直列和V型发动机是非常受欢迎的配置之间的汽车，甚至在多缸摩托车。它们之间的主要区别在于气缸的排列方式。直列发动机的气缸呈直线，而V型发动机的气缸分为两组，并以一定角度呈V型排列；导致发动机配...

发布于 2021-06-23 19:52
阅读 ( 421 )

内联(inline)和v型发动机(v engines)的区别

...也被称为反向发动机。直列发动机和v型发动机的比较表什么是直列发动机(inline engines)？直列发动机最为人所知的是其易于建造和组装的性质，因为它需要很少的气缸盖。它们结构紧凑，尺寸较小。它通常用于其四缸配置，以获...

发布于 2021-07-11 12:09
阅读 ( 425 )

...张图片添加唯一的标题，有四种方法可以实现。可以添加内联文本、创建图形、使用表格或尝试加载项。 Table of Contents Caption Your Image Using Inline Text Caption Your Image Using a Drawing Caption Your Image Using a Table Caption Your Image Using an Add-On ...

发布于 2021-07-14 18:21
阅读 ( 147 )