This section can be summarized as: inserting pictures on a webpage, resizing pictures, and using thumbnails to link to larger images.
Three formats for images: JPEG png gif
Photos, complex images using JPEG, monochrome images, logos, geometry using PNG, and GIF.
JPEG is most suitable for continuous-tone images, does not support transparency, the file is relatively small, easy to display the Web page efficiently, does not support animation. is a "lossy format" because when you reduce the size of a file, you lose some information about the image and include up to 16 million different colors of the image.
PNG is best suited for images with monochrome images and lines (such as logos, clip art, small text in images), three kinds: PNG-8 (supports 256 colors), PNG-16 (supports thousands of colors), PNG-24 (supports millions of colors), is a "lossless" format
The message is not discarded when compressing the file, transparency is allowed, and PNG is larger than the corresponding JPEG. However, depending on the PNG color number, not all is absolute greater than.
GIF is similar to PNG, applicable to simple graphs, can represent 256 different colors of the image, lossless format, support transparency, but only allowed to set a color transparency; GIF tends to be larger than JPEG files, and animations are supported.
<a> tags can be used with nesting. <a href= "Lianjie" ></A> Click the picture to link to another page.
Insert Picture label Picture with Home page in the same directory. In the picture, you can create a new folder for the picture, such as the folder has sub-files index.html and photos folder, the picture path is . In addition, the IMG tag can have alt attribute, alt= "to describe the text of the picture", when the picture file too large browser loading speed is slower, when the picture is not loaded, the ALT attribute of the descriptive text appears in the original position.
<! DOCTYPE html>
<title>mypod.downtown</title><body>
<p></p>
</body>
The underlined part in the writing error, directly write the photo/seattle_downtown.jpg, the picture cannot be loaded. This code is an HTML page linked to a thumbnail, which is a larger image of the thumbnail image. Have built a large map of the HTML folder (with the photos folder), to find a larger image in the HTML, its relative path from the HTML folder back to parent folder and then go to the Photos folder to find Seattle_downtown.jpg, ... (dot dot means to return to superior), so the path is changed to: /photos/seattle_downtown.jpg.
Summary down, do things too careless, pay attention to the details of detail! Think more!
HTML----about Images