How to insert pictures in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to insert pictures in html

青灯夜游

May 03, 2021 am 09:06 AM

html Insert picture

In html, you can use the img tag with the src attribute to insert images. The syntax format is "". The img tag is used to define images in HTML pages and create placeholders for referenced images; and the src attribute is used to specify the URL where the image is displayed.

How to insert pictures in html

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

In html, you can use the img tag to insert the image , syntax:

<img  src="/static/imghw/default1.png"  data-src="图片文件路径"  class="lazy"   / alt="How to insert pictures in html" >

Copy after login

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%" / alt="How to insert pictures in html" >
	</body>
</html>

Copy after login

Rendering:

How to insert pictures in html

HTML tag

How to insert pictures in html tag defines an image in an HTML page.

How to insert pictures in html tags have two required attributes: src and alt.

Note: Technically, images are not inserted into the HTML page, but linked to it. The How to insert pictures in html tag creates a placeholder for the referenced image.

Tip: Add a link to another document by nesting an How to insert pictures in html tag within an tag.

Attribute value:

srcSpecifies the URL to display the image. usemap Defines the image as a client-side image map. vspacewidthSpecifies the width of the image.

Attribute	Value	Description
align	top bottom middle left right	HTML5 Not supported. HTML 4.01 is deprecated. Specifies how images are arranged relative to surrounding text.
loading	eager: Load immediately lazy: Lazy loading	Specifies whether the browser should load images immediately or lazily.
alt	text	Specifies the alternative text for the image.
border	pixels	HTML5 Not supported. HTML 4.01 is deprecated. Specifies the border around the image.
crossorigin	anonymous use-credentials	Set the cross-domain attributes of the image
height	pixels	Specify the image's high.
hspace	pixels	HTML5 Not supported. HTML 4.01 is deprecated. Specifies the margins on the left and right sides of the image.
ismap	ismap	Specifies the image as a server-side image map.
longdesc	URL	##HTML5 Not supported. HTML 4.01 is deprecated. URL pointing to a document containing a long image description.
	URL
	#mapname
	pixels	HTML5 Not supported. HTML 4.01 is deprecated. Specifies the margin at the top and bottom of the image.
	pixels