Heim > Web-Frontend > HTML-Tutorial > Was sind austauschbare Elemente? (mit Beispielen)

Was sind austauschbare Elemente? (mit Beispielen)

不言
Freigeben: 2019-04-02 11:16:29
nach vorne
2586 Leute haben es durchsucht

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=xxx.jpg>
Nach dem Login kopieren

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="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
Nach dem Login kopieren

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 width="80" height="80" src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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>, und einige Elemente werden nur unter bestimmten Umständen als austauschbare Elemente behandelt, z. B. <video><embed> [Verwandte Empfehlungen: <img>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!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage