교체 가능한 요소는 무엇입니까? (예제 포함)

이 글의 내용은 교체 가능한 요소가 무엇인지에 관한 것입니다. (예시 포함) 참고할만한 가치가 있으니 도움이 필요한 친구들이 참고하시면 좋을 것 같습니다.

최근 그룹 채팅에서 우연히 친구가 Toutiao의 프론트엔드 인터뷰 질문 스크린샷을 게시하는 것을 봤습니다. HTML에 대한 질문은 단 하나였습니다.

교체 가능한 요소와 대체 불가능한 요소는 무엇이며, 그 요소는 무엇입니까? 차이점은 무엇입니까? 그리고 예를 들어보세요.

프론트 면접에서는 HTML 질문이 가장 적고, 몇 번이고 반복해야 하는 질문만 있으면 어렵지 않습니다. 우리는 이전에 가장 고전적인 HTML 의미론에 대해 이야기한 적이 있으며, 오늘은 이 기회를 빌어 교체 가능한 요소에 대해 이야기하겠습니다.

Definition

교체 가능 요소란 무엇인가요? 이름에서 알 수 있듯이 교체될 요소입니다. (어색한 웃음...

예를 들어 일반적인 대체 요소 img:

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="교체 가능한 요소는 무엇입니까? (예제 포함)" >

img 태그에 내용을 전혀 작성하지 않았는데 해당 내용은 어디서 오는 걸까요?img 标签中写入任何内容，那它的内容从哪里来的呢？

是浏览器去下载 src 属性给到的图片，并用该图片资源替换掉 img 标签，而且浏览器在下载前并不知道图片的宽高。所以，可替换元素比较特殊，它的宽高是由其加载的内容决定的。（当然 CSS 可以覆盖其样式）

示例

还是用 img 标签举几个例子：

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="교체 가능한 요소는 무엇입니까? (예제 포함)" >

该图片在页面中展现出来的话，就是图片本身本身的宽高。

img 元素也支持 width 和 height 属性：

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="교체 가능한 요소는 무엇입니까? (예제 포함)" >

此时该元素展现出来就是宽高为 80 像素。

如果我们再用 CSS 去覆盖其样式：

img {
  width: 60px;
  height: 60px;
}

该元素的展现即为 60 像素。

MDN 的释义

看过上面的例子之后我们再来理解概念性的知识就比较容易了。

可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。

典型的可替换元素有 <iframe></iframe> <video></video> <embed></embed> <img alt="교체 가능한 요소는 무엇입니까? (예제 포함)" > ，还有一些元素仅在特定情况下被作为可替换元素处理，比如 <input>

The 브라우저는 src 속성에 의해 제공된 이미지를 다운로드하고 img 태그를 이미지 리소스로 대체합니다. 브라우저는 다운로드하기 전에 이미지의 너비와 높이를 알지 못하므로 교체 가능한 요소는 특별합니다. 너비와 높이는 로드되는 콘텐츠에 따라 결정됩니다(물론 CSS는 스타일을 재정의할 수 있습니다).

Example

여전히 img 태그를 사용하여 몇 가지 예를 제공합니다.

rrreee🎜이 이미지. 페이지에 표시될 때 이미지 자체의 너비와 높이입니다. 🎜🎜img 요소는 width 및 height 속성도 지원합니다. : 🎜rrreee🎜 이때 요소는 너비와 높이가 80픽셀로 표시됩니다. 🎜🎜CSS를 사용하여 스타일을 재정의하는 경우: 🎜rrreee🎜요소는 60픽셀로 표시됩니다. MDN🎜🎜🎜은 예제를 통해 개념적 지식을 이해하는 것이 더 쉬울 것입니다. 🎜🎜🎜🎜(🎜대체 요소🎜)의 표시 효과는 CSS에 의해 제어되지 않습니다. , 및 그 모양의 렌더링은 CSS에 의해 제어되지 않습니다. 🎜간단히 말하면 해당 내용은 현재 문서의 스타일에 영향을 받지 않습니다. CSS는 교체 가능한 요소의 위치에 영향을 미치지 않습니다. 🎜🎜🎜일반적인 교체 가능한 요소에는 <iframe></iframe> <video></video> <embed></embed>가 포함됩니다. <img alt="교체 가능한 요소는 무엇입니까? (예제 포함)" > 및 <input>과 같은 특정 상황에서만 교체 가능한 요소로 처리되는 일부 요소가 있습니다. 🎜🎜[관련 권장 사항: 🎜HTML 비디오 튜토리얼🎜]🎜🎜🎜🎜.

위 내용은 교체 가능한 요소는 무엇입니까? (예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!