Résumé de plusieurs points clés de l'apprentissage du HTML-tutoriel HTML-php.cn

Résumé clé du HTML

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

HTML peut classer les éléments en Il existe trois types de éléments en ligne, éléments de bloc et éléments de bloc en ligne
En utilisant l'attribut d'affichage, les trois peuvent être convertis arbitrairement
Éléments de bloc automatiquement Saut de ligne
Méthode de conversion
(1)display:inline; Convertir en élément en ligne
(2) display: block; Convertir en élément de bloc
(3)display:inline-block; Convertir en élément de bloc en ligne
Comparer

1. Élément en ligne

L'élément en ligne le plus couramment utilisé est span, et les autres ne sont utilisés que sous des fonctions spécifiques. Les balises de police modifiées <b> et <i>, et les deux balises <sub> et <sup> peuvent être utilisées. directement Il est très pratique de créer un effet carré sans l'aide d'attributs de mouvement similaires.

Caractéristiques des éléments en ligne : (1) La définition de la largeur et de la hauteur n'est pas valide

(2) La définition de la marge n'est valable que dans les directions gauche et droite, pas vers le haut et vers le bas ; le paramètre est valide dans les directions haut, bas, gauche et droite, ce qui agrandira l'espace　　　　　　　　　　　　　　　　　　　2. Élément de bloc

　 L'élément de bloc représentatif est p, d'autres tels que p, nav, à part, l'en-tête, le pied de page, la section, l'article, l'ul-li, l'adresse, etc. peuvent tous être implémentés en utilisant p. Cependant, afin de faciliter l'interprétation du code par les programmeurs, des balises sémantiques spécifiques sont généralement utilisées pour rendre le code plus lisible et faciliter la vérification des erreurs.

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>行内元素</title>
          <style type="text/css">
              span {                  
              width: 120px;                 
              height: 120px;                 
              margin: 1000px 20px;                 
              padding: 50px 40px;                 
              background: lightblue;             
              }
         </style>
     </head>

     <body>
         <sspan>不会自动换行</span>
         <span>行内元素</span>
     </body>

 </html>

Copier après la connexion

Caractéristiques des éléments de bloc : (1) Possibilité d'identifier la largeur et la hauteur

(2) La marge et le remplissage sont valables pour le haut, le bas, la gauche et la droite

( 3) Retour à la ligne automatique

(4) Plusieurs balises d'éléments de bloc sont écrites ensemble et la disposition par défaut est de haut en bas

3. > Les éléments de bloc en ligne combinent les caractéristiques des éléments en ligne et des éléments de bloc, mais chacun a ses propres compromis. Par conséquent, les éléments de bloc en ligne sont utilisés plus souvent en raison de leurs caractéristiques d'utilisation quotidienne.

Caractéristiques des éléments de bloc en ligne : (1) Pas de retour à la ligne automatique

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>块状元素</title>
          <style type="text/css">
              p {                  
              width: 120px; 
               height: 120px;                 
               margin: 50px 50px;                 
               padding: 50px 40px;                 
               background: lightblue;            
                }
         </style>
     </head>

     <body>
         <i>自动换行</i>
         <p>块状元素</p>
         <p>块状元素</p>
     </body>

 </html>

Copier après la connexion

(2) Capable de reconnaître la largeur et la hauteur

(3) La disposition par défaut est de gauche à à droite

Chemin absolu et chemin relatif

Chemin absolu : fait référence à la position absolue sous le répertoire, atteignant directement l'emplacement cible, généralement le chemin partant de la lettre du lecteur

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>行内块状元素</title>
          <style type="text/css">
              p {                  
              display: inline-block;                 
              width: 100px;                 
              height: 50px;                 
              background: lightblue;             
              }
         </style>
     </head>

     <body>
         <p>行内块状元素</p>
         <p>行内块状元素</p>   
     </body>

 </html>

Copier après la connexion

Chemin relatif : fait référence à la relation de chemin avec d'autres fichiers (ou dossiers) provoquée par le chemin où se trouve ce fichier

Chacun. Sauter Trois façons d'écrire une couche de style
1. Style en ligne :
Écrivez le code CSS directement dans l'existant. Balise HTML

2. Style intégré :

Style CSS intégré, c'est-à-dire que vous pouvez écrire du code de style CSS entre les balises

3. feuille :

<p style="color:red">这里文字是红色。</p>

Copier après la connexion

Le style CSS externe (également appelé style externe) consiste à écrire le code CSS dans un fichier externe séparé. Ce fichier de style CSS a l'extension ".css"

Remarque. :

<style type="text/css">span{color:red;}</style>

Copier après la connexion

le nom du fichier de style CSS doit être conforme aux règles de dénomination, telles que main.css

<link href="style.css" rel="stylesheet" type="text/css" />

Copier après la connexion

rel=”stylesheet” type=”text /css" est une méthode d'écriture fixe qui ne peut pas être modifiée

les fichiers CSS peuvent également être introduits en utilisant l'importation dans
Remarque : <style></style>
1. L'attribut position peut contrôler comment et où le navigateur Web affiche des éléments spécifiques.

Valeurs facultatives :

- static : Valeur par défaut, l'élément n'a pas de positionnement activé

– relatif : Activer le positionnement relatif

– absolu : Activer le positionnement absolu

- Fixe : Activer le positionnement fixe

3. Positionnement relatif

① Chaque élément a une position naturelle dans le flux documentaire de la page. Le déplacement d'un élément par rapport à cette position est appelé positionnement relatif. Les éléments environnants n’en sont absolument pas affectés.

②Lorsque le positionnement relatif est activé, vous pouvez utiliser les quatre attributs haut, droite, bas et gauche pour positionner l'élément.

—-left : Le décalage gauche de l'élément par rapport à sa position de positionnement. left : 100px, décalage de 100px vers la droite par rapport à la position d'origine

—-right : le décalage droit de l'élément par rapport à sa position de positionnement

—-top : l'élément par rapport à sa positionnement position Le décalage haut

—-bas : le décalage bas de l'élément par rapport à sa position de positionnement

③Caractéristiques du positionnement relatif

—-Si l'élément n'est pas défini Décalage, la position de l'élément ne changera pas.

——Le positionnement relatif est relatif à la position d'origine de l'élément dans le flux de documents.

—Le positionnement relatif ne supprime pas l'élément du flux de texte. La position de l'élément dans le flux de texte ne change pas.

——Le positionnement relatif ne modifiera pas les caractéristiques originales de l'élément. Élément de bloc ou élément de bloc, en ligne ou en ligne

- Le positionnement relatif élèvera le niveau de l'élément, permettant à l'élément de couvrir les éléments du flux de texte.

4. Positionnement absolu

①Le positionnement absolu signifie que l'élément est positionné par rapport à l'élément html ou à son élément de positionnement ancêtre le plus proche.

②Lorsque l'attribut position est défini sur absolu, le positionnement absolu de l'élément est activé.

③Lorsque le positionnement absolu est activé, vous pouvez utiliser les quatre attributs haut, droite, bas et gauche pour positionner l'élément.

④Caractéristiques du positionnement absolu :

—Le positionnement absolu séparera complètement l'élément du flux de texte.

—La largeur d'un élément de bloc positionné de manière absolue sera étirée par son contenu.

—Le positionnement absolu transforme les éléments en ligne en éléments de bloc.

: Le positionnement absolu est relatif à son élément ancêtre le plus proche pour lequel le positionnement est activé. Si le positionnement n'est pas activé pour tous les ancêtres, ils seront positionnés par rapport à la fenêtre du navigateur.

——Généralement, lors de l'utilisation du positionnement absolu, un positionnement relatif sera spécifié pour son élément parent afin de garantir que l'élément peut être positionné par rapport à l'élément parent.

——Le positionnement absolu augmentera le niveau de l'élément.

5. Positionnement fixe

①Les éléments de positionnement fixes seront verrouillés à une certaine position sur l'écran Lorsque le visiteur fait défiler la page Web, l'élément fixe restera stationnaire sur l'écran

②Lorsque l'attribut de position est défini sur fixe, le positionnement fixe de l'élément est activé.

③Lorsque le positionnement fixe est activé, vous pouvez utiliser les quatre attributs haut, droite, bas et gauche pour positionner l'élément.

④ Le positionnement fixe est également une sorte de positionnement absolu. D'autres caractéristiques du positionnement fixe sont similaires au positionnement absolu.