HTML 이미지 - 이미지 태그(<img>)
HTML에서는 이미지를 표현합니다. <img> 태그 정의에 따라
<img>는 빈 태그입니다. 즉, 속성만 포함하고 닫는 태그가 없습니다.
HTML 이미지 - 소스 속성(Src)
페이지에 이미지를 표시하려면 소스 속성(src)을 사용해야 합니다. . src는 "소스"를 나타냅니다. 이미지가 저장된 위치를 나타냅니다.
이미지와 HTML 텍스트가 동일한 디렉토리에 있는 경우: 예를 들어 index.html 및 img.jpg
쓰기: <img src= "img.jpg">
사진과 HTML이 같은 디렉토리에 있지 않습니다. 두 가지 상황이 있습니다.
1 사진 img.jpg는 이미지 폴더에 있고 인덱스는 .html과 이미지 폴더는 같은 디렉토리에 있습니다.
작성: <img src="images/img.jpg">
2.사진은 img.jpg 폴더에 있습니다. Images, index.html은 컨트롤러 폴더에, Images 컨트롤러 폴더와 같은 디렉터리에
쓰기: <img src="../images/img.jpg">
소스가 인터넷에 있는 경우 절대 경로
를 사용하여 다음과 같이 작성해야 합니다. <img src="http://www.baidu.com/pic/img.jpg">
HTML 이미지 - Alt 속성
alt 속성은 이미지에 대해 준비된 대체 가능한 텍스트 문자열을 정의하는 데 사용됩니다.
대체 텍스트 속성의 값은 사용자가 정의합니다.
<img src="1.jpg" alt="사진을 표시할 수 없을 때 표시">
브라우저가 이미지를 로드할 수 없는 경우 대체 텍스트 속성은 독자에게 누락된 정보를 알려줍니다. 이 시점에서 브라우저는 이미지 대신 이 대체 텍스트를 표시합니다. 페이지의 모든 이미지에 대체 텍스트 속성을 추가하는 것이 좋습니다. 이
는 정보를 더 잘 표시하는 데 도움이 되며 텍스트 전용 브라우저를 사용하는 사람들에게 매우 유용합니다.
HTML 이미지 - 이미지의 높이와 너비를 설정합니다.
height(높이) 및 width(너비) 속성이 사용됩니다. 이미지 높이와 너비를 설정합니다.
속성 값의 기본 단위는 픽셀입니다.
<img src="../style/images/pulpit.jpg" alt="Pulpit rock" width= "304" height="228">
팁: 이미지의 높이와 너비를 지정하는 것이 좋은 습관입니다. 이미지의 높이와 너비가 지정된 경우 페이지가 로드될 때 지정된 크기가 유지됩니다. 이미지 크기를 지정하지 않으면 페이지 로딩 시 HTML 페이지의 전체 레이아웃이 깨질 수 있으니
기본 참고 사항
참고: HTML 파일에 10개의 이미지가 포함된 경우 해당 이미지를 올바르게 표시하려면 이 페이지 11개의 파일을 로드해야 합니다. 이미지를 로드하는 데는 시간이 걸리므로 이미지를 주의해서 사용하는 것이 좋습니다.
참고: 페이지 로드 시 페이지 이미지를 삽입할 경로에 주의하세요. 이미지 위치를 올바르게 설정할 수 없으면 브라우저에서 이미지를 로드할 수 없으며, 이미지 태그에 깨진 이미지가 표시됩니다.
예
웹페이지에 배경 이미지 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<body background="http://imglf0.ph.126.net/1EnYPI5Vzo2fCkyy2GsJKg==/2829667940890114965.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>
프로그램을 실행하고 변경 사항이 있는지 확인
예
이 예는 사진의 크기를 다른 크기로 조정합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="50" height="50">
<br />
<img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="100" height="100">
<br />
<img src="http://gb.cri.cn/mmsource/images/2007/05/21/pc070521018.jpg" width="200" height="200">
<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>
</body>
</html>
프로그램을 실행해서 보세요
예
그림을 활용하여 하이퍼링크 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<body>
<p>创建图片链接:
<a href="http://www.php.cn/">
<img src="http://img3.redocn.com/20100401/Redocn_2010022518194991.jpg" alt="HTML 教程" width="100" height="100"></a></p>
</body>
</html>
프로그램을 실행하고 그림을 클릭하여 확인하세요
예
이 예는 방법을 보여줍니다. 일반 이미지 변환 이미지 맵으로 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<body>
<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
<a href="">
<img src="http://p11.qhimg.com/t010fae31f5653bffe7.jpg" ismap />
</a>
</body>
</html>
실행 실행하여 확인
HTML 이미지 태그
| 标签 | 描述 |
| <img> | 定义图像。 |
| <map> | 定义图像地图。 |
| <area> | 定义图像地图中的可点击区域。 |
사진을 찾아 지정된 디렉토리에 넣고 웹페이지에 삽입해보세요
다음 섹션