• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

53 - 图像元素 - img标签 - 插入图片的方法

作者：

贺及楼

成为作者

更新日期：2025-02-27 11:59:28

图像元素 - img标签 - 插入图片的方法

在前端开发中，图像是网页不可或缺的组成部分，它能够增强页面的视觉效果，传达更丰富的信息。HTML5 为我们提供了方便的 <img> 标签来插入图片，下面就来详细介绍这个标签以及插入图片的方法。

1. <img> 标签的基本语法

<img> 标签是一个空标签，意味着它没有闭合标签，它主要通过 src 和 alt 属性来插入和描述图片。基本语法如下：

  1. <img src="图片的路径" alt="图片的替代文本">
  • src：该属性指定了图片的来源路径，可以是本地文件路径，也可以是网络图片的 URL。
  • alt：当图片无法正常显示时，alt 属性中的文本会显示出来，同时也有助于搜索引擎理解图片内容，提高网页的可访问性。

2. 插入本地图片

插入本地图片时，src 属性的值为图片在本地文件系统中的相对路径或绝对路径。相对路径是相对于当前 HTML 文件的位置，绝对路径则是图片在计算机中的完整路径。

示例代码

假设我们有一个 HTML 文件 index.html 和一个图片文件 example.jpg，它们位于同一目录下，代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>插入本地图片</title>
  8. </head>
  10. <body>
  11.     <img src="example.jpg" alt="示例图片">
  12. </body>
  14. </html>

在这个例子中，src 属性的值 example.jpg 是相对路径，表示图片与 HTML 文件在同一目录下。

3. 插入网络图片

插入网络图片时，src 属性的值为图片在互联网上的 URL。只要该图片的服务器允许跨域访问，就可以在网页中显示。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>插入网络图片</title>
  8. </head>
  10. <body>
  11.     <img src="https://example.com/example.jpg" alt="网络示例图片">
  12. </body>
  14. </html>

在这个例子中，src 属性的值是一个网络图片的 URL，浏览器会从该 URL 下载并显示图片。

4. 其他常用属性

除了 src 和 alt 属性，<img> 标签还有一些其他常用属性，如下表所示：

属性 描述 示例
width 设置图片的宽度，可以是像素值或百分比 <img src="example.jpg" alt="示例图片" width="300">
height 设置图片的高度，可以是像素值或百分比 <img src="example.jpg" alt="示例图片" height="200">
title 当鼠标悬停在图片上时显示的提示信息 <img src="example.jpg" alt="示例图片" title="这是一张示例图片">

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用其他属性</title>
  8. </head>
  10. <body>
  11.     <img src="example.jpg" alt="示例图片" width="300" height="200" title="这是一张示例图片">
  12. </body>
  14. </html>

5. 注意事项

  • 图片路径的正确性：确保 src 属性中的路径正确，否则图片将无法显示。
  • 图片格式的兼容性：常见的图片格式如 JPEG、PNG、GIF 等在大多数浏览器中都能正常显示，但某些特殊格式可能存在兼容性问题。
  • 图片大小的优化：过大的图片会影响网页的加载速度，建议对图片进行优化处理。

通过以上介绍，我们了解了 <img> 标签的基本用法和插入图片的方法。在实际开发中，合理使用 <img> 标签可以让网页更加美观和生动。