HTML에 그림을 삽입하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML에 그림을 삽입하는 방법

青灯夜游

May 03, 2021 am 09:06 AM

html 그림 삽입

html에서는 src 속성과 함께 img 태그를 사용하여 이미지를 삽입할 수 있습니다. 구문 형식은 ""입니다. img 태그는 HTML 페이지에서 이미지를 정의하고 참조된 이미지에 대한 자리 표시자를 만드는 데 사용되며 src 속성은 이미지가 표시되는 URL을 지정하는 데 사용됩니다.

HTML에 그림을 삽입하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

html에서는 img 태그를 사용하여 그림을 삽입할 수 있습니다. , 구문:

<img  src="/static/imghw/default1.png"  data-src="图片文件路径"  class="lazy"   / alt="HTML에 그림을 삽입하는 방법" >

로그인 후 복사

예:

<!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="HTML에 그림을 삽입하는 방법" >
	</body>
</html>

로그인 후 복사

렌더링:

HTML에 그림을 삽입하는 방법

HTML 태그

HTML에 그림을 삽입하는 방법 태그 HTML 페이지에서 이미지를 정의합니다.

HTML에 그림을 삽입하는 방법 태그에는 src와 alt라는 두 가지 필수 속성이 있습니다.

참고: 기술적으로 이미지는 HTML 페이지에 삽입되지 않지만 링크됩니다. HTML에 그림을 삽입하는 방법 태그는 참조된 이미지에 대한 자리 표시자를 만듭니다.

팁: HTML에 그림을 삽입하는 방법 태그를 태그 안에 중첩하여 다른 문서에 대한 링크를 추가하세요.

속성 값:

Attribute	value	Description
align	top bottom middle left right	HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 주변 텍스트를 기준으로 이미지가 정렬되는 방식을 지정합니다.
loading	eager: 즉시 로드 lazy: 지연 로드	브라우저가 이미지를 즉시 로드할지 또는 느리게 로드할지 지정합니다.
alt	text	이미지의 대체 텍스트를 지정합니다.
border	pixels	HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 이미지 주변의 테두리를 지정합니다.
crossorigin	익명 use-credentials	이미지의 도메인 간 속성을 설정하세요
height	pixels	이미지의 높이를 지정하세요.
hspace	pixels	HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 이미지의 왼쪽과 오른쪽에 있는 공백을 지정합니다.
ismap	ismap	은 이미지를 서버측 이미지 맵으로 지정합니다.
longdesc	URL	HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 긴 이미지 설명이 포함된 문서를 가리키는 URL입니다.
src	URL	이미지를 표시할 URL을 지정합니다.
usemap	#mapname	은 이미지를 클라이언트 측 이미지 맵으로 정의합니다.
vspace	pixels	HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 이미지 상단과 하단에 공백을 지정하세요.
width	pixels	이미지의 너비를 지정합니다.