Maison interface Web tutoriel HTML Que sont les éléments HTML en ligne et les éléments de bloc ?

Que sont les éléments HTML en ligne et les éléments de bloc ?

Feb 20, 2021 pm 04:03 PM
html 行内元素 块状元素

Les éléments HTML en ligne incluent : a (élément d'ancrage), b (gras), br (saut de ligne), code, em (emphase), police (paramètre de police), i (italique), img (image) , input (zone de saisie), span, strong (gras souligné), textarea, u, etc. ; les éléments de bloc incluent : adresse (adresse), blockquote (citation de bloc), center (bloc aligné au centre), div, h1~h6. (titre), hr (ligne de séparation horizontale), p, ul, ol, etc.

Que sont les éléments HTML en ligne et les éléments de bloc ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

Remarques sur les éléments en ligne et les éléments de bloc

Selon la spécification CSS, chaque élément de page Web possède un attribut d'affichage, qui est utilisé pour déterminer le type de l'élément . , chaque élément a une valeur d'attribut d'affichage par défaut. Par exemple, un élément div a une valeur d'attribut d'affichage par défaut de « block » et devient un élément « de niveau bloc » tandis qu'un élément span a une valeur d'attribut d'affichage par défaut de « inline » ; ". », appelé élément « en ligne ». Les éléments au niveau du bloc tels que

div occuperont automatiquement un certain espace rectangulaire. Vous pouvez ajuster l'apparence de ce rectangle en définissant des attributs tels que la hauteur, la largeur, les marges intérieures et extérieures au contraire, comme "span" ; " Les éléments en ligne comme "a" n'ont pas leur propre espace indépendant. Ils existent attachés à d'autres éléments au niveau du bloc. Par conséquent, la définition d'attributs tels que la hauteur, la largeur et les marges intérieures et extérieures sur les éléments en ligne n'est pas valide.

La différence entre les éléments en ligne et les éléments de bloc :

(1) Les éléments de niveau bloc occuperont une ligne exclusive et leur largeur remplira automatiquement la largeur de leur. élément parent
Éléments en ligne Il n'occupera pas une ligne exclusive. Les éléments en ligne adjacents seront disposés sur la même ligne. Ils ne seront pas enroulés jusqu'à ce qu'ils ne puissent pas tenir sur une seule ligne. 🎜>(2). En général, les éléments au niveau du bloc peuvent être définis en largeur, les attributs de hauteur, les éléments en ligne définis en largeur, la hauteur invalide
(Remarque : même si la largeur des éléments au niveau du bloc est définie, elle occupe toujours un ligne exclusive)
(3). Les éléments au niveau du bloc peuvent définir la marge et le remplissage. Les éléments en ligne padding-left, padding-right, margin-left et margin-right produisent tous des effets de marge, mais le remplissage vertical-. top, padding-bottom, margin-top et margin-bottom ne produisent pas d'effet de distance. (Valable dans le sens horizontal, invalide dans le sens vertical) 🎜>
* center - bloc aligné au centre

* dir - liste de répertoires * div - niveau de bloc couramment utilisé, également la balise principale de la mise en page CSS

* dl - Liste de définitions

* champset - groupe de contrôle de formulaire

* form - formulaire interactif

* h1 - titre

* h2 - sous-titre

* h3 - Titres de niveau 3

* h4 - Titres de niveau 4

* h5 - Titres de niveau 5

* h6 - Titres de niveau 6

* hr - ligne de séparation horizontale

* isindex - invite de saisie

* menu - liste de menus

* noframes - contenu facultatif des frames, (pour une navigation qui ne prend pas en charge les frames Le navigateur affiche le contenu de ce bloc

* noscript - contenu de script facultatif (ce contenu est affiché pour les navigateurs qui ne prennent pas en charge le script)

* ol - formulaire de tri

* p - paragraphe

* texte pré-formaté

* table - tableau

* ul - liste non triée

élément d'élément en ligne)

* a - point d'ancrage

* abbr - abréviation

* acronyme - mot initial

* b - gras (non recommandé) * bdo - remplacement du bidi

* big - grande police

* br - saut de ligne

* citer - citer

* code - code informatique (obligatoire pour citer le code source) * dfn - champ de définition

* em - emphase

* police - paramètre de police ( non recommandé)

* i - italique

* img - image

* input - zone de saisie

* kbd - définir le texte du clavier

* label - étiquette du tableau

* q - citation courte

* s - trait de soulignement (non recommandé)

* samp - définir un exemple de code informatique

* select - sélection d'éléments

* small - texte en petite police

* span - conteneur en ligne couramment utilisé, définissant des blocs dans le texte

* strike - souligné

* fort - accent gras

* sub - indice

* sup - exposant

* textarea - zone de saisie de texte multiligne

* tt - télex

 * u - Souligner

* var - Définir les variables

Éléments variables

Les éléments variables sont déterminés en fonction du contexte Soyez un bloc. élément ou un élément en ligne.

* applet - applet java * bouton - bouton

* del - supprimer le texte

* iframe - cadre en ligne

* ins - texte inséré

* carte - bloc d'image (carte)

* objet - objet objet

* script - script client

associé Recommandé : "

tutoriel vidéo 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!

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)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

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

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

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

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

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

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

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

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Espace réservé d'entrée HTML Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

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

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

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

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

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

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

See all articles