HTML 이미지

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt="Pulpit rock" width="304" height="228">

</body>
</html>

인스턴스 실행»

"실행"을 클릭하세요. 온라인 예제를 보려면 "예제" 버튼

온라인 예제

이 예제는 웹 페이지에 이미지를 표시하는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>
一个图像:
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" width="32" height="32"></p>

<p>
一个动图:
<img src="/upload/course/000/000/010/58046a41c6e3c115.gif" alt="Computer man" width="48" height="48"></p>

<p>
注意插入动图的语法和静态图的语法是一样的。
</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

다른 위치의 사진 삽입

이 예에서는 다른 폴더나 서버의 사진을 웹 페이지에 표시하는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>一个来自文件夹中的图像:</p>
<img src="/upload/course/000/000/010/58046b14a8b9f738.gif" alt="Google Chrome" width="33" height="32"><p>一个来自php中文网的图像:</p>
<img src="/upload/course/000/000/010/58046c29b47ef575.png" alt="php.cn" width="336" height="69">

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

(더 많은 예는 이 페이지 하단에서 찾을 수 있습니다.)

HTML 이미지 - 이미지 태그(<img>) 및 소스 속성(Src)

In HTML, 이미지 <img> 태그로 정의됩니다.

<img>는 빈 태그입니다. 즉, 속성만 포함하고 닫는 태그가 없습니다.

페이지에 이미지를 표시하려면 source 속성(src)을 사용해야 합니다. src는 "소스"를 나타냅니다. source 속성의 값은 이미지의 URL 주소입니다.

이미지 정의 구문은 다음과 같습니다.

<img src="url" alt="some_text">

URL은 이미지가 저장되는 위치를 나타냅니다. "../style/images/boat.gif"라는 이미지가 www.php.cn의 이미지 디렉토리에 있는 경우 해당 URL은 http://www.php.cn/images/boat.gif입니다.

브라우저는 문서에서 이미지 태그가 나타날 때마다 이미지를 표시합니다. 두 문단 사이에 이미지 태그를 배치하면 브라우저는 첫 번째 문단을 먼저 표시한 다음 이미지, 마지막으로 두 번째 문단을 표시합니다.

HTML 이미지 - Alt 속성

alt 속성은 이미지에 대해 준비된 대체 가능한 텍스트 문자열을 정의하는 데 사용됩니다.

대체 텍스트 속성의 값은 사용자가 정의합니다.

<img src="../style/images/boat.gif" alt="Big Boat">

브라우저가 이미지를 로드할 수 없는 경우 대체 텍스트 속성은 독자에게 잃어버린 정보를 알려줍니다. 이 시점에서 브라우저는 이미지 대신 이 대체 텍스트를 표시합니다. 페이지의 모든 이미지에 대체 텍스트 속성을 추가하는 것이 좋습니다. 이는 정보를 더 잘 표시하는 데 도움이 되며 텍스트 전용 브라우저를 사용하는 사용자에게 매우 유용합니다.

HTML 이미지 - 이미지의 높이와 너비를 설정합니다.

높이와 너비 속성은 이미지의 높이와 너비를 설정하는 데 사용됩니다.

속성 값의 기본 단위는 픽셀입니다.

<img src="../style/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">

팁: 이미지의 높이와 너비를 지정하는 것이 좋습니다. 이미지의 높이와 너비가 지정된 경우 페이지가 로드될 때 지정된 크기가 유지됩니다. 이미지 크기를 지정하지 않으면 페이지 로드 시 HTML 페이지의 전체 레이아웃이 깨질 수 있습니다.

기본 참고 사항 - 유용한 팁:

참고: HTML 파일에 10개의 이미지가 포함된 경우 페이지를 올바르게 표시하려면 Loading 11이 필요합니다. 파일. 이미지를 로드하는 데는 시간이 걸리므로 이미지를 주의해서 사용하는 것이 좋습니다.

참고: 페이지를 로드할 때 페이지 이미지를 삽입할 경로에 주의하세요. 이미지 위치를 올바르게 설정할 수 없으면 브라우저가 이미지를 로드할 수 없으며, 이미지 태그에 깨진 이미지가 표시됩니다.

예제 더보기

1. 이미지 정렬

이 예는 텍스트에서 이미지를 정렬하는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>默认对齐的图像 (align="bottom"):</h4>
<p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" width="32" height="32"> 这是一些文本。</p>

<h4>图片使用 align="middle":</h4>
<p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>

<h4>图片使用 align="top":</h4>
<p>这是一些文本。 <img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" align="top" width="32" height="32">这是一些文本。</p>

<p><b>注意:</b>在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

2. 플로팅 이미지
이 예에서는 이미지를 단락의 왼쪽이나 오른쪽에 플로팅하는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的左边。
</p>

<p>
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>

<p><b>注意:</b> 在这里我们使用了 CSS "float" 属性，在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

3. 이미지 링크 설정
이 예에서는 이미지를 링크로 사용하는 방법을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>创建图片链接:
<a href="http://www.php.cn/html/html-tutorial.html">
<img src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://www.php.cn/html/html-tutorial.html">
<img border="0" src="/upload/course/000/000/010/58046a2b7e46d104.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

4. 이미지 맵 만들기
이 예에서는 클릭 가능한 영역이 있는 이미지 맵을 만드는 방법을 보여줍니다. 이러한 각 필드는 하이퍼링크입니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="/upload/course/000/000/010/58046db4ca85a572.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요