Maison interface Web tutoriel HTML Que sont les éléments remplaçables ? (avec des exemples)

Que sont les éléments remplaçables ? (avec des exemples)

Apr 02, 2019 am 11:16 AM
html html5

Le contenu de cet article porte sur que sont les éléments remplaçables ? (Avec des exemples), il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Récemment, j'ai accidentellement vu un ami dans une discussion de groupe publier une capture d'écran des questions d'entretien frontales de Toutiao. Il n'y avait qu'une seule question sur le HTML, comme suit :

Qu'est-ce qu'un élément remplaçable. ? et éléments non remplaçables, quelle est leur différence ? et donnez des exemples.

Les questions HTML de l'entretien frontal sont les moindres, et elles ne sont pas difficiles. Il n'y a que quelques questions qui doivent être répétées encore et encore. Nous avons déjà parlé de la sémantique HTML la plus classique, et aujourd'hui nous profiterons de cette occasion pour parler des éléments remplaçables.

Définition

Qu'est-ce qu'un élément remplaçable ? Comme son nom l’indique, c’est l’élément qui sera remplacé. (Rire gêné...

Par exemple, un élément remplaçable typique img :

<img src=xxx.jpg>
Copier après la connexion

Nous n'avons rien écrit dans la balise img, donc son contenu Où est ça vient ?

le navigateur télécharge-t-il l'image donnée par l'attribut src et remplace la balise img par la ressource image, et le navigateur ne connaît pas la largeur et la hauteur de l'image avant le téléchargement, l'élément remplaçable est spécial, sa largeur et sa hauteur sont déterminées par son contenu chargé (bien sûr CSS peut remplacer son style)

Exemple

Utilisez également <. quelques exemples de balises> : img

<img src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
Copier après la connexion
Si l'image est affichée sur la page, ce sera la largeur et la hauteur de l'image elle-même. Les éléments

également. support img et. width Attributs : height

<img width="80" height="80" src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
Copier après la connexion
À ce stade, l'élément est affiché avec une largeur et une hauteur de 80 pixels

Si nous utilisons CSS pour le remplacer. style :

<.>L'affichage de cet élément est de 60 pixels
img {
  width: 60px;
  height: 60px;
}
Copier après la connexion

Définition de MDN

Après avoir vu l'exemple ci-dessus, il le sera. être plus facile pour nous de comprendre les connaissances conceptuelles. L'effet de présentation de l'


élément remplaçable
(élément remplacé) n'est pas contrôlé par CSS. les objets externes, et le rendu de leur apparence n'est pas contrôlé par CSS , sont indépendants de CSS En termes simples, leur contenu n'est pas affecté par le style du document actuel et peut affecter la position de l'élément remplaçable. mais cela n'affectera pas le contenu de l'élément remplaçable lui-même.

Les éléments remplaçables typiques sont

<iframe> , et certains éléments ne sont traités comme des éléments remplaçables que dans des circonstances spécifiques, telles que comme <video> 🎜>【Recommandations associées : <embed>Tutoriel vidéo HTML<img><input>

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Bordure de tableau en HTML

Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Tableau imbriqué en HTML

Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Marge gauche HTML

Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Disposition du tableau HTML

Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Déplacer du texte en HTML

Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Liste ordonnée HTML

Comment analysez-vous et traitez-vous HTML / XML dans PHP? Comment analysez-vous et traitez-vous HTML / XML dans PHP? Feb 07, 2025 am 11:57 AM

Comment analysez-vous et traitez-vous HTML / XML dans PHP?

Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Bouton HTML onclick

See all articles