当前位置：首页 > 前端开发 > 正文

html5 如何插入图片

admin
前端开发
2025-08-08
4

HTML5 中插入图片可以使用 ` 标签，

在HTML5中,插入图片有多种方法，每种方法都有其特点和适用场景，以下是详细介绍：

使用`<img>`标签插入图片

这是最常用的插入图片的方式,<img>标签是一个自闭合标签，不需要关闭标签，它的基本语法如下：

html5 如何插入图片第1张

<img src="图片的URL" alt="替代文本" width="宽度" height="高度">

src：表示图片的链接地址，可以是相对路径、绝对路径或网络URL，当HTML文件和图片在同一目录下时，可以直接写图片名称；如果在不同目录下，需要指定文件夹路径。
alt：当图片无法加载时，替代文本会显示，对SEO和无障碍访问尤为重要，屏幕阅读器会读出alt的属性值，方便视力障碍人士了解图片内容。
width和height：设置图片的宽度和高度，可以用像素(px)或百分比(%)表示，建议使用CSS来控制图片大小，因为CSS更易于管理和维护。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">插入图片示例</title>
</head>
<body>
    <h1>使用&lt;img&gt;标签插入图片</h1>
    <!-插入本地图片 -->
    <img src="images/example.jpg" alt="示例图片">
    <!-插入网络图片 -->
    <img src="https://www.w3school.com.cn/i/eg_mouse.jpg" alt="W3School示例图片">
    <!-设置图片大小 -->
    <img src="images/example.jpg" alt="指定大小的图片" width="200" height="150">
</body>
</html>

使用CSS背景插入图片

除了使用<img>标签，还可以通过CSS将图片作为背景插入到HTML元素中，这种方式特别适合于需要处理布局和样式的场合。

基本语法

element {
    background-image: url('图片路径');
    background-size: cover; / 使图片覆盖整个元素 /
    / 其他CSS属性 /
}

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">使用CSS背景插入图片</title>
    <style>
        .bg-image {
            width: 300px;
            height: 200px;
            background-image: url('images/example.jpg');
            background-size: cover;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>使用CSS背景插入图片</h1>
    <div class="bg-image"></div>
</body>
</html>

使用`<canvas>`元素插入动态图像

HTML5引入的<canvas>元素允许在网页上绘制动态图形，可以使用JavaScript在画布上插入图像。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">使用Canvas插入动态图像</title>
</head>
<body>
    <h1>使用Canvas插入动态图像</h1>
    <canvas id="myCanvas" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const context = canvas.getContext('2d');
        const img = new Image();
        img.src = 'images/example.jpg'; // 图片路径
        img.onload = function() {
            context.drawImage(img, 0, 0, 600, 400); // 在画布上绘制图片
        }
    </script>
</body>
</html>