HTML img image tag

 The HTML img image tag is used to insert pictures on the web page to increase the richness of the web page. The standard HTML img image tag does not need to be like other tags. It has a start tag and an end tag, but can be an independent individual, which makes it easy to add pictures. Inserted into the place to be displayed, the HTML img image tag also contains many different parameters for designing the image. For example, border can add a frame to the image, width can be the display width of the existing image, and height can limit the display height of the image. ... Wait.

HTML img image tag syntax

<img src="The URL of the picture to be inserted" alt="Alternative text for the picture" title="The text to be displayed" border="Picture border">

In the basic grammar, except for src, all other items are optional items. The "URL of the picture to be inserted" is the URL of the picture to be displayed. If there is no need to design the picture or make any text mark, Just write "<img src="picture URL">" so that you can insert a picture into a web page. In fact, when writing a blog post, insert the picture into the article. The same is the img tag. The following are commonly used To some HTML img parameters.

HTML img picture parameters

parameter	Instructions
src	Image URL, necessary item.
border	Picture border, for example border="0" means the border is 0.
alt	Picture alternative text, when the picture display is invalid, the alt text will be displayed.
title	Picture text mark, when the mouse moves over the picture, the text is automatically displayed.
width	The image width, for example, width="120px" means the width is limited to 120px.
height	The image height, for example height="100px" means the height is limited to 100px.

HTML <img> insert image implementation example

<img src="upload/20131017185230.gif" alt="Alternative text one" title="Sample picture one">
<img src="upload/20131017185230.gif" alt="Alternative text two" title="Sample picture two "width="100px" height="100px">
<img src="upload/20131017185230.gif" alt="Alternative text three" title="Sample image three" width="100px;">

The example presents the results as

The example prepares the display of three pictures. The first example uses the easiest way to display the pictures without limiting the width and height. The second example limits the display width and height of the picture, and it is obvious that the picture is deformed. The original rectangle becomes a square, and the text is also distorted. This is the result of the mandatory display range. The third example only limits the display width of the picture, and does not limit the display height. The picture is reduced in proportion Way to present.

Hyperlink the picture

<a href="http://www.wibibi.com"><img src="Sample picture" border="0" title="Wibibi Web Design Teaching Encyclopedia"></a>

The above example shows

To add a hyperlink to an image, you must use HTML hyperlink syntax. Generally, border="0" is used to hide the border when adding a hyperlink to an image. Otherwise, it may be ugly in some browsers such as IE Ugly border.