교체 가능한 요소는 무엇입니까? (예제 포함)
- 不言앞으로
- 2019-04-02 11:16:292548검색
이 글의 내용은 교체 가능한 요소가 무엇인지에 관한 것입니다. (예시 포함) 참고할만한 가치가 있으니 도움이 필요한 친구들이 참고하시면 좋을 것 같습니다.
최근 그룹 채팅에서 우연히 친구가 Toutiao의 프론트엔드 인터뷰 질문 스크린샷을 게시하는 것을 봤습니다. HTML에 대한 질문은 단 하나였습니다.
교체 가능한 요소와 대체 불가능한 요소는 무엇이며, 그 요소는 무엇입니까? 차이점은 무엇입니까? 그리고 예를 들어보세요.
프론트 면접에서는 HTML 질문이 가장 적고, 몇 번이고 반복해야 하는 질문만 있으면 어렵지 않습니다. 우리는 이전에 가장 고전적인 HTML 의미론에 대해 이야기한 적이 있으며, 오늘은 이 기회를 빌어 교체 가능한 요소에 대해 이야기하겠습니다.
Definition
교체 가능 요소란 무엇인가요? 이름에서 알 수 있듯이 교체될 요소입니다. (어색한 웃음...
예를 들어 일반적인 대체 요소 img:
<img src=xxx.jpg>
img 태그에 내용을 전혀 작성하지 않았는데 해당 내용은 어디서 오는 걸까요?img 标签中写入任何内容，那它的内容从哪里来的呢？
是浏览器去下载 src 属性给到的图片，并用该图片资源替换掉 img 标签，而且浏览器在下载前并不知道图片的宽高。所以，可替换元素比较特殊，它的宽高是由其加载的内容决定的。（当然 CSS 可以覆盖其样式）
示例
还是用 img 标签举几个例子：
<img src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
该图片在页面中展现出来的话，就是图片本身本身的宽高。
img 元素也支持 width 和 height 属性：
<img width="80" height="80" src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
此时该元素展现出来就是宽高为 80 像素。
如果我们再用 CSS 去覆盖其样式：
img {
width: 60px;
height: 60px;
}
该元素的展现即为 60 像素。
MDN 的释义
看过上面的例子之后我们再来理解概念性的知识就比较容易了。
可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。
典型的可替换元素有 <iframe> <video> <embed> <img> ，还有一些元素仅在特定情况下被作为可替换元素处理，比如 <input>
img 태그를 이미지 리소스로 대체합니다. 브라우저는 다운로드하기 전에 이미지의 너비와 높이를 알지 못하므로 교체 가능한 요소는 특별합니다. 너비와 높이는 로드되는 콘텐츠에 따라 결정됩니다(물론 CSS는 스타일을 재정의할 수 있습니다).
여전히 img 태그를 사용하여 몇 가지 예를 제공합니다.
img 요소는 width 및 height 속성도 지원합니다. : 🎜rrreee🎜 이때 요소는 너비와 높이가 80픽셀로 표시됩니다. 🎜🎜CSS를 사용하여 스타일을 재정의하는 경우: 🎜rrreee🎜요소는 60픽셀로 표시됩니다. MDN🎜🎜🎜은 예제를 통해 개념적 지식을 이해하는 것이 더 쉬울 것입니다. 🎜🎜🎜🎜(🎜대체 요소🎜)의 표시 효과는 CSS에 의해 제어되지 않습니다. , 및 그 모양의 렌더링은 CSS에 의해 제어되지 않습니다. 🎜간단히 말하면 해당 내용은 현재 문서의 스타일에 영향을 받지 않습니다. CSS는 교체 가능한 요소의 위치에 영향을 미치지 않습니다. 🎜🎜🎜일반적인 교체 가능한 요소에는 <iframe> <video> <embed>가 포함됩니다. <img alt="교체 가능한 요소는 무엇입니까? (예제 포함)" > 및 <input>과 같은 특정 상황에서만 교체 가능한 요소로 처리되는 일부 요소가 있습니다. 🎜🎜[관련 권장 사항: 🎜HTML 비디오 튜토리얼🎜]🎜🎜🎜🎜.위 내용은 교체 가능한 요소는 무엇입니까? (예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!