Concepts de base et exemples d'utilisation des éléments HTML en ligne et des éléments au niveau bloc_HTML/Xhtml_Production de pages Web

Les balises HTML sont divisées en deux types, les éléments en ligne et les éléments de niveau bloc. Tout d'abord, comprenons les concepts d'éléments en ligne et d'éléments de niveau bloc :

Éléments de niveau bloc : est généralement un conteneur pour d'autres éléments, qui peuvent accueillir des éléments en ligne et d'autres éléments de niveau bloc excluent les autres éléments qui se trouvent sur la même ligne qu'eux. La largeur et la hauteur peuvent être définies (hauteur), les éléments au niveau du bloc dans le flux normal seront placés verticalement. Les éléments de bloc courants sont "div"

Éléments en ligne (éléments en ligne) : Les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne. Ils sont des descendants d'éléments de niveau bloc. Ils permettent à d'autres éléments en ligne d'être situés sur la même ligne qu'eux. et ne peut pas être défini en hauteur et en largeur. Un élément en ligne courant est "a".

Selon le concept d'éléments de niveau bloc, nous pouvons comprendre que les éléments de niveau bloc ont des sauts de ligne avant et après eux, ce qui équivaut à ajouter une balise
avant et après l'élément. Nous pouvons considérer les éléments de niveau bloc comme un bloc ou un rectangle, de sorte que les éléments de niveau bloc peuvent définir les attributs de hauteur et de largeur

Exemple :
fichier css :

Copier le code

Le code est le suivant :

#div1{
largeur:200px;
hauteur:200px;
arrière-plan:#666
}
div2{
largeur:200px
hauteur : 200px;
arrière-plan :#F00
}

fichier html :

Copier le code

Le code est le suivant :

div1
L'élément de niveau bloc exclut les autres éléments sur la même ligne que lui

div2
Les éléments au niveau du bloc excluent les autres éléments situés sur la même ligne

Effet d'affichage :

Les deux éléments div ne sont pas sur la même ligne

Selon le concept d'éléments en ligne, nous pouvons comprendre qu'il n'y a pas de saut de ligne avant et après les éléments en ligne. Nous pouvons considérer un élément en ligne comme une ligne, il ne peut donc pas définir les attributs de hauteur et de largeur.

Balise d'élément de bloc

adresse - adresse
blockquote - citation de bloc
centre - alignement au centre
dir - liste de répertoires
div - le niveau de bloc couramment utilisé est également la balise principale de la mise en page CSS
dl - définition list
fieldset - groupe de contrôle du formulaire
formulaire - formulaire interactif
h1 - titre
h2 - sous-titre
h3 - titre de niveau 3
h4 - titre de niveau 4
h5 - 5 Titre du niveau
h6 - Titre du niveau 6
hr - Ligne de séparation horizontale
isindex - invite de saisie
menu - Liste des menus
noframes - contenu facultatif des cadres (pour les navigateurs qui ne prennent pas en charge les cadres Afficher ce contenu de bloc
noscript - contenu de script facultatif (afficher ce contenu pour les navigateurs qui ne prennent pas en charge le script)
ol - formulaire de tri
p - paragraphe
texte pré-formaté
table - table
ul - liste non triée

élément en ligne

a - ancre
abbr - abréviation
acronyme - premier mot
b - gras (non recommandé)
bdo - bidi override
big - big font
br - Saut de ligne
cite - quote
code - code informatique (obligatoire pour citer le code source)
dfn - définir le champ
em - accentuation
police - paramètre de police (non recommandé)
i - italique
img - image
input - zone de saisie
kbd - définir le texte du clavier
étiquette - étiquette du tableau
q - citation courte
s - trait de soulignement
samp - Définir un exemple de code informatique
select - Sélection d'éléments
small - Texte en petite police
span - Conteneurs en ligne couramment utilisés, définir des blocs dans le texte
strike - Souligné
fort - Accentuation en gras
sub - indice
sup - exposant
textarea - zone de saisie de texte multiligne
tt - définir le texte de la machine à écrire
var - définir la variable