HTML 이미지

예

Norwegian Mountain Trip

»시도

온라인 예

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

다른 위치에서 사진을 삽입
이 예는 다른 폴더 또는 서버 이미지가 웹 페이지를 표시하는 방법을 보여줍니다.

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

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

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

<img> 태그는 속성을 포함하고 태그를 폐쇄하지 즉, 비어 있습니다.

페이지의 이미지를 표시하려면 소스 속성 (SRC)를 사용합니다. SRC는 "소스"를 의미한다. 소스 속성의 값은 화상의 URL이다.

사용자 정의 이미지 구문은 다음과 같습니다

URL 화상을 저장하기위한 위치를 말한다. 이미지가 이미지 디렉토리 www.w3school.com.cn있는 "boat.gif"라는 경우, URL은 http://www.w3school.com.cn/images/boat.gif이다.

브라우저는 이미지 태그가 표시되는 문서의 이미지를 표시한다. 두 단락 사이에 이미지 태그를 넣을 경우, 브라우저는 먼저 첫 번째 단락을 표시 한 다음 이미지가 마지막 두 번째 단락 표시가 표시됩니다.

HTML 이미지 - alt 속성

ALT 속성 제조 텍스트 이미지의 스트링의 다른 정의로서 사용된다.

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

브라우저가 이미지를로드 대체 할 수없는 경우 텍스트 속성은 정보가 손실 독자를 말한다. 이 경우, 브라우저는 이미지 대신 대체 텍스트를 표시한다. 페이지의 이미지는 대체 텍스트 속성과 결합되어 더 나은 정보를 표시하는 데 도움이되는 좋은 습관이며, 일반 텍스트 브라우저를 사용하는 사람들을 위해 매우 유용합니다.

HTML 이미지 - 이미지의 높이와 폭을 설정합니다

높이 (높이)와 화상의 폭과 높이를 설정하기위한 폭 (폭) 속성.

픽셀의 기본 속성 값 :

팁 : 습관의 지정된 높이와 너비의 좋은 이미지입니다. 이는 상 높이 폭이 지정된 경우, 지정된 크기의 페이지로드를 유지한다. 사용자가 화상의 크기를 지정하지 않는 경우는 페이지로드는 HTML 페이지 전체의 레이아웃을 저해 할 때 가능하다.

기본 사항 - 유용한 팁 :

참고 : HTML 파일 10 이미지가 포함 된 경우, 제대로이 페이지를 표시하기 위해, 당신은 (11) 파일을로드 할 필요가있다.로드 그림은 시간이 걸립니다, 그래서 우리의 조언은 다음과 같습니다주의 사진.

참고 화상의 위치를 정확하게 설정할 수없는 경우에 페이지가로드되는 경우, 페이지의 이미지로 삽입에주의, 브라우저는 이미지를로드 할 수 있고, 이미지 태그 깨진 영상을 표시한다.

더 많은 예제

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

부동 이미지
이 예는 왼쪽 또는 오른쪽 단락 이미지 플로트를 만드는 방법을 보여줍니다.

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

이미지 맵 작성
이 예제는 클릭 가능한 영역과 이미지 맵을 만드는 방법을 보여줍니다. 이 지역의 각 하이퍼 링크입니다.

HTML 이미지 태그