插入图像

1.1 元素 <img>

在HTML中，多媒体在改善网页的可视化效果中扮演了重要角色。插入图像是HTML中多媒体的关键方面之一。最常用的元素是 <img>。让我们详细看看：

元素 <img> 用于在网页上插入图像。它是一个空元素：没有结束标签，只有属性。

语法

    <img src="图片的URL" alt="描述" width="宽度" height="高度">
  

    
      <img src="images/photo.jpg" alt="图片描述" width="500" height="300">
    
  

让我们更详细地看看 <img> 元素的属性

1.2 属性 src

属性 src 的完整名称是 source (来源)。

属性 src 指定要在页面上显示的图像文件的路径。这可以是绝对路径或相对路径。

示例：

绝对URL：

    
      <img src="https://example.com/images/photo.jpg">
    
  

相对路径：

    
      <img src="images/photo.jpg">
    
  

绝对URL包含到图像的完整地址，包括协议（http或https）、域和路径。相对路径指定文件相对于当前文档的位置，这在处理本地文件时很方便。

1.3 属性 alt

全名：alternative text (替代文本)

属性 alt 提供图像的文本描述。此文本在图像无法加载时显示，用于提高可访问性，因为屏幕阅读器程序将其用于向视力障碍用户描述图像。

示例：

    
      <img src="images/sunset.jpg" alt="美丽日落的照片">
    
  

精心编写的替代文本帮助用户了解图像的内容，若图像不可用，并有助于提高页面的SEO（搜索引擎优化）。

1.4. 属性 width

属性 width 以像素为单位设置图像的宽度。如果未指定 height 属性，图像在调整宽度时保持其比例。

示例：

    
      <img src="images/photo.jpg" width="500">
    
  

使用固定宽度可能对控制图像大小有用，但重要的是要考虑适应性设计。

1.5 属性 height

属性 height 以像素为单位设置图像的高度。如果未指定 width 属性，图像在调整高度时保持其比例。

示例：

    
      <img src="images/photo.jpg" height="300">
    
  

类似于 width 属性，使用固定高度可能有用，但需要考虑适应性。

属性一起使用的示例

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
  

    
      <img src="images/sunset.jpg" alt="美丽日落的照片" width="500" height="300">
    
  

在这个例子中，图像将从文件 images/sunset.jpg 加载，显示宽度为500像素和高度为300像素，如果图像未加载，将显示文本"美丽日落的照片"。