HTML thorough analysis (8) graphical markers

Source: Internet
Author: User
Tags insert client
Graphics

Graphical indicators

To understand this "HTML thorough analysis" of the mark classification, please see " Mark List ".
Please also understand the distinction between containment and empty tags, see "HTML concept ."

:

Usage: Include an image in the document
Start/End identification: mandatory/illegal
Properties:%coreattrs,%i18n,%events
Src= "..." Image URL
Alt= "..." to show replaceable text
Align= "..." is opposed. Control alignment (left, right, center, justify)
Width= "..." Display the width of the image
Height= "..." shows the height of the image
Border= "..." the width of the image boundary
Hspace= "..." the horizontal spacing between the image and the other content
Vspace= "..." the vertical spacing separating the image from the other content
Usemap= "..." to the URL of the client image mirror
Ismap Verify that the client image is mirrored correctly
Null: Allow

called graphic indicators, mainly used to insert graphical indicators, mainly used to insert pictures in the Web page, as for other uses such as video files and other play and image map (image maps or a map of multiple links) will not be described in this section, please see " image Map " and " other tags . "

General parameter setting of :

For example src= "logo.gif" width=100 height=100 hspace =5 vspace =5 Border=2 align= "Top" alt= "Logo of penpals Garden" lowsrc= "Pre_logo.gif" >

  • src= "logo.gif"
    Picture sources, accepted. gif,. jpg and. png format, the former two have been in the long run, the latter from 96 onwards, the future to replace the first two. If the image file is in the same directory as the HTML file, just write the file name, otherwise the correct path must be added, relative or absolute.
  • width=100 height=100
    Set picture size, this width and height generally using pixels as units. Usually only set to the real size of the picture to avoid distortion, if you need to change the size of the picture is best to use image editing tools.
  • hspace=5 vspace=5
    Set the edge of the picture blank to avoid text or other pictures close. Hspace is to set the picture around the space, is to set the picture up and down the space, height using pixels as a unit.
  • Border=2
    Picture border thickness.
  • Align= "Top"
    Adjust the position of the text next to the picture, you can control the text appears in the picture above, middle, bottom, and so on, optional values: Top, middle, bottom, left, right, default for Botom. Netscape also supports Texttop, Baseline, Absmiddle, Absbottom,
    Texttop indicates that the picture and text are aligned on top line,
    Baseline indicates that the picture is aligned to the current line of text,
    Absmiddle indicates that the picture is aligned to the current line of text absolutely Central,
    Absbottom indicates that the picture is aligned to the current absolute bottom of the line of text, (absolute bottom means that it takes into account the bottom of the words such as Y, G, q).
  • alt= "Logo of Penpal Garden"
    This is the text used to describe the graphic, and if you use a text browser, the text will be displayed instead of the picture because it does not support the image. If you support a picture browser, the text will also appear when you move the mouse over the picture.
  • lowsrc= "Pre_logo.gif"
    Set first show the low resolution of the picture, if the added is a large picture, download to a very long time, this low resolution of the picture will first be shown to avoid viewers lose interest, usually the original version of black and white.

Example one:

Original code Normal insertion
Show results Normal insertion

Example two:

Original code setting up and down blank positions
Show results Setting up and down blank positions

Example three:

Original code setting up and down blank positions
Show results Set the middle of the picture to align, and the border thickness is 4.

Example four:

Original code Set the picture to the right.
Show results Set the picture on the right.

Example five:

Original code Enlarged Picture
Show results



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.