HTML 图片
<img>
标签功能:HTML中的<img>
标签用于在网页中嵌入图像,主要属性包括src
和alt
。src
属性的作用:src
属性指定图像的路径(URL),告诉浏览器从何处加载图像。alt
和title
属性的重要性:alt
属性提供图像的文本描述,对SEO和屏幕阅读器用户有帮助;title
属性显示鼠标悬停时的信息,但不是alt
属性的替代品。
HTML <img>
标签用于在 HTML 网页中嵌入图像。例如,
<img src="logo.png" />
浏览器输出
这里,<img>
标签将图像 **logo.png**
插入到网页上。
HTML 图像标签有 2 个重要属性:
src
属性alt
属性
注意:<img>
标签是一个空标签,即它不需要闭合标签。
HTML 图像 src 属性
src
属性是 <img>
标签的必需属性。它指定图像的路径(URL)。它告诉浏览器在哪里查找图像。例如,
<img src="tictactoe.png" />
浏览器输出
在上面的例子中,src
属性告诉浏览器从与网页位于同一目录的位置加载图像。
类似地,如果图像存储在一个子目录中,src
属性中的路径将被写为
<img src="images/tictactoe.png" />
如果图像位于另一台服务器上,或者我们想要使用网络上的图像,我们可以为图像提供一个绝对 URL。例如,
<img
src="[https://www.example.com/images/tictactoe.png](https://www.example.com/images/22.png)"
/>
注意:虽然我们可以为位于自己的网络服务器上的图像提供绝对路径,但最好提供相对路径,因为它会导致更快的加载时间。因此,对于您自己服务器上的图像,始终使用相对路径。
HTML 图像 alt 属性
alt
属性是图像的文本描述。alt
属性的值应该描述图像,以便即使图像加载失败,内容也是有意义的。
<img src="computer.png" alt="标准电脑" />
浏览器输出
如果用户无法查看图像(网络慢、src 属性错误或使用屏幕阅读器),则显示 alt
属性的内容。
它还有助于搜索引擎优化,因为它帮助搜索引擎了解图像的内容。
HTML 图像 title 属性
title
属性在用户将鼠标悬停在图像上时显示有关图像的信息。例如,
<img src="tictactoe.png" alt="井字棋游戏" title="井字棋" />
浏览器输出
注意:虽然 alt 和 title 属性看起来相似,但 title 属性不能用作 alt
属性的替代品。标题不会被屏幕阅读器读取,且在图像加载失败时不会显示。
HTML 图像的懒加载
默认情况下,网页上的所有图像在初始加载时都会被加载。如果页面上有很多图像,这会导致页面加载缓慢。
我们可以通过使用 loading
属性改变 HTML 图像的这种行为。
<img src="dinosaur.png" alt="一只霸王龙" loading="lazy" />
现在,只有当用户滚动到图像位置附近时,图像才会加载。如果图像位于页面底部且用户从未在网站上向下滚动,图像将永远不会加载。
这降低了网站的初始加载时间并防止不必要的数据获取。
HTML 图像大小 - 宽度和高度
我们可以使用 style
属性指定图像的高度和宽度。例如,
<img
src="tictactoe.jpg"
alt="井字棋游戏"
style="width: 200px; height: 200px;"
/>
另外,我们也可以使用 height
和 width
属性来设置高度和宽度。例如,
<img src="tictactoe.jpg" alt="井字棋游戏" width="200" height="200" />
浏览器输出
我们应该始终设置图像的高度或宽度。否则,当图像加载时,网页上的内容将被移动。
注意:尽管上述两个代码示例给出的输出相同,但最好是使用 style
属性而不是 height
和 width
。
常见的图像格式
格式 | 文件格式 | 扩展名 |
---|---|---|
GIF | 图形交换格式 | .gif |
PNG | 便携式网络图形 | .png |
SVG | 可缩放矢量图形 | .svg |
JPEG | 联合图像专家组图像 | .jpg, .jpeg |
WEBP | 网络图片 | .webp |