如何在HTML文件中添加图片

最新推荐文章于 2025-05-28 06:12:52 发布

python游乐园

最新推荐文章于 2025-05-28 06:12:52 发布

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：计算机基础文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/weixin_47362565/article/details/145413285

计算机基础专栏收录该内容

38 篇文章

订阅专栏

在 HTML 文件中添加图片主要是通过 <img> 标签来实现

基本语法

<img> 标签是一个空标签，即它没有结束标签，主要通过 src 和 alt 这两个必要属性来插入和描述图片。其基本语法如下：

<img src="图片路径" alt="图片替代文本">

src：该属性用于指定图片的来源路径，可以是本地文件路径，也可以是网络上的图片地址。

alt：当图片无法正常显示时，alt 属性中的文本会替代图片显示，同时也有助于搜索引擎理解图片内容，提升网页的可访问性。

具体实现方式

1. 使用本地图片

如果你想插入本地计算机中的图片，src 属性的值应该是图片文件的相对路径或绝对路径。

相对路径：假设你的 HTML 文件和图片文件在同一目录下，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入本地图片</title>
</head>
<body>
    <!-- 假设图片名为 example.jpg 且与HTML文件在同一目录 -->
    <img src="example.jpg" alt="本地示例图片">
</body>
</html>

若图片位于 HTML 文件所在目录的子文件夹中，比如在名为 images 的文件夹里，代码如下：

<img src="images/example.jpg" alt="子文件夹中的本地示例图片">

绝对路径：绝对路径是从根目录开始的完整路径。在 Windows 系统中，示例如下：

<img src="C:\Users\YourUsername\Pictures\example.jpg" alt="本地图片绝对路径示例">

在 Linux 或 macOS 系统中，示例如下：

<img src="/home/yourusername/Pictures/example.jpg" alt="本地图片绝对路径示例">

2. 使用网络图片

当你想插入网络上的图片时，src 属性的值应该是该图片的完整 URL 地址。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入网络图片</title>
</head>
<body>
    <!-- 插入网络图片，需保证网络地址有效 -->
    <img src="https://example.com/image.jpg" alt="网络示例图片">
</body>
</html>

其他属性设置

除了 src 和 alt 属性外，<img> 标签还有一些其他常用属性可以对图片进行进一步设置：

width 和 height：用于设置图片的宽度和高度，单位可以是像素（px）或百分比（%）。示例如下：

<img src="example.jpg" alt="设置尺寸的图片" width="300" height="200">

title：当鼠标悬停在图片上时，会显示 title 属性中的文本，起到提示作用。示例如下：

<img src="example.jpg" alt="带提示的图片" title="这是一张示例图片">