Learning diary on November 6, 2020

Time:2021-6-2

There are many formats of image files, but there are not many image formats commonly used in web pages, such as GIF, JPEG and PNG
GIF
GIF is one of the most widely used image file formats on the Internet. It is an image format with index color. This format is widely used in web pages. It is characterized by small size and supports small page turning animation. GIF images can use up to 256 colors. It is most suitable for making logos, icons, buttons and other pictures with single color and style.
JPEG
JPEG is one of the most widely used image file formats on the Internet, which is suitable for photography or continuous tone images. JPG files can contain as many as millions of colors, so the size of JPG files is larger and the image quality is better. Generally, a good balance between image quality and file size can be achieved by compressing JPG files. It is recommended to use this format when the quality of pictures is required in the web page.
PNG
PNG is a new image format without patent rights, which has the advantages of GIF and jpg. Its display speed is very fast. It only needs to download 1 / 64 of the image information to display a low resolution preview image. It can be used to replace GIF format, also supports transparent layer, has advantages in quality and volume, and is suitable for transmission in the network.
Common attributes of image tags
SRC: Specifies the image source, that is, the URL path of the image
ALT: if the image cannot be displayed, replace the text description of the image
Title: provide tips or help information for users to use
Width: Specifies the display width (pixels or percentage) of the image. Usually, it is only set to the real size of the image to avoid distortion. If you need to change the image size, you’d better use the image editing tool to modify it in advance. Percentage is the percentage relative to the current browser window
Height: Specifies the display height (pixels or percentage) of the image
Border: Specifies the border size of the image, expressed in numbers. The default unit is pixels. By default, the image has no border, that is, border = 0
Align: Specifies the alignment of the image, and sets the position of the image in the horizontal (surround) or vertical (alignment) direction, including left (image on the left, text on the right of the image), right (image on the right, text on the left of the image), top (text and image are aligned on the top), right (image on the right, text on the left of the image), top (text and image are aligned on the top) Middle or bottom
Image tags

for example
In the same path, use ser = “picture name” in the next level folder of the web page, use ser = “folder name / picture name” in the upper level folder of the web page, use ser =. / picture name “