HTML教程
HTML5教程
HTML参考手册

如何在HTML中插入图片?

HTML中插入图像

如果我们想在HTML文档中插入图像以在网页上显示图像,我们必须按照给出的步骤进行操作下面。使用这些步骤,我们可以轻松地在文档中添加或插入图像。
步骤1:首先,我们必须输入 HTML代码,或在任何文本编辑器中打开现有的 HTML 我们要在其中插入图像的文本编辑器中的文件。
<!Doctype Html>
<Html>
<Head>
<Title>
插入图片
</Title>
</Head>
<Body>
Hello Lidihuo! <br>
您好用户!<br>
你好吗?
</Body>
</Html>
步骤2:现在,将光标移到我们要插入图像的位置。然后,在此时输入空的 <img>标记。
<!Doctype Html>
<Html>
<Head>
<Title>
插入图片
</Title>
</Head>
<Body>
Hello Lidihuo! <br>
<img>
您好用户! <br>
你好吗?
</Body>
</Html>
步骤3:现在,我们必须添加名称为" src "的图像标签的属性。因此,在 <img>标记内键入 src 属性。
<!Doctype Html>
<Html>
<Head>
<Title>
插入图片
</Title>
</Head>
<Body>
Hello Lidihuo! <br>
<img src=" ">
您好用户! <br>
你好吗?
</Body>
</Html>
步骤4:之后,我们必须提供要插入的图像的路径。因此,在src属性中键入图像的路径。如果我们的图像存储在存储HTML文件的目录中,请键入以下路径:
<img src="filename.extension">
<img src="lidihuoimage.jpeg"> <br>
如果我们的图像存储在任何其他目录中,请键入该图像的正确路径,以便浏览器可以轻松地读取该图像,如以下块中所述。
<img src="/images/lidihuoimage.jpeg">
如果我们的图片在互联网上,那么我们也可以使用URL添加该图片,例如在以下屏幕截图中给出。
<img src="https://xxxx.png">
步骤5:之后,我们还可以通过使用以下两个块中所示的两个不同属性来设置该图像的宽度和高度:
<img src="lidihuoimage.jpeg" width="500" height="200">
步骤6:最后,我们必须在文本编辑器中保存以下HTML文件或HTML代码。
<!Doctype Html>
<Html>
<Head>
<Title>
插入图片
</Title>
</Head>
<Body>
Hello Lidihuo! <br>
<img src="https://www.lidihuo.com/images/logo.png" > <br>
你好用户! <br>
你好吗?
</Body>
</Html>
以上代码的输出显示在以下屏幕截图中:
如何在HTML中插入图片
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4