Basic knowledge of image tags in html
Image file format used in web pages
gif
The full name of gif is Graphics Interchange Format. It was developed by Compu Serve in 1987 to fill the gaps in cross-platform image formats.
Taking into account the limitation of network bandwidth, the gif format uses the color lookup table technology, and only transmits the color serial numbers of up to 256 colors, so the amount of data is small, but the color performance is not good enough.
Its characteristics are:
- The extension of GIF format image files is ".gif";
- Use lossless compression algorithm LZW to process image data;
- The best performance for a combination of grayscale images and monochrome blocks;
- Support transparency, suitable for nesting on other backgrounds.
png
The full name of png is Portable Network Graphics. It is a lossless compressed bitmap format introduced by Unisys to replace the GIF format. Its characteristics are:
- The extension of GIF format image files is ".png";
- Use the derived algorithm of LZ77 algorithm for compression;
- Compared with the GIF format of the same color depth, the volume is smaller;
- Smooth color transition;
- Support transparency, suitable for nesting on other backgrounds;
- Animation is not supported.
jpg
The full name of jpg is Joint Photographic Experts Group. A compression standard for continuous tone still images formulated by the International Organization for Standardization (ISO). Its characteristics are:
- The extension of JPG format image files is ".jpg" or ".jpeg";
- Using predictive coding (DPCM), discrete cosine transform (DCT) and entropy coding joint coding method to compress image data;
- Can support extremely high compression rate;
- It can easily process 16.8M colors and reproduce full-color images;
- Does not support transparency;
- With lossy compression, some image data will be lost every time it is modified.
Representation of file path
Absolute path
The absolute path refers to the path from the root directory at the top of the tree directory structure to a directory or file. It consists of a series of consecutive directories, separated by a slash, until the directory or file to be specified. There are two situations:
- Files on the computer's hard disk, for example: d:/web/movie/index.html
- Files on the Internet, for example: http://www.itshixun.com/movie/index.html
relative path
The relative path refers to the path expressed in accordance with the positional relationship between this file and the referenced file. The positional relationship between the image and the html file using the image has the following three situations:
- The image file and the html file are located in the same folder, for example
<img src=“logo.gif” /> - The image file is located in the next level folder of the html file, for example
<img src="img/img01/logo.gif" /> - The image file is located in the upper folder of the html file, for example
<img src="../logo.gif" />
Application of images in web pages
There are three types of applications of images in web pages: used as background images, embedded in web pages, and used as link sources for hyperlinks.
Set web page background image
If you need to use an image as a web page background image, you can <body>add a background attribute to it, and its value is the path of the image.
Embedding images in web pages
If you need to embed an image in a web page, you can use <img>tags. The main attributes of the img tag are:
- src: the location of the given image source
- alt: Set the text displayed in the image position before the image is loaded
- border: set the image border
- Width and height: set the width and height of the image
- vspace and hspace: set the margins of the left and right and top and bottom edges of the picture
- title: The description text displayed when the mouse is over the image
- align: set the image and text alignment , the meaning of its attribute value is as shown in the figure below
| Attributes | Description |
|---|---|
| left | The image floats to the left of the text |
| right | The image floats to the right of the text |
| middle | Align the middle of the image with the text |
| top | Align the top of the image with the text |
| bottom | Align the bottom of the image with the text |
Use images as link sources for hyperlinks
Nesting img tags between the start and end tags of the hyperlink can use the image set by the img tag as the chain source of the hyperlink. E.g<a href="https://www.baidu.com"><img src="picture/logo-baidu.png"/></a>
Related concepts multiple choice questions and reference answers
Multiple choice
1. Among the following options, the file format of the unsuitable webpage image is ().
A,
jpg
B、
png
C、
gif
D、
bmp
2. If you want to add a background image to the web page, you can add the () attribute to the body tag.
A、
background
B、
src
C、
href
D 、
url
3. Which of the following options is not the representation of a relative path ().
A、
…/files/images/ch_cook1.gif
B、
…/files/images/ch_cook1.gif ./file/ch_cook1.gif
C、
c：/pic/images/ch_cook1.gif
D、
pic/folder/images/ch_cook1.gif
4. The title attribute is used to set the title of the web page.
A.
Correct
B.
Error
5. Which of the following options is not an attribute of the img tag ().
A、
href
B、
title
C 、
alt
D、
align
Reference answer
1、D
2、A
3、C
4、B
5、A