How to insert images:
Label definition and usagetags define images on HTML pages.
A tag has two required attributes: SRC and ALT.
Note:Technically, images are not inserted into HTML pages, but linked to HTML pages. labels are used to create placeholders for referenced images.
Tip:Add the image to another document by embedding the tag in the <A> tag.
AttributeNew: new attribute in HTML5.
| Attribute | Value | Description |
|---|---|---|
| Align | Top Bottom Middle Left Right |
Html5. HTML 4.01 is obsolete. Specifies how to arrange images according to the surrounding text. |
| ALT | Text | Specifies the alternative text of the image. |
| Border | Pixels | Html5. HTML 4.01 is obsolete. Specify the border around the image. |
| Crossoriginnew | Anonymous Use-Credentials |
Set cross-origin attributes of images |
| Height | Pixels | Specify the Image Height. |
| Hspace | Pixels | Html5. HTML 4.01 is obsolete. Specifies the white space on the left and right sides of the image. |
| Ismap | Ismap | Define the image as a server-side image ing. |
| Longdesc | URL | Html5. HTML 4.01 is obsolete. Point to a URL that contains a long Image Description document. |
| SRC | URL | Specifies the URL of the image to be displayed. |
| Usemap | # Mapname | Define an image as a client-side image ing. |
| Vspace | Pixels | Html5. HTML 4.01 is obsolete. Specifies the white space at the top and bottom of the image. |
| Width | Pixels | Specify the image width. |
Insert images from different locations
<Body> <p> insert an image from a folder: </P> <p> insert an image from a website :: </P> </body>
Create Image links
<Body> <p> A picture link: <a href = "http://www.w3cschool.cc"> </a> </P> </body>
Create an image map
<Body>? <P> click the sun or another planet and pay attention to the changes: </P>? ? <Map Name = "planetmap"> <area shape = "rect" coords = "0, 0, 82,126 "alt =" sun "href =" sun.htm "> <area shape =" circle "coords =" 90,58, 3 "alt =" Mercury "href =" mercur.htm "> <area shape =" circle "coords =" 124,58, 8 "alt =" Venus "href =" venus.htm "> </map>? </Body>
Summary;
Differences between ALT and title attributes:
The ALT attribute in the image is a text prompt that appears when the image cannot be normally displayed.
The title attribute in the image is a text prompt that moves the mouse over the element.
1. Features of ALT attributes
A. Alt attributes (note that they are "attributes" rather than "tags") include replacement instructions, which are required for images and image hotspots. It can only be used in IMG, area, and input elements (including applet elements ). For the input element, the alt attribute is intended to replace the image of the submit button. For example:
<input type="image" src="image.gif" alt="Submit" />
B. The ALT attribute ensures that the text does provide descriptive information for those who cannot see the image and makes sense in the context. For decorative images, you can use null values (with no spaces in the quotation marks) instead of irrelevant replacement texts such as "Blue Bullet ".
C. The ALT attribute must be less than 100 English characters in length or the replacement text must be as short as possible.
2. Features of the title attribute
A. The title attribute provides information about the creation of the element that sets this attribute, that is, non-essential additional information, most visualization browsers display the title text as a prompt message (tool tip) When hovering the cursor over a specific element. However, the manufacturer decides how to render the title text. Some browsers will display the title text in the status bar. For example, an earlier version of Safari browser.
B. The title attribute can be used for all tags except base, basefont, Head, HTML, Meta, Param, script, and title. But it is not necessary.
C. The title attribute has a good purpose, that is, to add descriptive text for the link, especially when the connection itself does not clearly express the purpose of the link. In this way, visitors will know where the links will take them, and they will not load a page that may not be completely interested. Another potential application is to provide additional descriptive information for images, such as dates or other non-essential information.
D. The title attribute value can be longer than the alt attribute value. However, some browsers may truncate too long text (such as tooltip or other ). For example, the Mozilla core browser can only display the first 60 characters.
<! Doctype HTML>
label
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
