HTML insert image example (html add image)

HTML insert image example (html add image)

Inserting images into HTML requires HTML tags to display them, which can be achieved using the img tag.

1. HTML image tag syntax


Copy code
The code is as follows:

<img src="divcss5-logo-201305.gif" width="165" height="60" />

img introduction:

src is followed by the image path address

width Set the image width

Height Set the image height

2. Specific HTML picture display example - TOP

We insert three pictures into the HTML source code, one with the original size, one with a smaller width and height, and one with a larger width and height.

1. Complete HTML code of the example:


Copy code
The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Image insertion html online demonstration <a href="http://www.vcss.com</title">www.vcss.com</title</a>>
</head>

<body>
<p>Original large image</p>
<p>
<img src="divcss5-logo-201305.gif" width="165" height="60" />
</p>
<p>Small image</p>
<p>
<img src="divcss5-logo-201305.gif" width="105" height="30" />
</p>
<p>Enlarge the image</p>
<p>
<img src="divcss5-logo-201305.gif" width="365" height="120" />
</p>
</body>
</html>

2. Screenshot of HTML inserting picture example

HTML picture insertion display example screenshot

<<:  Problems with configuring https server and reverse proxy with Nginx under Windows

>>:  Tips for turning pixels into comprehensive brand experiences

Recommend

Detailed code for adding electron to the vue project

1. Add in package.json "main": "el...

Vue uses ECharts to implement line charts and pie charts

When developing a backend management project, it ...

MySQL Learning: Three Paradigms for Beginners

Table of contents 1. Paradigm foundation 1.1 The ...

The most common mistakes in HTML tag writing

We better start paying attention, because HTML Po...

Full-screen drag upload component based on Vue3

This article mainly introduces the full-screen dr...

Solve the problem of docker's tls (ssl) certificate expiration

Problem phenomenon: [root@localhost ~]# docker im...

Zabbix monitors the process of Linux system services

Zabbix automatically discovers rules to monitor s...

Scary Halloween Linux Commands

Even though it's not Halloween, it's wort...

Vue.js style layout Flutter business development common skills

Correspondence between flutter and css in shadow ...

Detailed explanation of various loop speed tests in JS that you don’t know

Table of contents Preface 1. for loop 2. while lo...

Example explanation of MySQL foreign key constraints

MySQL's foreign key constraint is used to est...

Will the deprecated Docker be replaced by Podman?

The Kubernetes team recently announced that it wi...

Analyze the usage and principles of Vue's provide and inject

First, let's talk about why we use provide/in...