The img tag of html can be used to display images on web pages. It is an empty tag with only attributes and no closing tag.
Attribute of img tag
The img tag can contain: src attribute, height and width attribute, and alt attribute. Among them, src attribute and alt attribute are important attributes of HTML img tag.
Let's take a concrete look at these attributes of img tags:
1, src attribute
The src attribute is a necessary attribute to describe the source or path of an image, and it indicates the location where the browser looks for the image on the server.
Did you get the image? There are two situations:
1), and put the images in the same folder.
When the HTML file and image are in the same folder, it looks like this:
We can directly fill in the image name in the src attribute, for example:
& ltdiv class="demo " >
& lth 1 & gt； Img label
& ltimg src = " 1 . jpg "/& gt；
& lt/div & gt； Rendering:
2), in another directory/folder, for example:
You can access images like this:
& ltdiv class="demo " >
& lth 1 & gt； Img label
& ltimg src = " img/ 1 . jpg "/& gt；
& lt/div & gt； The rendering is as above.
If it is more complicated, when we put the image of 1.jpg on the local disk e->; Img folder, we can display pictures like this:
& ltimg src = "e:/img/1.jpg" > 2. Height and width attributes.
The height and width attributes of the img tag can be used to set the height and width of the image, for example:
& ltimg src = " img/ 1 . jpg " width = " 450 px " height = " 300 px "/& gt； Rendering:
The height and width of img tag images can also be set through css, for example:
img{
Width: 450px
Height: 300px
}3, alt attribute
When the image cannot be displayed in the browser, you can use the alt property to display alternative text.
For example, I want to display a picture of 1.jpg, but it is not in the folder.
& lth 1 & gt； Img label
& ltimg src = " img/ 1 . jpg " width = " 450 px " height = " 300 px "/& gt； Rendering:
Summary: