Home  >  Article  >  Web Front-end  >  How to insert images on HTML

How to insert images on HTML

清浅
清浅Original
2018-12-04 15:55:0264175browse

Methods to insert pictures into HTML include: insert directly into the html code, insert into the CSS style, insert the picture by setting the src value for img in JavaScript, and insert the img attribute into innerHTML to insert the picture

If there are only text in a page, it will look very monotonous and boring, but when we add some pictures to it, it will look much better. Today we will introduce to you how to insert pictures on HTML pages.

【Recommended courses: HTML courseJavaScript course

How to insert images on HTML

Inserting pictures into HTML pages requires the use of the a1f02c36ba31691bcfe87b2722de723b tag in html

<img src="" alt="">

img stands for "image", which is the image displayed on the page.

src stands for "source". It tells the browser where to find the image. When writing code, it is best to save the image in a folder. In this way, you can use the subdirectory name in front of the name. Calling the image

alt represents "text" and tells the browser that if the image cannot be found, just display the text, or hover the mouse over the image and the set text will pop up

Web image format

.gif: It is a simple format, consisting of a series of colorful picture elements or points, arranged into a picture, which is an animated picture

.png: Similar to the gif format but it has partial transparency options and only supports lossless compression.

.JPEG: JPEG format is currently the most popular image format on the Internet. It is a format that can compress files to the smallest format.

HTML image insertion method

Insert images directly into the html code

<img src="images/1.jpg">

Rendering:

How to insert images on HTML

Insert images in CSS styles

<style>
div{
width:450px;
height: 300px;
background-image: url("images/2.jpg")
}
</style>
</head>
<body>
<div></div>

Rendering:

How to insert images on HTML

Use JavaScript language to insert pictures

<body>
<img id="demo">
<script>
	var demo=document.getElementById("demo");
	demo.src="images/3.jpg";
	demo.width="450";
	demo.height="300";
</script>
</body>

Rendering:

Image 5.jpg

##innerHTML method to insert pictures

<div id="demo"></div>
<script>
	var demo=document.ElementById("demo");
	demo.innerHTML=&#39;<img src="images/4.jpg" width="450px" height="300px">&#39;;
</script>

Rendering:

Image 7.jpg

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 insert images on HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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