HTML 이미지

HTML 이미지


1001.jpg

<img> ; ->이미지


[필수 속성]

[1] src: 주소

[ 2 ] alt: 탐색 엔진에 의한 크롤링을 위한 이미지 대체 텍스트

[선택 속성]

[1] height: 이미지 높이

[2] width: 이미지 너비

                                              ismap: ismap: 이미지에 대한 서버 측 이미지 매핑으로 정의됨


<img> 그리고 아니 닫는 태그.

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

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

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


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

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

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

이미지를 로드할 수 없습니다. 브라우저 동시에 대체 텍스트 속성은 독자에게 누락된 정보를 알려줍니다. 이 시점에서 브라우저는 이미지 대신 이 대체 텍스트를 표시합니다.


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

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

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

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

배경 이미지 추가:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body background="http://pic.58pic.com/58pic/15/97/99/27W58PICZS7_1024.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面,图像会进行重复。</p>
</body>
</html>

이미지의 높이와 너비 설정:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body >
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="50" height="50">
<br />
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="100" height="100">
<br />
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="150" height="150">
</body>
</html>


지속적인 학습
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body > <p>创建图片链接: <a href="http://www.php.cn"> <img src="http://www.runoob.com/try/demo_source/smiley.gif" alt="HTML 教程" width="32" height="32"> </a> </p> </body> </html>