Speaking of pictures, I believe everyone is familiar with them, because in our daily life and use, we can always see pictures, and pictures are more expressive and appealing than words when used. When we use pictures appropriately, we can make people The webpage is more beautiful and intuitive, especially the first viewing of the webpage is very important.
1. src attribute
Symbol: img
Features: single label
Code:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML insert picture</title></head><body><p>Picture to be displayed:</p><imgsrc=fish .jpg></body></html>
Summary: Inserting the image can be completed by introducing the src attribute name in the img tag, where the attribute value of src is "file name" or "path./file name". Note: The image to be inserted must be in the same file as the html project Caught! This section will provide key explanations.
2. Other attributes
3. alt usage
Description: When the image cannot be displayed for some reason, the attribute value corresponding to the alt attribute is displayed.
Code:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML insert picture</title></head><body><p>Picture to be displayed:</p><imgsrc=potato .jpgwidth=500alt=Potato></body></html>
Shown below:
4. Title usage
Note: If the picture is displayed normally, when the mouse hovers over the picture, the content corresponding to the attribute value of the title attribute will be displayed.
Code:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML insert picture</title></head><body><p>Picture to be displayed:</p><imgsrc=fish .jpgwidth=500alt=fish title=This is a cooked fish></body></html>
Effect: If the picture can be displayed normally, if you hover the mouse on the picture, the words "This is a cooked fish" will appear.
Displayed as shown:
5. Attribute characteristics
The attribute characteristics of image tags are applicable to most HTML tags:
1. The attributes of the tag are written inside the start tag.
2. Multiple attributes can exist in the tag at the same time
3. Separate attributes with spaces.
4. Tag names and attributes must be separated by spaces.
5. There is no order between attributes.
6. Path explanation and cross-level insertion of pictures
(1) Path introduction
1. Absolute path
The absolute position under the directory can directly reach the target location, usually referring to the path starting from the drive letter or the complete URL. In the insertion of html images, absolute paths are generally not used, and relative paths are more commonly used.
2. Relative path
The process of finding the target file starting from the current file is often used.
(2) Insert pictures across levels
1. Same level
When the image to be inserted is at the same level as the created html file, it can be inserted directly. The attribute value of src is "target file name. suffix" or "./target file name. suffix". When using the compiler to code, if you enter the first letter of the file name of the same level, the compiler will often automatically jump out of the rest of the content.
Code display: (assuming the picture is named picture and is in jpg format)
<imgsrc=picture.jpg> or <imgsrc=./picture.jpg>
2. Subordinate
If the html file is at the same level as the file folder and the picture to be inserted is in the file folder, then inserting the picture into the html file is a cross-level image access operation. The code is as follows:
<imgsrc=file/picture.jpg>
3. Superior
If there is a picture in the folder total and another folder test, and the html file is in the test folder, then inserting the picture into the html file belongs to accessing the upper-level folder. The code is as follows:
<imgsrc=../picture.jpg>
If you need to access the pictures in the upper two-level folders, the code is:
<imgsrc=../../picture.jpg>
4. Comprehensive application
If there are two folders, file1 and file2, file1 stores the html file, and file2 stores the image flag to be inserted in the format of jpg, then the code for inserting the flag image into the html file is as follows:
<imgsrc=../file2/flag.jpg>
(Return to the previous level first, then visit the next level)