> 웹 프론트엔드 > HTML 튜토리얼 > HTML 태그: img 태그 사용 요약

HTML 태그: img 태그 사용 요약

不言
풀어 주다: 2018-08-08 09:38:33
원래의
4556명이 탐색했습니다.

이 글의 내용은 HTML 태그에 관한 것입니다: img 태그의 사용법을 요약한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. Img 태그에는 두 가지 중요한 속성이 있습니다.

1.src 속성: 이미지의 주소

2.alt 속성: 이미지에 실제 텍스트가 표시되지 않습니다.

2. Img 태그는 행 수준 요소 :

  img 및 input은 인라인 대체 요소입니다. 높이/너비/패딩/여백을 모두 사용할 수 있습니다. 효과는 블록 요소와 동일합니다. 인라인 비대체 요소(예: 높이/너비/상단 패딩, 하단/여백 상단/하단)는 효과가 없습니다. 왼쪽/오른쪽 패딩 및 왼쪽/오른쪽 여백만 너비를 변경하는 데 사용할 수 있습니다.

3. Img 태그를 중앙에 배치하세요:

1. 첫 번째 방법: 저는 이 방법을 별로 좋아하지 않습니다. Img 태그는 table-cell로 설정할 수 없습니다. 오류가 발생하기 쉽습니다.

img_p{
        display: table-cell;vertical-align: middle;  /*控制图片垂直居中*/
        text-align: center;  /*控制图片水平居中*/      }
로그인 후 복사

  2. 두 번째 방법: 이 방법에서는 Img 태그에 여백 속성을 두지 않는 것이 가장 좋습니다. 그렇지 않으면 중앙에 정렬되지 않습니다.

img{
    position: absolute;top:50%;left: 50%;
    transform:translate(-50%,-50%);    
}
로그인 후 복사

4. Img 태그 이벤트:

  1. HTML DOM 이벤트 개체의 onerror 이벤트를 사용하여 예외를 표시하는 이미지를 처리합니다.

<img src="img/1.jpg" alt="这是一张图片" onerror="alert(this.alt)">
로그인 후 복사

추천 관련 기사:

html 레이아웃: html 3열 레이아웃 구현 코드

innerHTML 속성이 무엇인가요? innerHTML 속성 사용

위 내용은 HTML 태그: img 태그 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿