Home >Web Front-end >HTML Tutorial >How to insert images on HTML
How to insert images on HTML
- 清浅Original
- 2018-12-04 15:55:0264212browse
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 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:
Insert images in CSS styles
<style>
div{
width:450px;
height: 300px;
background-image: url("images/2.jpg")
}
</style>
</head>
<body>
<div></div>Rendering:
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:
<div id="demo"></div>
<script>
var demo=document.ElementById("demo");
demo.innerHTML='<img src="images/4.jpg" width="450px" height="300px">';
</script>Rendering:
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!