실화 태그:<img/> 대 <img/>

이미지 태그는 웹 브라우저에 이미지를 표시하도록 지시하는 데 사용됩니다.
일반적으로 <img />으로 작성되며 다음과 같은 속성을 가질 수 있습니다. src - 이미지의 경로를 지정하는 데 사용됨, alt - 접근성에 중요한 이미지의 텍스트 설명 보유, width - 이미지의 고유 너비 이미지(픽셀 단위).

이제 <image /> 태그가 무엇인지 궁금하십니까? image 태그는 이미지를 표시하는 데에도 사용되었습니다(또는 사용되었습니다)! 그러나 그 사실은 HTML 요소가 아닙니다!(사양에 기록된 대로):


브라우저는 이를 <img> 요소로 별칭하지만 다르게 지정합니다.

Firefox는 구문 분석 시간 동안 별칭을 지정합니다.

Chrome 및 Safari는 요소 생성 시간 동안 별칭을 지정합니다.

IE(Internet Explorer)는 런타임 내내 이를 별칭으로 지정합니다.

html 구문 분석 사양에서 볼 수 있듯이:

https://html.spec.whatwg.org/multipage/parsing.html

따라서 코드에서 사용할 수 있으며 브라우저는 수행해야 할 작업(<img>으로 변환)을 수행하고 코드를 처리하지만 유효한 HTML입니까? 아니.

DOM 조작 중 동작은 어떻습니까?
src 값을 이미지 경로에 할당:

document.querySelector('image').scr  = 'https://source.unsplash.com/random/150*150';

Edge, Chrome 및 Firefox에서는 작동하지 않지만 IE에서는 작동합니다.

요소 생성 및 DOM에 추가:

const image = document.createElement('image');
image.src = 'https://source.unsplash.com/random/150*150';
document.body.appendChild(image);

Edge & Chrome & Firefox에서는 알 수 없는 요소로 취급하여 이미지를 불러오지 않지만 IE에서는 정상 동작합니다.

따라서 실제 이미지 태그는 <img> 태그이고 <image> 태그는 브라우저가 <img> 요소에 별칭을 지정하는 태그입니다.