기본적인 HTML 이미지 지식에 대한 자세한 설명
- 小云云원래의
- 2018-03-05 14:10:242077검색
이 글에서는 주로 HTML 이미지에 대한 자세한 설명을 공유합니다. HTML 이미지 - 이미지 태그(a1f02c36ba31691bcfe87b2722de723b) 및 소스 속성(Src). a1f02c36ba31691bcfe87b2722de723b는 빈 태그입니다. 즉, 속성만 포함하고 닫는 태그는 없습니다.
페이지에 이미지를 표시하려면 소스 속성(src)을 사용해야 합니다. src는 "소스"를 나타냅니다. source 속성의 값은 이미지의 URL 주소입니다.
이미지 정의 구문은 다음과 같습니다.
<img src="url" alt="some_text">
URL은 이미지가 저장되는 위치를 나타냅니다. "pulpit.jpg"라는 이미지가 www.runoob.com의 이미지 디렉터리에 있는 경우 해당 URL은 https://img.php.cn/upload/article/000/054/025/69ee4cbf3049b8bcc16a7e91b3657b16-0입니다. jpg .
브라우저는 이미지 태그가 나타나는 문서에 이미지를 표시합니다. 두 문단 사이에 이미지 태그를 배치하면 브라우저는 첫 번째 문단을 먼저 표시한 다음 이미지, 마지막으로 두 번째 문단을 표시합니다.
HTML 이미지 - Alt 속성
alt 속성은 이미지에 대해 준비된 대체 가능한 텍스트 문자열을 정의하는 데 사용됩니다.
대체 텍스트 속성의 값은 사용자가 정의합니다.
<img src="boat.gif" alt="Big Boat">
브라우저가 이미지를 로드할 수 없는 경우 대체 텍스트 속성은 독자에게 잃어버린 정보를 알려줍니다. 이 시점에서 브라우저는 이미지 대신 이 대체 텍스트를 표시합니다. 페이지의 모든 이미지에 대체 텍스트 속성을 추가하는 것이 좋습니다. 이는 정보를 더 잘 표시하는 데 도움이 되며 텍스트 전용 브라우저를 사용하는 사용자에게 매우 유용합니다.
HTML 이미지 - 이미지의 높이와 너비를 설정합니다.
height(높이) 및 너비(너비) 속성은 이미지의 높이와 너비를 설정하는 데 사용됩니다.
속성 값의 기본 단위는 픽셀입니다:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
팁: 이미지의 높이와 너비를 지정하는 것이 좋습니다. 이미지의 높이와 너비가 지정된 경우 페이지가 로드될 때 지정된 크기가 유지됩니다. 이미지 크기를 지정하지 않으면 페이지 로드 시 HTML 페이지의 전체 레이아웃이 깨질 수 있습니다.
기본 노트 - 유용한 팁:
참고: HTML 파일에 10개의 이미지가 포함된 경우 페이지를 올바르게 표시하려면 11개의 파일을 로드해야 합니다. 이미지를 로드하는 데는 시간이 걸리므로 이미지를 주의해서 사용하는 것이 좋습니다.
참고: 페이지를 로드할 때 페이지 이미지를 삽입할 경로에 주의하세요. 이미지 위치를 올바르게 설정할 수 없으면 브라우저에서 이미지를 로드할 수 없으며 이미지 태그에 깨진 이미지가 표시됩니다.
HTML 이미지 태그
| 태그 | 설명 |
|---|---|
| a1f02c36ba31691bcfe87b2722de723b | 이미지 정의 |
| dab9f699790ab0922e596ecb9f6677d5 | 이미지 맵 정의 |
| a0feb14f4dcbacaa486fc1715256e92d | 이미지 맵에서 클릭 가능한 영역을 정의하세요 |
관련 추천:
HTML 이미지에 관한 추천 기사 5개
HTML 이미지에 대한 심층적인 이해_html/css_WEB-ITnose
위 내용은 기본적인 HTML 이미지 지식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!