HTML image

HTML Image

#<img> ; ->image image

【Required attribute】

【1】src: address

【 2] alt: image alternative text for crawling by the exploration engine

[Optional attribute]

[1] height: image height

[2] width: image Width

【3】ismap: Define the image as a server-side image mapping

<img> is an empty tag, meaning that it only contains attribute and no closing tag.

To display an image on the page, you need to use the source attribute (src). src refers to "source". The value of the source attribute is the URL address of the image.

The syntax for defining images is:

The alt attribute is used to define a string of prepared replaceable text for the image.

The value of the replacement text attribute is user-defined.

The image cannot be loaded in the browser At the same time, the replacement text attribute tells the reader the information they are missing. At this point, the browser will display this alternative text instead of the image.

#The height (height) and width (width) properties are used to set the height and width of the image.

The default unit of the attribute value is pixels:

Tip: It is a good practice to specify the height and width of the image. If an image has a specified height and width, the specified dimensions will be retained when the page loads. If the size of the image is not specified, the overall layout of the HTML page may be destroyed when the page is loaded.

Example

Add a background image:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body background="http://pic.58pic.com/58pic/15/97/99/27W58PICZS7_1024.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>

Set the height and width of the image:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body >
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="50" height="50">
<br />
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="100" height="100">
<br />
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="150" height="150">
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body > <p>创建图片链接: <a href="http://www.php.cn"> <img src="http://www.runoob.com/try/demo_source/smiley.gif" alt="HTML 教程" width="32" height="32"> </a> </p> </body> </html>

submit Reset Code

Automatic operation