HTML 기본 튜토리얼

HTML 媒体

HTML 参考手册

HTML5 기본 튜토리얼

HTML5 API

HTML5 媒体

HTML 비디오(Video) 재생 HTML CSS

HTML 이미지

今天我们看到的丰富多彩的网页，都是因为有了图像的作用。过去网络中全部都是纯文本的网页，非常单调，所以图像在网页设计中的重要性就显而易见了。在html页面中可以插入图像，网页常用的图像格式有jpg、png、gif等

图像示例

示例

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
<h2>default　picture</h2>
<img　border="0"　src="/run/html/default.jpg"　alt="default"　width="304"　height="228">
</body>
</html>

测试看看 ‹/›

在线示例

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

从不同的位置插入图片
이 예제는 다른 폴더나 서버의 이미지를 웹 페이지에 표시하는 방법을 보여줍니다.

更多示例可以在本页底端找到。

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

HTML에서 이미지는 <img> 태그로 정의됩니다.

<img>는 비어 있는 태그로, 즉 속성만 포함하고 끝표지가 없다는 뜻입니다.

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

이미지의 정의 문법은:

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

URL은 이미지가 저장된 위치를 지정합니다. "default.jpg"라는 이름의 이미지가 www.w에 위치한 경우3codebox.com의 images 디렉토리에 위치한 경우, 그 URL은 https://ko.oldtoolbag.com/run/html/default.jpg.

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

HTML 이미지- Alt 속성

alt 속성은 이미지에 대체 가능한 텍스트를 정의하는 데 사용됩니다.

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

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

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

HTML 이미지- 이미지의 높이와 너비 설정

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

기본 단위는 픽셀입니다:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" 높이="228">

팁: 이미지의 높이와 너비를 지정하는 것은 좋은 습관입니다. 이미지의 높이와 너비가 지정되면 페이지가 로드될 때 지정된 크기를 유지합니다. 이미지 크기를 지정하지 않으면, 페이지가 로드될 때 HTML 페이지의 전체 레이아웃을 파괴할 수 있습니다.

기본 주의사항 - 유용한 팁:

주의: 만약 어떤 HTML 파일이 열 개의 이미지를 포함하고 있다면, 이 페이지를 올바르게 표시하기 위해 로드해야 할 이미지는 11 개 파일. 이미지를 로드하는 데 시간이 걸리므로, 우리의 조언은 이미지를 조심스럽게 사용하는 것입니다.

주의: 페이지를 로드할 때, 페이지에 삽입된 이미지의 경로를 주의해야 합니다. 이미지의 위치를 올바르게 설정하지 않으면 브라우저는 이미지를 로드할 수 없으며, 이미지 태그는 깨진 이미지를 표시합니다.

추가 예제

이미지 배치
이 예제에서는 텍스트 안에 이미지를 배치하는 방법을 보여줍니다.

浮动 이미지
이 예제에서는 이미지를 문단의 왼쪽이나 오른쪽에 풍선하도록 만드는 방법을 보여줍니다.

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

이미지 맵 생성
이 예제에서는 클릭 가능한 영역을 가진 이미지 맵을 생성하는 방법을 보여줍니다. 각 영역은 슈퍼 링크입니다.

HTML 이미지 태그

태그	설명
<img>	이미지 정의
<map>	이미지 맵 정의
<area>	이미지 맵에서 클릭 가능한 영역 정의

HTML 비디오(Video) 재생 HTML CSS