HTML의 img 태그를 사용하는 방법

img 태그 사용: img 태그의 src 속성을 통해 가져온 이미지를 표시합니다. img 태그의 height 및 width 속성은 이미지를 표시할 수 없는 경우 Alt 속성을 사용하여 대체 텍스트를 표시합니다. .

html의 img 태그는 웹페이지에 이미지를 표시하는 데 사용할 수 있습니다. 이 태그는 속성만 포함하고 닫는 태그>는 포함하지 않는 빈 태그입니다.

img 태그 속성

img 태그에는 src 속성, 높이 및 너비 속성, alt 속성이 포함될 수 있습니다. src 속성과 alt 속성은 HTML img 태그의 중요한 속성입니다.

img 태그의 속성을 자세히 살펴보겠습니다.

1.src 속성

src 속성은 이미지 소스나 경로를 설명하는 필수 속성입니다. 서버에 있는 이미지.

그럼 이미지를 얻으시겠어요? 두 가지 상황이 있습니다:

1) 동일한 폴더에 이미지를 가져옵니다.

HTML 파일과 이미지가 동일한 폴더에 있는 경우 다음과 같습니다.

다음과 같이 이미지 이름을 직접 입력할 수 있습니다. src 속성(예:

<div class="demo">
	<h1 id="img标签">img标签</h1>
	<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/024/5c14ce0fc6570638.jpg?x-oss-process=image/resize,p_40"  class="lazy"   / alt="HTML의 img 태그를 사용하는 방법" >
</div>

Rendering:

2), 다른 디렉터리/폴더(예:

)에서 다음과 같이 이미지에 액세스할 수 있습니다.

<div class="demo">
	<h1 id="img标签">img标签</h1>
	<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/024/5c14d1bf3d0d7788.jpg?x-oss-process=image/resize,p_40"  class="lazy"   / alt="HTML의 img 태그를 사용하는 방법" >
</div>

렌더링은 다음과 같습니다. 위에 표시된.

더 복잡하다면 HTML의 img 태그를 사용하는 방법 이미지를 로컬 디스크 E ------> img 폴더에 넣으면 다음과 같이 이미지를 표시할 수 있습니다:

< img >

2, 높이 및 너비 속성

img 태그의 높이 및 너비 속성을 사용하여 이미지의 높이와 너비를 설정할 수 있습니다. 예:

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/024/5c14d1bf3d0d7788.jpg?x-oss-process=image/resize,p_40"  class="lazy"       style="max-width:90%" height="300px"/ alt="HTML의 img 태그를 사용하는 방법" >

Rendering:

img 태그 이미지의 높이와 너비도 가능합니다. 예를 들어,

img{
   width:450px;
   height:300px;
}

3.alt attribute

이미지가 브라우저에 표시되지 않는 경우 alt 속성을 사용하여 대체 텍스트를 표시할 수 있습니다.

예: HTML의 img 태그를 사용하는 방법 사진을 표시하고 싶지만 폴더에

<h1 id="img标签">img标签</h1>
<img  src="img/HTML의 img 태그를 사용하는 방법"     style="max-width:90%" height="300px"/ alt="HTML의 img 태그를 사용하는 방법" >

가 없습니다.

렌더링:

요약: 위 내용이 이 글의 전체 내용입니다. 모두의 공부.

위 내용은 HTML의 img 태그를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!