Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of the basic image knowledge of html. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

To display the image on the page, you need to use the src attribute. Src means "source". The value of the source property is the URL address of the image.

The syntax for defining an image is:

URL refers to the location where the image is stored. If the image named "pulpit.jpg" is in the images directory of www.runoob.com, its URL is https://img.php.cn/upload/article/000/054/025/69ee4cbf3049b8bcc16a7e91b3657b16-0.jpg.

The browser displays the image where the image label appears in the document. If you place the image tag between two paragraphs, the browser will first display the first paragraph, then the picture, and finally the second paragraph.

HTML Image-Alt attribute

The alt property is used to define a string of prepared replaceable text for the image.

The value of the replacement text property is user-defined.

When the browser cannot load the image, replace the text attribute to tell the reader what information they have lost. At this point, the browser will display the alternative text instead of the image. It is a good habit to add replacement text attributes to all images on the page, which helps to better display information and is very useful for those who use plain text browsers.

HTML image-sets the height and width of the image

The height and width properties are used to set the height and width of the image.

The default unit of the attribute value is pixels:

Tip: it is a good habit to specify the height and width of the image. If the image specifies a height width, the specified size is retained when the page is loaded. If you do not specify the size of the picture, it is possible to destroy the overall layout of the HTML page when the page is loaded.

Basic precautions-useful tips:

Note: if a HTML file contains ten images, 11 files need to be loaded in order to display the page correctly. It takes time to load pictures, so our advice is: use pictures carefully.

Note: when loading a page, pay attention to the path of inserting the page image. If the location of the image is not set correctly, the browser cannot load the image, and the image label will display a broken picture.

HTML image label

Label description

Define Ima

Define an image map

Define clickable areas in an image map

On the "html basic image knowledge example analysis" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.