Galerie de cartes mentales Points de connaissances HTML5 et CSS3
Il s'agit d'une carte mentale sur les points de connaissances HTML5 CSS3, y compris les éléments et attributs de la page HTML, l'introduction au CSS, le modèle de boîte CSS, le flottement et le positionnement, l'application de formulaire, etc.
Modifié à 2021-07-06 01:12:01This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
HTML CSS3
Première introduction au HTML
balise de contrôle de texte
balise de titre
<hn align="alignment">Texte du titre</hn>
marque de paragraphe
<p align="alignment">Texte du titre</p>
marque de ligne horizontale
<hr attribut="valeur d'attribut"/>
marque de nouvelle ligne
<br/>
Balises de formatage du texte
Le texte <b></b> et <strong></strong> est affiché en gras (b définit le texte en gras, strong définit le texte souligné)
balise d'image
<img src="URL de l'image"/>
texte de remplacement alt lorsque l'image ne peut pas être affichée
balise de lien hypertexte
<a href="Jump target" target="Comment la fenêtre cible apparaît">Texte ou image</a> target _self est la valeur par défaut, ce qui signifie ouvrir dans la fenêtre d'origine, _blank signifie ouvrir dans une nouvelle fenêtre
Lien d'ancrage <a href="#id name">Texte du lien</a>
Éléments et attributs de la page HTML
Liste des éléments
<ul> Liste non ordonnée <li>Élément de liste 1</li> (<ul></ul> ne peut être imbriqué que <li> </li>)
<ol> Liste ordonnée <li>Élément de liste 1</li> Changer la valeur de départ de la numérotation des listes <ol start="2">
L'élément dl est souvent utilisé pour expliquer et décrire des termes ou des noms. <dl> <dt>Nom 1</dt> <dd>Explication du nom 1<dd>
Éléments structurels
élément d'en-tête
élément d'en-tête (un élément structurel ayant un rôle de guidage et de navigation pouvant contenir tout le contenu habituellement placé en tête de page) Format grammatical de base ; <en-tête> <h1>Thème Web</h1> …. </en-tête>
élément de navigation
élément de navigation (les liens avec les propriétés de navigation peuvent être résumés dans une seule zone) Format de syntaxe de base : <navigation> <ul> <li><a href="#">Page d'accueil</li> </ul> </nav>
Éléments interactifs de la page
élément de détails et élément de résumé
l'élément de détails et l'élément de résumé le résumé définit un titre pour les détails, puis le contenu masqué apparaît lorsque vous cliquez dessus <détails> <summary>Afficher la liste</summary> <ul> <li>Liste 1</li> <li>Liste 2</li> </ul> </détails>
Débuter avec CSS
Feuille de style CSS
en ligne
<tagname style="Attribut1:Valeur d'attribut 1";"Attribut2:Valeur d'attribut 2";>Contenu</tagname>
Intégré
<tête> <style type="text/css"> Sélecteur {Attribut 1 : Valeur d'attribut 1 ; Attribut 2 : Valeur d'attribut 2} </style> </tête>
type=texte/css
Lien d'entrée
<link href="chemin d'accès au fichier CSS" type="text/css" rel="stylesheet"> Tous les trois doivent être présents
Sélecteurs de base CSS
sélecteur de balises
Nom de la balise {Attribut 1 : valeur d'attribut 1 ; Attribut 2 : valeur d'attribut 2}
sélecteur de classe
.Nom de classe {Attribut 1 : valeur d'attribut 1 ; Attribut 2 : valeur d'attribut 2}
Sélecteur d'identifiant
#id nom {attribut 1 : valeur d'attribut 1 ; attribut 2 : valeur d'attribut 2}
sélecteur de caractères génériques
*{Attribut 1 : valeur d'attribut 1 ; Attribut 2 : valeur d'attribut 2}
Peut correspondre à tous les éléments de la page
Sélecteur d'union
Les sélecteurs sont reliés par des virgules et n'importe quel sélecteur peut être utilisé dans le cadre du sélecteur d'union.
Propriétés du style de texte
taille de police : taille de la police
em taille de la police px les pixels sont les plus couramment utilisés
famille de polices : police
em taille de la police px les pixels sont les plus couramment utilisés
font-weight : poids de la police
normal Gras par défaut Définit les caractères gras bolder Définit les caractères plus gras plus clair définit des caractères plus clairs (100-900) 400 est égal à normal
style de police : style de police
valeur par défaut normale italique italique oblique oblique
Propriétés d'apparence du texte
coler : couleur du texte
espacement des lignes en hauteur
Il existe généralement trois types d'unités de valeur d'attribut : pixel px valeur relative em pourcentage %
décoration de texte décoration de texte
aucun Pas de décoration souligner souligner surligner surligner barrer barré
text-align : mode d'alignement horizontal
à gauche aligné à gauche à droite aligné à droite centré centré
taxt-indent : retrait de première ligne
Formulaire de demande
Créer un formulaire
<from action="adresse url" method="méthode de soumission (post)" name="nom du formulaire"> Divers contrôles de formulaire </de>
éléments et attributs d'entrée
Zone de saisie de texte sur une seule ligne ,<input type="text">
Zone de saisie du mot de passe <type d'entrée="mot de passe">
bouton unique <type d'entrée="radio">
case à cocher <type d'entrée="checkbox">
bouton de soumission <type d'entrée="soumettre">
bouton de réinitialisation <type d'entrée="reset">
sélectionner un élément
<sélectionner> <option>Options</option> <option>Options</option> <sélectionner>
Flottage et positionnement
flotteur d'éléments
L'attribut float de l'élément float l'élément gauche flotte vers la gauche l'élément droit flotte vers la droite aucun élément ne flotte pas
Positionnement des éléments
Position : valeur d'attribut statique positionnement statique relatif positionnement relatif absolu positionnement absolu fixe positionnement fixe
type d'élément
La balise <span> ne peut contenir que du texte et diverses balises en ligne
Modèle de boîte CSS
<div>modèle de boîte
<div> peut remplacer des éléments au niveau du bloc
L'espace entre <div> et </div> est équivalent à une boîte. Vous pouvez définir les marges, le remplissage, la largeur et la hauteur. En même temps, il peut accueillir divers éléments du réseau tels que des paragraphes, des titres, des tableaux, des images, etc. etc.
Propriétés liées au modèle de boîte
Propriétés des bordures
style de bordure
border-style : /Paramètre complet du style de bordure/
largeur de la bordure
largeur de la bordure Une valeur pour quatre côtés
couleur de la bordure
couleur de la bordure
Paramètres de bordure complets
bordure : couleur du style de largeur
Propriétés de marge
automatique automatique
rembourrage
Rembourrage supérieur Rembourrage inférieur Rembourrage-gauche rembourrage gauche Rembourrage-droite rembourrage droit
marge marge
Rembourrage supérieur de la marge supérieure Rembourrage inférieur de la marge Remplissage de la marge gauche Remplissage de la marge droite Marge en haut à droite en bas à gauche
marges intérieures et extérieures claires
*{ remplissage : 0 ; marge : 0 ; }
propriétés d'arrière-plan
Lors de l'ajout d'images dans la boîte Si la largeur et la hauteur sont de 100 %, la couverture peut être automatiquement ajustée.
Couleur de l'arrière plan Définir la couleur d'arrière-plan
image d'arrière-plan Définir l'image d'arrière-plan
Répétition du fond Définir les vignettes de l'image d'arrière-plan
carreaux de répétition d'arrière-plan horizontalement et verticalement -no-repeat ne pas carreler Répéter les tuiles x horizontalement Répétez-y pour carreler verticalement
position d'arrière-plan Valeurs de pixels pour contrôler la position de l'image d'arrière-plan
taille de l'arrière-plan Définir la taille de l'image
Taille de l'arrière-plan : attribut 1, attribut 2 ; La couverture est suffisamment grande. La taille maximale du contenu s'adapte complètement à la zone de contenu.
Sélecteurs CSS3
:avant le sélecteur
Pour insérer du contenu avant le contenu de l'élément sélectionné, le contenu doit être spécifié avec l'attribut content. <élément> : avant { Contenu : texte ; }
Lien pseudo-classe
a: link{règle de style CSS ;} L'état du lien hypertexte non visité
a: visité{règles de style CSS;} L'état du lien hypertexte après la visite
a: hover {règle de style CSS ;} L'état du lien hypertexte lorsque la souris passe ou survole
a: active {règle de style CSS ;} L'état du lien hypertexte lorsque la souris ne bouge pas
gauche gauche bien, bien centre centre
largeur (largeur) hauteur titre (contenu affiché au survol de la souris)