Maison >interface Web >tutoriel HTML >Résumé de plusieurs points clés de l'apprentissage du HTML
Résumé de plusieurs points clés de l'apprentissage du HTML
- 无忌哥哥original
- 2018-07-19 11:39:412604parcourir
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 ligneComparer
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 a4b561c25d9afb9ac8dc4d70affff419 et 5a8028ccc7a7e27417bff9f05adf5932, et les deux balises b96cac025db4031319c29e1eb68f19d6 et 2cdea26b4c3988e37d674b56660962a7 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> 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> (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>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>
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>
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" />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 , mais cette méthode ne peut pas être utilisée avec js
- Positionnement absolu, positionnement relatif et positionnement fixe
-
Remarque :
1. L'attribut position peut contrôler comment et où le navigateur Web affiche des éléments spécifiques.c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f2659272. Vous pouvez utiliser l'attribut position pour placer un élément n'importe où sur la page Web.
- 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.
——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.
Différence :
(1) Le positionnement fixe est toujours relatif au positionnement du navigateur.
(2) sera fixé à une certaine position dans la fenêtre du navigateur et ne défilera pas avec la barre de défilement.
(3) IE6 ne prend pas en charge le positionnement fixe.
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!