HTML image

HTML Image - Image tag (<img>)

In HTML, images are represented by <img> tag definition.

<img> is an empty tag, which means that it only contains attributes and has no closing tag.

HTML Image - Source Attribute (Src)

To display an image on the page, you need to use the Source Attribute (src). src refers to "source". Refers to the location where the image is stored,

If the image and HTML text are in the same directory: for example index.html and img.jpg

Writing: <img src="img.jpg">

Pictures and HTML are not in the same directory: there are two situations:

1. The picture img.jpg is in the folder images, and the index.html and images folders are in the same directory.

Writing method: <img src="images/img.jpg">

2. The picture img.jpg is in the folder images, index.html is in the controller folder, images In the same directory as the controller folder

Writing: <img src="../images/img.jpg">

If the source is from the Internet, it is necessary Use absolute path

to write: <img src="http://www.baidu.com/pic/img.jpg">

HTML Image - Alt Attribute

#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.

##<img src="1.jpg" alt="Display when the picture cannot be displayed">

When the browser cannot load the image, the replacement text attribute tells readers the information they are missing. At this point, the browser will display this alternative text instead of the image. It's a good practice to add the alt text attribute to all images on the page. This

helps display information better and is very useful for those who use text-only browsers.

HTML Image - Set the height and width of the image

height (height) and width (width) attributes are used to set the image height and width.

The default unit of the attribute value is pixels:

##<img src="../style/images/pulpit.jpg" alt="Pulpit rock" width= "304" height="228">

Tip

: It is a good habit 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 loading the page,

Basic Notes

Note: If an HTML file contains ten images, in order to display them correctly This page needs to load 11 files. Loading images takes time, so our advice is: use images with caution.

Note: When loading the page, pay attention to the path to insert the page image. If the position of the image cannot be set correctly, the browser cannot load the image, and the image tag will display a broken image.

Example

Add a background image to our web page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body background="http://imglf0.ph.126.net/1EnYPI5Vzo2fCkyy2GsJKg==/2829667940890114965.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>

Run the program and see if there are any changes

Example

This example demonstrates how Resize pictures to different sizes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="50" height="50">
<br />
<img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="100" height="100">
<br />
<img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
</body>
</html>

Run the program and see

Example

Make a hyperlink with a picture

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>创建图片链接:
    <a href="http://www.php.cn/">
        <img src="http://img3.redocn.com/20100401/Redocn_2010022518194991.jpg" alt="HTML 教程" width="100" height="100"></a></p>
</body>
</html>

Run the program and click on the image to see

Example

This example shows how to convert an ordinary image Set as image map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
<a href="">
    <img src="http://p11.qhimg.com/t010fae31f5653bffe7.jpg" ismap />
</a>
</body>
</html>

Run Run and see

HTML image tag

Tag	Description
<img>	Define the image.
<map>	Define the image map.
<area>	Defines the clickable area in the image map.

Find a picture and put it in your designated directory and try to insert it into your web page

Continuing Learning

new file

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body background="http://imglf0.ph.126.net/1EnYPI5Vzo2fCkyy2GsJKg==/2829667940890114965.jpg"> <h3>图像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果图像小于页面，图像会进行重复。</p> </body> </html>

submit Reset Code

Automatic operation

HTML image

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]