如何在 HTML 中插入图像?

由 hcduguo

当下主流的网页样式基本以图文结合、多媒体图文为主，图像是网页的重要组成部分之一。按照以下步骤，我们可以轻松地在文档中添加或插入图像。

步骤1：首先，我们可以在文本编辑器中键入HTML代码，或者打开要插入图像的HTML文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何在HTML中插入图像</title>
    </head>
    <body>
        <h2>在此插入图片</h2>
    </body>
</html>

步骤2：将光标移到我们要插入图像的位置，在此时输入空的<img>标签。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何在HTML中插入图像</title>
    </head>
    <body>
        <h2>在此插入图片</h2>
        <img>
    </body>
</html>

步骤3：我们需添加名称为“ src ”的image标签属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何在HTML中插入图像</title>
    </head>
    <body>
        <h2>在此插入图片</h2>
        <img src="">
    </body>
</html>

步骤4：我们需要提供要插入图像的路径，在src属性中键入图像的路径。

请以下格式输入路径：

<img src =“ filename.extension” >

1、如果我们的图像存储在我们存储HTML文件的目录中：

<img src = "earth.jpg">

2、如果我们的图像存储在任何其他目录中，输入该图像的正确路径：

<img src = "/data/runoon/img/earth.jpg">

3、如果我们的图像在互联网上，那么我们也可以使用URL添加图像：

<img src = "https://www.runoon.com/img/earth.jpg">

步骤5：我们还可以使用两个不同的属性来设置该图像的宽度和高度。

<img src="/img/earth.jpg" width="354" height="228">

第6步：最后，我们在文本编辑器中保存以下HTML文件或HTML代码。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何在HTML中插入图像</title>
    </head>
    <body>
        <h2>在此插入图片</h2>
        <img src="/img/earth.jpg" width="354" height="228">
    </body>
</html>

效果展示：

在此插入图片

亲自试试

相关