Wondershare EdrawMind
MindMap Gallery HTML
- 5
HTML
Cette carte mentale sur HTML partage la connaissance des styles, des balises et des attributs des pages Web. Si vous êtes intéressé, vous pouvez y jeter un œil.
Edited at 2023-05-27 23:46:10
- Recommended to you
- Outline
Processus de développement de produits de ventilateurs d’air frais et informations associées
- 7
HTML
Style Web<br>
Sélecteur
Sélecteur de balises<br>
Nom de la balise {nom de l'attribut : attribut ; nom de l'attribut : attribut><br>
Sélecteur de classe<br>
.Nom de la balise {nom de l'attribut : nom de l'attribut : attribut><br>
Sélecteur d'ID<br>
#id{Nom de l'attribut : attribut ; Nom de l'attribut : attribut><br>
<pre class="prettyprint Linenums Prettyprinted"><code class="langue-html"><span class="tag"><h1 style="font-size:18px">Comment utiliser le format en ligne</h1>< /span></code></pre>
<span style="font-family: 'Wawati SC';">Nom de la balise, nom de la classe, #ID</span><span style="font-family: 'Wawati SC';"><span style=" font-family:Wawati SC">｛</span>Sélecteur d'union</span><span style="font-family:Wawati SC">｝</span>
<span style="font-family:Wawati SC">Nom de la balise.Nom de la classe {Sélecteur d'intersection></span>
<span style="font-family: 'Wawati SC';">Nom de la balise externeNom de la balise interne</span><span style="font-family: 'Wawati SC';"><span style="font-family : Wawati SC">｛</span>Sélecteur de descendance</span><span style="font-family:Wawati SC">｝</span>
Comment introduire les styles CSS<br>
Styles en ligne<br>
Incorporer des styles<br>
<pre class="prettyprint linenums Prettyprinted"><code class="langue-html"><span class="tag"><head><style type="test/css"> h1{Nom de l'attribut : attribut;}< /style></head></span></code></pre>
Importer des styles<br>
<link href="Nom du fichier de style" type="Format du fichier de lien texte/css" rel="stylesheet" feuille de style externe du document/><br>
Spécifie la relation entre le document actuel et le document lié. Seule la feuille de style est applicable à tous les navigateurs.
sous-thème
Propriétés CSS<br>
taper
Type de police : famille de polices<br>
Rendu des polices : text-shadow<br>
Taille de la police : font-size<br>
Style de police : font-style<br>
oblique légèrement incliné<br>
italictilt<br>
Épaisseur de la police : font-weight<br>
Police majuscule : font-variant<br>
Attribut de police : police
police{style poids taille type><br>
Style de décoration de texte : text-decoration<br>
Souligner : souligner<br>
Barré : barré<br>
Couleur : couleur<br>
Contexte<br>
Couleur d'arrière-plan : couleur d'arrière-plan<br>
Image d'arrière-plan : image d'arrière-plan<br>
Méthode de répétition de l'image d'arrière-plan : bakeground-repeat<br>
Image d'arrière-plan Position de départ de l'axe X et Y : background-position<br>
Association d'arrière-plan : background-attachment:fixed (l'arrière-plan ne défile pas avec le texte)<br>
bloc
espacement des mots : espacement des mots
Espacement des lettres : espacement des lettres<br>
Alignement vertical avec le texte : alignement vertical, alignement du texte<br>
Retrait de première ligne : text-indent<br>
Mode d'affichage : affichage<br>
Hauteur de ligne : hauteur de ligne
Modèle de boîte<br>
Définir la largeur et la hauteur : largeur, hauteur<br>
Rembourrage en haut, en bas, à gauche et à droite : rembourrage en haut, à droite, en bas, à gauche<br>
Marges externes haut, bas, gauche et droite : marge-haut, droite, bas, gauche<br>
margin:0px auto;Page Web centrée<br>
Frontière : frontière<br>
Style de bordure : style ; épaisseur de bordure : largeur ; couleur de bordure vers le haut, le bas, la gauche et la droite<br>
<pre>border-style : pointillé, plein, double, pointillé </pre>
L'affichage contrôle l'affichage et le masquage des éléments<br>
display:block affiche l'élément en tant qu'élément de niveau bloc, avec des sauts de ligne avant et après<br>
display:inline affiche les éléments sous forme d'éléments de suivi sans sauts de ligne<br>
display:none masque l'élément<br>
flotter<br>
flotter<br>
flotteur clair et clair<br>
flotteurs clairs à gauche et à droite<br>
traitement du débordement de la boîte de débordement<br>
Le contenu visible sera recadré et le contenu recadré apparaîtra en dehors de la zone<br>
Le contenu masqué sera recadré et le reste du contenu sera invisible<br>
position
position
positionnement relatif vélatif<br>
apparaîtra là où il se trouve, permettant à l'élément de se déplacer "par rapport" à son origine
positionnement absolu<br>
Une boîte d'éléments définie sur un positionnement absolu est complètement supprimée du flux de documents et positionnée par rapport à son bloc conteneur, qui peut être un autre élément du document ou le bloc conteneur initial. L'espace précédemment occupé par l'élément dans le flux de documents normal est fermé, comme si l'élément n'existait pas. L'élément génère une boîte au niveau du bloc après le positionnement, quel que soit le type de boîte qu'il a généré à l'origine dans le flux normal.
Niveau de réglage de l'index z<br>
liste
Type de numéro d'article : type de style de liste<br>
Image du numéro d'article : image-style-liste<br>
Position de la marque d'élément : position-style-liste<br>
la balise intérieure s'affiche à l'intérieur<br>
La balise onside est affichée à l'extérieur<br>
Pseudo-classe de lien hypertexte<br>
Style de lien hypertexte lors d'un accès sans cliquer sur un: lien
Style de lien hypertexte après avoir cliqué pour visiter un : visité
Le style du lien hypertexte sur lequel la souris survole a:hover
Style de lien hypertexte qui n'est pas libéré par un clic de souris a:active
Définir la forme de la souris : curseur<br>
Curseur par défaut : par défaut<br>
Pointeur de lien hypertexte : pointeur<br>
span{curseur:pointeur;}
Indique que le programme est occupé : attendez<br>
Indique l'aide disponible : help<br>
Texte d'instruction : texte
Balises et attributs<br>
Texte entre <html> et </html> décrivant la page Web
Le texte entre <head> et </head> est le contenu visible en en-tête de la page Web<br>
Le texte entre <title> et </title> est le titre de la page Web<br>
Le texte entre <body> et </body> est le contenu visible de la page
Le texte entre <h1> et </h6> est affiché comme titre
Le texte entre <p> et </p> est affiché sous forme de paragraphe
<br/> Saut de ligne <hr/> Ligne horizontale<br>
Le texte entre <em> et </em> <i> et </i> est en italique<br>
Le texte entre <strong> et </strong> est souligné<br>
Les images <img/> et </img>HTML sont définies via la balise <img>.
<pre><img src="Adresse de l'image" width="width" height="length" <code>alt="</code><code>Utilisé pour définir une chaîne de texte remplaçable préparé pour l'image"</ code > title="Survolez la souris pour afficher le texte"/></pre>
Les liens HTML <a> et </a> sont définis à l'aide de la balise <a>.
·······
Lien d'ancrage (accéder à la balise spécifiée) : <a href="#name"></a><p name="name"></p>
symboles spéciaux
Espace<br>
> Signe supérieur à
&Lt ;
&copier le symbole du droit d'auteur ©
www.w3school.com.cn
<meta> et </meta> définissent le format d'encodage<br>
UTF-8, GB2312, GBK<br>
<meta charset="UTF-8"></meta><br>
<link> et </link> sont utilisés pour introduire les styles CSS<br>
liste
<ul><li> Avec </li></ul> Liste non ordonnée<br>
Type d'attribut : disque cercle plein, boîte carrée, cercle cercle creux<br>
<ol><li> et </li></ol> liste ordonnée<br>
Type d'attribut : 1aAIi<br>
<dl><dt><dd> et </dd>Remarques</dt></dl> Liste de définitions<br>
Balises de table <table> et </table>, les listes peuvent être imbriquées à l'intérieur<br>
<th> et </th> définissent les en-têtes<br>
<tr> et </tr> définissent les lignes du tableau<br>
<td> et </td> définissent les cellules du tableau<br>
<thead> et </thead> <tbody> et </tbody> <tfoot> et </tfoot>. . .
Propriétés (alignement horizontal : gauche, centre, droite ; alignement central de l'image absmiddle<br> alignement vertical valign : alignement supérieur supérieur, alignement central central, alignement inférieur inférieur, alignement de la ligne de base)
<table border="1" Cellpadding="L'espacement entre les cellules et le contenu" Cellpacing="L'espacement direct entre les cellules''"></table>
Fusionner colspan horizontalement, fusionner la liste rowspan<br>
<frameset> et </frameset> (écrits à l'extérieur du corps)
Attributs (définir les lignes de tri vertical du cadre cols="200px,*,100px")<br>
<frame src="Autre adresse de page Web" name="Nom, facile à sauter"/>
<iframe> et </iframe>
Balises de formulaire <form> et </form>, les éléments du formulaire peuvent être imbriqués à l'intérieur<br>
<pre><form action="Site Web soumis" method="GET ou POST"></pre>
<p>Si la soumission du formulaire est passive (comme une requête sur un moteur de recherche) et ne contient pas d'informations sensibles. Lorsque vous utilisez GET, les données du formulaire sont visibles dans la barre d'adresse de la page.</p><p>Si le formulaire met à jour des données ou contient des informations sensibles (telles qu'un mot de passe). POST est plus sécurisé car les données soumises dans la barre d'adresse de la page sont invisibles. </p>
<input name="Nom de l'élément" type="Type" value="Valeur" size="Largeur d'affichage" maxlength="Longueur du caractère" vérifié="Qu'il soit sélectionné" désactivé="désactivé" readonly="lecture seule lecture seule" > <br>
<em><input type="text"></em> définit un champ de saisie sur une seule ligne pour la <em>saisie de texte</em>
<pre><input type="text" name="lastname"></pre>
<em><input type="password"></em> définit la <em>zone de mot de passe</em>.
<pre><input type="password" name="lastname"></pre>
<em><input type="radio"></em> définit un <em>bouton radio</em>.
<pre><input type="radio" name="sex" (les noms des mêmes boutons radio doivent être cohérents) value="female">Femme</pre>
<em><input type="checkbox" name="Les noms entre les cases à cocher doivent être cohérents"></em> Définir la <em>case à cocher</em>.
<em><input type="submit"></em> définit le bouton pour <em></em><em>soumettre</em> le formulaire.
<em><input type="reset"></em> Définit le bouton pour <em></em><em>réinitialiser</em> le formulaire.
<em><input type="button"></em> définit un bouton normal pour le formulaire <em></em><em></em>.
<pre><button type="button" onclick="alert('Hello World!')">Cliquez sur moi !</button></pre>
<em><input type="file"></em> définit la <em></em><em>boîte de sélection de fichier</em>.
<input type="hidden">champ caché<br>
<em><select></em> Définir la <em>liste déroulante</em><em><em><option></em> Définir l'option à sélectionner</option></select> </em>
<pre><select name="cars" size="Longueur de chaque occurrence"><br><option value="volvo"<em></em> selected = "selected" (sélectionné par défaut)>Volvo</ option><br><option value="saab">Saab</option><br><option value="fiat">Fiat</option><br><option value="audi">Audi</option> <br></select></pre>
L'élément <em><textarea></em> définit un champ de saisie multiligne (<em>textarea</em>)</textarea>
<pre><textarea name="message" rows="10" cols="30"><br>Il s'agit d'un contenu textuel prédéfini<br></textarea></pre>
L'élément <em><datalist></em> spécifie une liste prédéfinie d'options. <option value="Contenu prédéfini"></datalist>
<datalist id="navigateurs"><br> <valeur d'option="Internet Explorer"><br> <valeur d'option="Firefox"><br> <valeur d'option="Chrome"><br> <valeur d'option=" Opéra"><br> <option value="Safari"><br></datalist>
<fieldset field><legend field title>Forme sémantique</legend></fieldset><br>
Formulaires associés<br>
<pre id="line1"><span><<span class="start-tag">étiquette</span> <span class="attribute-name">pour</span>="<a class="attribute -value">mâle</a>"></span><span>Mâle</span><span></<span class="end-tag">étiquette</span>></span><span ><br></span><span><<span class="start-tag">input</span> <span class="attribute-name">type</span>="<a class="attribute -value">radio</a>" <span class="attribute-name">nom</span>="<a class="attribute-value">sexe</a>" <span class="attribute- name">id</span>="<a class="attribute-value">masculin</a>"<span>/</span>></span></pre>