博客园  :: 首页  :: 管理

关于HTML中-<img>-标签-元素-的使用与说明

Posted on 2026-01-22 11:30  520_1351  阅读(34)  评论(0)    收藏  举报

<img> 标签，定义和用法

<img> 标签定义 HTML 页面中的图像。

请注意，从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。

<img> 标签有两个必需的属性：src 和 alt。 当然实际测试会发现，即使没有alt属性，浏览器也能正常加载

alt 属性（全称 alternative text，即 替代文本 ）是 HTML 中 <img> 标签的一个重要属性，它的核心作用是：在图像文件丢失或无法显示或无法被“理解”时，提供文字形式的替代内容。

image

但强烈建议加上alt属性，如：搜索引擎（如 Google）依赖 alt 文本来理解图片内容。缺少 alt 会降低图片被搜索到的机会。

如下代码：

<!DOCTYPE html>
<html>
<head>
  <title>SVG 预览</title>
</head>
<body>
  <img src=".\dir01\dir02\00028-icon-service-01.svgg" alt="Author:QQ-5201351">
  <img src="./dir01/dir02/00028-icon-service-02.svg">
  <img src="./dir01/dir02/00030-icon-service-03-(Classic)-Web-Services.svg" alt="xxx">
  <img src="./dir01/dir02/00031-icon-service-Genomics.svg" alt="xxxx">
  <img src="./dir01/dir02/00792-icon-service-Computer-Vision.svg" alt="xxxxx">
  <img src="./dir01/dir02/00793-icon-service-Custom-Vision.svg" alt="xxxxxx">
</body>
</html>

最后总结一下：

1、<img> 单标签（也称为自闭合标签）是指不需要单独闭合标签的元素

2、<img> 标签，至少需要src属性，强烈建议加上 alt 属性，alternative text，即 替代文本

3、<img>标签，默认 是行内元素（inline），如上代码默认是不会分行的

4、笔者在是windows上测试，路径分隔写 \ 和 / 都是没有问题的！

 

 

 

尊重别人的劳动成果 转载请务必注明出处：https://chuna2.787528.xyz/5201351/p/19516124