Was sind austauschbare Elemente? (mit Beispielen)

Der Inhalt dieses Artikels befasst sich mit der Frage, was austauschbare Elemente sind. (Mit Beispielen) hat es einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Kürzlich habe ich versehentlich einen Freund in einem Gruppenchat gesehen, der einen Screenshot von Toutiaos Front-End-Interviewfragen gepostet hat. Es gab nur eine Frage zu HTML, und zwar wie folgt:

Was ist ein ersetzbares Element? ? und nicht austauschbare Elemente, was ist ihr Unterschied? und Beispiele nennen.

Die HTML-Fragen im Front-End-Interview sind am wenigsten und nicht schwierig. Es gibt nur wenige Fragen, die immer wieder wiederholt werden müssen. Wir haben bereits über die klassischste HTML-Semantik gesprochen, und heute nutzen wir diese Gelegenheit, um über ersetzbare Elemente zu sprechen.

Definition

Was ist ein austauschbares Element? Wie der Name schon sagt, ist es das Element, das ersetzt wird. (Ungeschicktes Lachen...

Zum Beispiel ein typisches austauschbares Element img:

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="Was sind austauschbare Elemente? (mit Beispielen)" >

Wir haben keinen Inhalt in das img-Tag geschrieben, woher kommt also der Inhalt? von Was ist mit

? Der Browser lädt das durch das src-Attribut angegebene Bild herunter und ersetzt das Tag img durch die Bildressource Das Ersatzelement ist etwas Besonderes, seine Breite und Höhe werden durch seinen geladenen Inhalt bestimmt (natürlich kann CSS seinen Stil überschreiben)

Beispiel

Immer noch img verwenden sind ein paar Beispiele für Tags:

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="Was sind austauschbare Elemente? (mit Beispielen)" >

Wenn das Bild auf der Seite angezeigt wird, ist es die Breite und Höhe des Bildes selbst. Das

img-Element unterstützt auch das width und height Attribute:

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="Was sind austauschbare Elemente? (mit Beispielen)" >

Zu diesem Zeitpunkt wird das Element mit einer Breite und Höhe von 80 Pixeln angezeigt

Wenn wir CSS verwenden, um seinen Stil zu überschreiben:

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

Das Element wird wie folgt angezeigt:

Definition von MDN

Nachdem wir die obigen Beispiele gesehen haben, wird es für uns einfacher um das konzeptionelle Wissen zu verstehen. >Der Präsentationseffekt von
ersetztem Element

(

ersetztes Element) wird nicht von CSS gesteuert. Diese Elemente sind externe Objekte und die Darstellung ihres Aussehens ist unabhängig davon CSS. Einfach ausgedrückt: Ihr Inhalt wird nicht vom Stil des aktuellen Dokuments beeinflusst. CSS kann die Position ersetzbarer Elemente beeinflussen, nicht jedoch den Inhalt der ersetzbaren Elemente selbst.

Typisch . Zu den austauschbaren Elementen gehören

<iframe></iframe>, und einige Elemente werden nur unter bestimmten Umständen als austauschbare Elemente behandelt, z. B. <video></video><embed></embed> [Verwandte Empfehlungen: <img alt="Was sind austauschbare Elemente? (mit Beispielen)" >HTML-Video-Tutorial<input>】

Das obige ist der detaillierte Inhalt vonWas sind austauschbare Elemente? (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!