HTML 이미지

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>	定义图像地图中的可点击区域。

사진을 찾아 지정된 디렉토리에 넣고 웹페이지에 삽입해보세요

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전