Learn the application of image in HTML today
Last time in the use of learning hyperlinks, there is a small problem in the Add URL href= "http://www.baidu.com"
Do not forget http://, otherwise the link will appear inexplicable error.
Next learn the image
Most of the images in the Web page support the Gif/bmp/jpeg/png/tiff format, most widely GIF and JPEG
GIF pixel size is 256 colors
JPEG maximum pixel up to 16.7 million colors
PNG images have no distortion, high transmission efficiency, and support transparency is popular in Web pages.
The image path in the Web page has absolute and relative path points.
Insert a picture in a Web page with
Property |
Value |
Describe |
Alt |
Text |
Define a short description of the graphic |
Src |
Url |
The URL to display the graphic |
Height |
pixels% |
Defining the height of a graphic |
Ismap |
Url |
Define the image as a server-side graphical map |
UserMap |
Url |
An image as a client-side graphic map |
Vspace |
Pixels |
Define white space at the top and bottom of the image |
Width |
pixels% |
Define the width of an image |
Statement for inserting an image
The picture path here refers to the picture's storage path, such as C:image/1.png
The path can be a relative path or an absolute path
Insert a picture in a Web page
Inserting pictures from different locations
{
A picture from a folder;
}
Pictures from Baidu:
{
}
Define the height and width of the picture
Set a hint word for a picture
Set a picture as a web background
<body background= "Image/1.jpg" >
To arrange images, several properties are used
Align= "Bottom/middle/top"
Arrange images in a Web page
<p> image in text </p>
<p> image in text </p>
<p> image in text </p>
Notice that the picture does not appear in the Browse page, be sure to check the picture path carefully.
If you are using the same image repeatedly in the same file, it is best to use relative paths, not absolute paths or URLs, because the browser is downloaded only once and is displayed only once again when used with relative paths. The use of absolute paths is required to download each time, greatly reducing the image display rate.
Report:
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<body>
Insert a picture in a webpage <br/>
<br/>
Insert pictures from different locations <br/>
Pictures from a folder;<br/>
<br/>
Pictures from Baidu:<br/>
<br/>
Define the height and width of the picture <br/>
<br/>
Set the hint word for a picture <br/>
<br/>
Set a picture to a Web background <br/>
<!--<body background= "0.jpg" ><br/>--
Arrange images in a Web page
<p> image in text </p><br/>
<p> image in text </p><br/>
<p> image in text </p><br/>
</body>
Learn the application of image in HTML today