Explication des éléments de base de Html Element-tutoriel HTML-php.cn

Explication des éléments de base de Html Element

巴扎黑

Libérer： 2017-07-19 16:45:41

original

2944 Les gens l'ont consulté

J'ai écrit cet article après avoir étudié au IT Cultivation Park pendant un certain temps et l'avoir relu à mon tour. Bien qu’il ne s’agisse que d’un contenu de connaissances de base, j’espère qu’il pourra aider tout le monde.

Tout d’abord, nous devons comprendre quelle est la définition du HTML ?

Nœuds HTML DOM

Dans le HTML DOM (Document Object Model), chaque partie est un nœud :

Le document lui-même est un nœud de document

Tous les éléments HTML sont des nœuds d'éléments

Tous les attributs HTML sont des nœuds d'attribut

Le texte dans les éléments HTML est des nœuds de texte

Les commentaires sont des nœuds de commentaires

Objet Element

Dans le DOM HTML, l'objet Element représente un élément HTML.

Les objets élément peuvent avoir des nœuds enfants de type nœuds d'élément, nœuds de texte et nœuds de commentaire.

L'objet NodeList représente une liste de nœuds, telle qu'une collection de nœuds enfants d'un élément HTML. Les éléments

peuvent également avoir des attributs. Les propriétés sont des nœuds d'attribut.

[html : hypertexte balise langue, texte : fichier au format txt, balise : utiliser la balise à pour attacher une sémantique au texte]

Si vous avez déjà une compréhension du HTML grâce à ce qui précède, commençons par étudier ses trois éléments.

Éléments de niveau bloc, éléments en ligne et éléments de bloc en ligne

Quelques informations sur la vulgarisation scientifique : mise en page HTML : documentation Flux, flotteur, position et affichage : mise en page flexible .

Certains éléments reçoivent également leur sémantique d'origine basée sur la première occurrence du flux de documents.

Bloc : L'élément de niveau bloc occupe une ligne seule, et la largeur et la hauteur peuvent être définies ; width est donné, l'élément de niveau bloc. Il est par défaut la largeur du navigateur, c'est-à-dire 100 % de largeur

Inline : éléments en ligne : peut avoir plusieurs balises dans ; une ligne , et les valeurs des attributs width et height ne le sont pas. Cela prend effet, cela dépend entièrement du contenu pour prendre en charge la largeur et la hauteur !

Inline-block : élément de bloc en ligne : combinant les points clés du niveau en ligne et du niveau de bloc, non seulement peut définir la largeur et la hauteur , mais aussi Plusieurs balises existent sur une seule ligne pour afficher

(div, p, ul, li) conteneur : élément de niveau bloc

L'attribut par défaut consiste à ajouter < avant et après ;br>Saut de ligne.

(Span,img,input,a) Texte : élément en ligne

La balise n'a pas de sémantique, fonction : les attributs peuvent être définis séparément

Compte tenu de certains des principaux éléments à maîtriser. En même temps, je pense qu’il est plus facile pour le public de comprendre et de mémoriser ces contenus. Si vous n'avez toujours pas formé leur apparence dans votre esprit. Vous pouvez vous référer au document Word pour voir si un paragraphe de texte est disposé ligne par ligne de gauche à droite et de haut en bas par défaut. Que le tableau ajoute une ligne et deux colonnes ou une ligne et plusieurs colonnes, la valeur par défaut est de couvrir la totalité du papier A4. À ce stade, tout le monde devrait pouvoir s’en souvenir.

Les concepts et représentations ont été évoqués, mais il faut non seulement comprendre leur sémantique, mais aussi les utiliser de manière terre-à-terre.

Parlons d'abord de

inline. Le texte et l'image doivent être positionnés à droite, centrés et décalés moyennement, ce qui est exactement la même chose que les 6 positions dans l'éditeur de mots. Dans les paramètres des pages Web, Text-align: center est fréquemment utilisé.

Je ne l'expliquerai pas un par un. Voici l'écriture intérieure, comme suit

Text-align : est défini dans dans la balise de la boîte parent spécifie que les éléments en ligne dans la boîte ( texte ou img balise) doivent être centrés.

Line-height : fait référence à la hauteur de la zone de ligne (hauteur de ligne) du texte. Composé de (espacement haut, bas et hauteur du texte)

met en œuvre le principe vertical : hauteur du conteneur = hauteur de la boîte de ligne. La hauteur du texte par défaut est de 16 px. Lorsque la hauteur du conteneur = hauteur de ligne = 200 px est définie, l'espacement supérieur et inférieur sera automatiquement divisé en 184 px.

Marge : 0 auto : Elle est définie dans la balise box pour être centrée sur . Généralement, la largeur de la boîte doit également être définie.

vertical-align:middle : Il est défini dans les deux balises d'élément en ligne , de sorte que les deux éléments en ligne soient entre les deux et le dernier élément en ligne Les éléments en ligne précédents sont alignés verticalement les uns par rapport aux autres.

Tex-align et line-height sont souvent utilisés ensemble pour centrer verticalement une ligne de texte.

Vertical-align:middle est souvent utilisé pour l'alignement vertical du texte et de l'image.

Si vous souhaitez étudier l'attribut d'alignement vertical en détail, vous devez vraiment incorporer beaucoup de nouveau contenu. En fait, nous n’avons pas besoin de comprendre sa ligne de base, sa ligne médiane et sa ligne supérieure. Nous avons juste besoin de savoir comment les utiliser.

Encore une chose à dire :

vertical-align est un élément dépendant du bloc en ligne. S'il ne s'agit pas d'un élément de bloc en ligne, il sera ignoré. Certains éléments le prennent en charge par défaut : Images, boutons, cases à cocher simples, zones de texte sur une seule ligne/multilignes et autres contrôles HTML

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!