HTML 程序,在 HTML 文档中添加图片


2022年5月2日, Learn eTutorial
2341

HTML 的 <img> 标签用于显示图像,这可以改善网页的设计和外观。HTML img 标签是一个空标签,只包含属性,没有闭合标签。

语法


<h2>HTML Image Example</h2>  

<img src="friends.jpg" alt=" Hello Friends"/> 
 

 HTML img 标签的属性

src 和 alt 是 HTML <img> 标签的两个重要属性。 src 属性用于指定图像的路径,alt 属性用于为图像指定替代文本。 

 

让我们看看 HTML 图像标签的所有属性。
1) src
它是 HTML img 标签的一个重要属性,用于指定图像的源或路径。它指示浏览器在服务器上查找图像的位置,并将其插入到页面中。因此,请确保图像与网页位于同一位置。如果浏览器找不到图像,用户将看到一个损坏的链接图标和 alt 文本。

语法


<img src="rose.jpg" alt="Flower- Rose">

 

2) alt
alt 属性用于在图像无法显示时为其定义替代文本。alt 属性的值应以文字形式描述图像。 

语法


<img src="rose.jpg" alt="Flower- Rose">

3) width
这是一个可选属性,用于定义图像显示的像素宽度。 

语法


<img src="birds.jpg" alt="Flying birds" width="500" height="600">

4) height
这是一个可选属性,用于定义图像显示的像素高度。它还支持 iframe、image 和 object 元素。 

语法


<img src="birds.jpg" alt="Flying birds" width="500" height="600">

5) style
style 属性用于指定图像显示的宽度和高度。

语法

< img src="birds.jpg" alt="Flying birds" >

HTML 源代码

                                          <!DOCTYPE html>
<html lang="en">
<head>
    <title>Placing Images in HTML Documents</title>
</head>
<body>
    >
    <img src="/hourse.jpg" alt=" Running Horse" width="200">
</body>
</html>

                                      

输出

HTML