Web page production puzzles: image file path_HTML/Xhtml_Web page production

This article is original by Script House Lightning. You can remove this sentence when reprinting it, but do not change the content of the article under any excuse or method, otherwise you will be responsible for the consequences! Please indicate the author and source when reprinting.
A long time ago until now, many netizens have asked me similar questions, especially after copying some graphics and image special effects codes on this site, problems such as the pictures always not being displayed, are here specifically for these beginners Write a related tutorial. If you have no questions about this, please go away!
Regarding the application of images in web pages, that is, the application of image tags in web pages, let me summarize it for everyone!
1) Overview of image markup.
If a webpage only has text but no images, it seems to have lost a lot of vitality. Images are a very important aspect in webpage production. HTML Professional provides the tag to output images to the webpage. . This tag has SRC, ALT, ALIGN, BORDER, WIDTH and HEIGHT attributes.
2) Attribute introduction.
SRC attribute. For the tag, its SRC attribute is a necessary attribute, that is, SRC must be assigned a value in the tag and is an indispensable part of the tag. At this time, IMG should be written in the following format:

Among them, the parameter value is the full file name and path of the image.
We know that image files generally take up much more space than plain text files such as HTML documents, and web design often requires adding many images to increase appeal. If these image files are added to the HTML document, the HTML document will be becomes very large, the transmission on the network will inevitably be very slow. The
tag does not actually add the image to the HTML document, but tells HTML: Which image file is it? Where? So that HTML can call it from the original location of the image file. The function of the SRC attribute is to answer these two questions, so the parameter value of the SRC attribute must have the full file name of the image file, that is, the file name and extension, such as logo.gif, which answers the question of which image file it is; The parameter value must also have the path to the image file so that HTML knows where to find the image file.
Among the parameter values ​​of the SRC attribute, how to write the path of the image file is often a problem for beginners.
The path to the image file can be a relative path or a URL. The so-called relative path refers to the path formed by the relative position of the file to be linked or embedded into the current HTML document and the current HTML file. If the HTML file and the image file (assuming the name is logo.gif) are in the same directory, you can write the code as ; if the image file is placed in a subdirectory of the directory where the current HTML file is located (assuming the subdirectory name is (for images), the code should be ; if the image file is placed in the upper directory of the directory where the current HTML file is located (assuming the upper directory is named home), the relative path must be a quasi-website, that is, use ". ./" to represent the developer's website, followed by the path of the image file on the developer's website. For example, assuming home is a directory under this website, the code should be . If home is a subdirectory under the directory king under the website, the code should be written as .
Other properties. The ALT, ALIGN, BORDER, WIDTH and HEIGHT attributes of the tag are optional. The ALIGN attribute is the alignment of the image, and the parameter values ​​are left, center, and right; BORDER is the border of the image, and its parameter is greater than or equal to 0, and the default unit is pixels; WIDTH and HEIGHT attributes It is the width and height of the image, and the default unit of its parameters is pixels; the ALT attribute is the text displayed when the mouse moves over the image. I would like to remind you that you must use this attribute when making web pages. What is the purpose of doing this? It can display prompt text when the image cannot be displayed for some reason, which increases user friendliness.