HTML 태그: img 태그 사용 요약

이 글의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!