How to use the img tag of html

青灯夜游
Release: 2018-12-17 09:18:34
Original
10867 people have browsed it

Use of img tag: Display the obtained image through the src attribute of the img tag. The height and width attributes of the img tag set the size of the image. When the image cannot be displayed, use the alt attribute to display alternative text. The img tag of

How to use the img tag of html

html can be used to display images on a web page. It is an empty tag containing only attributes and no closing tag >.

Attributes of the img tag

The img tag can contain: src attribute, height and width attributes, and alt attribute. The src attribute and alt attribute are important attributes of the HTML img tag.

Let’s take a closer look at these attributes of the img tag:

1. src attribute

The src attribute is the description Required attribute of the image source or path, which instructs the browser where to find the image on the server.

So get the image? There are two situations:

1), Get the image in the same folder

When the HTML file and the image are in the same folder, like this:

How to use the img tag of html

We can directly fill in the image name in the src attribute, such as:

<div class="demo">
	<h1>img标签</h1>
	<img  src="How to use the img tag of html" / alt="How to use the img tag of html" >
</div>
Copy after login

Rendering:

How to use the img tag of html

##2) , in another directory/folder, such as:

How to use the img tag of html

, you can access the image like this:

<div class="demo">
	<h1>img标签</h1>
	<img  src="img/How to use the img tag of html" / alt="How to use the img tag of html" >
</div>
Copy after login

The effect is as shown above.

If it’s more complicated, when we put the How to use the img tag of html image in the local disk E ------> img folder, we can display the image like this:

< img src="E:/img/How to use the img tag of html">
Copy after login

2. Height and width attributes

The height and width attributes of the img tag can be used to set the height and width of the image, for example:

<img  src="img/How to use the img tag of html"     style="max-width:90%" height="300px"/ alt="How to use the img tag of html" >
Copy after login

Rendering:


How to use the img tag of html

The height and width of the img tag image can also be set through css, for example:

img{
   width:450px;
   height:300px;
}
Copy after login

3. alt attribute

#When the image cannot be displayed on the browser, you can use the alt attribute to display alternative text.

Example: Want to display How to use the img tag of html picture, but there is no one in the folder

img标签

<img src="img/How to use the img tag of html" style="max-width:90%" height="300px"/ alt="How to use the img tag of html" >
Copy after login
Rendering:


How to use the img tag of html##Summary : The above is the entire content of this article. I hope it will be helpful to everyone's study.

The above is the detailed content of How to use the img tag of html. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template