HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

如何在 HTML 中插入图像

如果我们想在 HTML 文档中插入图像以在网页上显示图像，我们必须按照下面给出的步骤进行操作。使用这些步骤，我们可以轻松地在文档中添加或插入图像。

第 1 步：首先，我们必须在任何文本编辑器中键入Html 代码或在要插入图像的文本编辑器中打开现有的Html文件。

<!Doctype Html>  
<html>     
<head>      
<title>     
Insert an Image  
</title>  
</head>  
<body>   
Hello JavaTpoint! <br>  
Hello User! <br>  
How are You?    
</body>  
</html>

第 2 步：现在，将光标移动到我们要插入图像的位置。然后，在该点键入空的<img>标签。

<!Doctype Html>  
<html>     
<head>      
<title>     
Insert an Image  
</title>  
</head>  
<body>  
Hello JavaTpoint! <br>  
<img>  
Hello User! <br>  
How are You?    
</body>  
</html>

第3步：现在，我们必须添加名称为“ src ”的图像标签的属性。因此，在<img>标签中输入src属性。

<!Doctype Html>  
<html>     
<head>      
<title>     
Insert an Image  
</title>  
</head>  
<body>   
Hello JavaTpoint! <br>  
<img src=" ">  
Hello User! <br>  
How are You?    
</body>  
</html>

步骤4：之后，我们必须给出我们要插入的图像的路径。因此，在 src 属性中输入图像的路径。如果我们的图像存储在我们的 HTML 文件所在的同一目录中，则输入以下路径：

<img src="文件名.扩展名" >

<img src="rocschoolimage.jpeg"> <br>

如果我们的图像存储在任何其他目录中，则键入该图像的正确路径，以便浏览器可以轻松读取图像，如下块所述。

img src="/home/sumit/Desktop/images/javatpointimage.jpeg">

如果我们的图片在互联网上，那么我们也可以使用URL添加图片，如下面的屏幕截图所示。

<img src="https://www.rocschool.com/public/static/rocschool/img/logo.png?rnd=38062";>

第 5 步：之后，我们还可以使用两个不同的属性来设置该图像的宽度和高度，如下块所示：

<img src="rocschoolimage.jpeg" width="500" height="200">

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

<!Doctype Html>  
<Html>     
<Head>      
<Title>     
Insert an Image  
</Title>  
</Head>  
<Body>   
Hello JavaTpoint! <br>  
<img src="https://www.rocschool.com/public/static/rocschool/img/logo.png?rnd=38062"; width="400" height="200"> <br>  
Hello User! <br>  
How are You?    
</Body>  
</Html>


上一主题 HTML <Checkbox> 复选框标签案例 下一主题 没有了
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具