img 이미지 태그의 기본 사용법에 대한 자세한 설명

이 글에서는 주로 HTML/XHTML에서 img 이미지 태그의 기본 사용법을 소개합니다. 이 글에는 img 태그에서 일반적으로 사용되는 몇 가지 속성이 나열되어 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다

이미지 태그는 표시에 사용됩니다. 웹페이지의 이미지.
HTML/XHTML 이미지 태그
XHTML에서 태그는 표시할 이미지를 정의하는 데 사용됩니다. 는 페어링되지 않은 태그입니다.

기본 구문:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <img src="url" />

태그는 src 속성을 통해 이미지 소스를 결정하며, url은 상대 또는 절대 이미지 주소입니다.

이미지 태그 속성:
src: imagesource, 필수. 표시된 이미지의 소스 주소를 상대 주소 또는 절대 주소로 지정합니다.
alt: 대체 텍스트, 생략 가능. 이미지를 표시할 수 없거나 브라우저가 이미지를 차단할 때 표시되는 텍스트를 바꾸는 데 사용됩니다.
제목: 이미지 프롬프트 텍스트, 생략 가능. 사진 위에 마우스를 올리면 관련 텍스트가 표시됩니다.
폭: 이미지 표시 폭, 생략 가능. 단위는 픽셀입니다.
height: 이미지 표시 높이이며 생략 가능합니다. 단위는 픽셀입니다.

텍스트 대체 속성(alt)
이미지 태그의 텍스트 대체 속성 alt 필수 속성은 아니지만 매우 중요한 속성입니다. 어떤 이유로 브라우저가 이미지를 읽지 못하는 경우 이 대체 텍스트가 표시되어 원본 이미지를 대체하여 손실된 관련 이미지 정보를 제공합니다. 또한 이 속성은 텍스트 전용 브라우저를 사용하는 사용자가 페이지의 콘텐츠를 이해하는 데 도움이 됩니다.
따라서 각 이미지에 의미 있는 대체 텍스트 대체 속성을 추가하는 것이 좋은 습관입니다.

태그 사용법 Exercise
e:html 폴더 아래에 이미지 폴더를 생성하여 이미지 파일을 저장합니다. 아래 사진을 마우스 오른쪽 버튼으로 클릭하고 "다른 이름으로 이미지 저장"을 선택하여 나중에 사용할 수 있도록 사진을 이미지 폴더에 저장하세요.

작은 XHTML 예제 1.html을 편집하고 id="main-content"로 p 태그를 다음과 같이 변경합니다.

XML/HTML Code콘텐츠를 클립보드에 복사

1. <h3>기사 제목h3>

2. <p >기사의 자세한 내용 p>

3. <p><img src="images/flower_1.jpg " alt= "flower "/>p>

이런 식으로 웹 페이지에 이미지가 표시됩니다.

이미지 표시 크기 지정
태그에 너비 또는 높이 속성을 추가하여 이미지 표시 크기를 수동으로 지정할 수 있습니다.

XML/HTML 코드복사 콘텐츠를 클립보드에

1. <img src="images/flower_1.jpg" alt="꽃" 너비="350" 높이 ="270" />

팁
일반적인 상황에서는 이미지 크기 속성이 무시되고 원본 이미지 크기가 기본적으로 표시되거나 브라우저가 크기 표시를 조정합니다. 부적절한 이미지 표시 크기를 지정하면 이미지가 왜곡되어 나타날 수 있습니다.
이미지를 로드하는 데 일정 시간이 걸리므로 좋은 사용자 액세스 경험을 얻으려면 이미지 품질을 보장하면서 이미지 크기를 줄이는 것이 좋습니다.

확장 읽기
픽셀: 픽셀은 컴퓨터가 표시할 수 있는 가장 작은 점이라고 생생하게 생각할 수 있습니다. 예를 들어 우리가 흔히 말하는 화면 해상도는 1024*768입니다. 이는 화면 전체에 1024개의 픽셀이 있다는 의미입니다. .(픽셀) 도트, 세로로 768(픽셀) 도트가 있습니다. 단위로 사용시 일반적으로 기본적으로 pix로 표기됩니다.

위 내용은 img 이미지 태그의 기본 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!