图像具有照亮任何网站或产品的神奇力量。除了装饰功能外，它们还可以在整个界面中传达信息并引导用户。本文将解释在 HTML 中使用图像的所有细微差别及其正确语法。
图像语法
要在 HTML 页面中嵌入图像，我们使用<img> 标签。这是一个空的，所以你不必担心关闭它。src和alt 属性通常是<img>标签中的第一件事。所有浏览器支持的最常见的图像文件格式是 APNG、GIF、ICO、JPEG、PNG 和 SVG 。
src 属性
要在 HTML 页面中嵌入图像，我们使用<img> 标签。这是一个空的，所以你不必担心关闭它。src和alt 属性通常是<img>标签中的第一件事。所有浏览器支持的最常见的图像文件格式是 APNG、GIF、ICO、JPEG、PNG 和 SVG 。
alt 属性
alt如果用户出于某种原因无法查看图像，该属性（又名 alt 描述）会为图像提供文本说明。可能是连接缓慢或src属性错误。更不用说，替代文本是屏幕阅读器用户的救星。简而言之，该设备可以向视障人士或有学习障碍的人大声朗读 HTML 代码，让每个人都能访问这些内容。
替代文字
首先，替代文本应该与图像和整个页面相关。您的目标是使其尽可能具有描述性和具体性，以便当图像丢失或用户无法访问时，他们仍然可以捕捉到预期的消息。其次，确保替代文本也代表网站主题并包含一些关键字。
最后但并非最不重要的一点是，屏幕阅读器或搜索引擎已经知道这是一张图片，因此无需通过编写“...的图片”或“...的图片”来复制此信息。
屏幕阅读工具通常会在 125 个字符处停止阅读替代文本，因此请停止漫无目的并保持替代文本简短但信息丰富。
宽度和高度
和属性以像素width为height单位定义图像测量值。指定这些图像属性很重要。否则，加载图像时网页可能会闪烁，这可能会导致沮丧或增加眼睛疲劳。
样式属性
要指定图像的重量和高度，您可以使用该style属性。它遵循alt属性并以像素为单位定义图像。style如果我们已经拥有width和属性，为什么还需要该height属性？好吧，它们都是相关且有效的，但该style属性会阻止 CSS 更改图像的大小
另一个文件夹中的图像
正如我们已经提到的，该src属性标识图像位置。在处理像图像这样的资产时，开发人员通常更喜欢将它们包含在包含其 HTML 文档的文件夹中。src如果它在您计算机上的子文件夹中，您应该在属性中使用正斜杠提及文件夹名称。语法可能如下所示：<img src="/folder name/filename.jpeg">.
如果您使用自己网站上的图像，同样的逻辑也适用。通常，最好的选择是在src属性中使用相对 URL，而不是绝对 URL。如果您更改域，它可以防止 URL 中断。
其他服务器或网站上的图像
如果我们使用来自其他服务器或网站的图像（如图像库），我们需要指定到其位置的完整路径。绝对 URL 是链接外部图像最直接且唯一的方法。您应该记下图像的协议、域和路径。
使用来自其他资源的图像意味着存在侵犯版权的风险。要么获得作者的许可，要么只使用来自开源的视觉资产
动画图像
随着 GIF 图像的出现，哈利波特中的动画画面成为了现实。要将它们插入 HTML 页面，您只需在src属性中指定图像位置并设置尺寸（宽度和高度）。
您还可以考虑将 WebP、AVIF 或 APNG 格式用于动画序列。
图像可以用作链接并打开弹出窗口或在新选项卡中显示全尺寸图片。为此，您需要<img>在元素内插入标签<a>，确保指定src属性、替代文本以及适当的重量和高度属性。
图像浮动
使用 CSS 属性，我们可以使用文本流使图像浮动。换句话说，该float属性将图像与其容器或另一个浮动框的左侧或右侧对齐，允许文本和内联元素在其周围流动。
物业有什么问题align？好吧，没有这样的事情！🤷🏽♂️text-align属性，与float属性相反，不会影响图像，而是影响图像周围的内容。
背景图片
HTML 页面上的任何元素都可以有图像背景。对于这个问题，我们不需要<img>标签。相反，我们使用 HTMLstyle属性和 CSSbackground-image属性。如果将style属性应用于<body>元素，则可以通过这种方式装饰整个页面。
<图片> 标签
从语言上讲，“图像”和“图片”这两个词没有太大区别。在 HTML 世界中，这是一个完全不同的球类游戏。该<picture>元素允许开发人员指定多个图像源，以便浏览器可以选择更适合当前视图或设备的图像源。为了定义在这种或那种情况下哪个图像最合适，我们使用一个media属性。它设置更适合特定屏幕或设备的图像尺寸。
<img> 和<picture>标签之间的另一个区别是<picture>元素需要一个结束标签，并且实际上是标签的“父级” <img>。
添加 src 属性
这是给你的一个记忆技巧："src"是 source 的缩写。意思是<img src=" "填写图片的URL后，可以是相对简洁的路径，也可以是绝对的详细路径
添加浮动属性
该float属性适用于图像并在样式属性中占有一席之地。请记住指定您希望图像浮动到文本的右侧还是左侧。另外，如果您不希望文本贴得太紧，您可以为图像框的所有边设置以像素为单位的边距。
添加替代文本
thealt是替代文本的缩写。不要指望它会在鼠标悬停时显示——它不是工具提示。Alt屏幕阅读器和搜索引擎在抓取页面时存在属性。一般来说，我们应该尽量使其描述性和简洁，避免过于主观或变得有趣或诙谐。
以上内容为转载
网友评论