How to insert images on HTML-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to insert images on HTML

清浅

Dec 04, 2018 pm 03:55 PM

html

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 course、JavaScript course】

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

<img src="" alt="">

Copy after login

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">

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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