Show Menu
Cheatography

101-HTML-CSS Cheat Sheet by [deleted]

Petit Cheat Sheet sur les principals balises HTML et CSS

HTML

<!D­OCTYPE html>
Début
<ht­ml>
Document HTML

Section

<he­ade­r>
Entête du site
<fo­ote­r>
Pied du site
<na­v>
Elément de navigu­ation
<ma­in>
Menu principal
<se­cti­on>
Groupement thématique de contenu, généra­lement avec un en-tête, titre
<ar­tic­le>
Contenu autonome dans une page message sur un forum, un article de blog, ...
<as­ide>
Contenu qui indire­ctement lié, en marge du sujet principal, voir même sans rapport

CSS

color
choisir la couleur
font-f­amily
police de texte
font-size
taille de texte
font-style
italiq­ue,...
font-w­eight
epaisseur de police
line-h­eight
hauteur de la ligne
text-d­eco­ration
modifie le soulig­nement des liens
text-align
place le texte
text-t­ran­sform
majusc­ule­,mi­nuscule
letter­-sp­acing
espacer, diminuer l'espace du texte
overflow
permet de pas faire sortir le contenu
max-width
taille maximum
min-width
taille minimum
 

Tableau

<ta­ble>
Tableau
<ca­pti­on>
Titre du tableau
<th­ead>
Entête du tableau
<tb­ody>
Corps du tableau
<tf­oot>
Pied du tableau
<tr>
Ligne du tableau
<th>
Cellule d'entête
<td>
Cellule de donnée
colspan
Fusion de cellule en colonne
rowspan
Fusion de cellule en ligne

Liens, ancre et dossier

<a href="h­ttp­s..."> </a>
<a href=""> </a>
"­nom­-do­ssi­er/­"
pour aller dans un dossier
"../­"
pour sortir d'un dossier
#...
ancre

Image

<im­g>
élément image
scr = "­"
définit le chemin de l'image
alt = "­"
texte définitant l'image
height = "­"
hauteur de l'image en pixel
width = "­"
largeur de l'image en pixel
<ti­tle>
"­Déf­ini­tio­n" de l'image
 

Balise de base

<p>
Paragraphe
<q>
pour les citations
<he­ad>
Info que l'util­isateur ne voit pas
img scr=
Dit où est l'image
<im­put...
Champs de saisit
<h1>
Titre 1
sémantique
Donne un sens à un titre
.. required >
Champs de saisit obliga­toire
<br>
Pousse un mot à la ligne
<hr>
Fait une ligne et un retour à la ligne dessus et dessous du texte
<ul>
Liste à puce
<ol>
Liste à chiffres
<li>
représente un élément d'une liste
<em>
Moyenne importance
<st­ron­g>
très important
<ma­rk>
représente du texte surligné
<de­l>
représente du texte qui a été suprimé
<df­m>
définition d'un terme
<ab­br>
abrévi­ation
<ti­me>
date ou heure précise
<ad­res­s>
élément de contact
<su­b> <su­b>
texte en exposant ou en indice
<ci­te>
contient le titre d'une oeuvre, livre, chanson
<q>
petite citation
<bl­ock­quo­te>
grande citation
start
1er élément de la liste
<dt>
Terme à définir
<dd>
descri­ption
reversed
liste inversée
<a href=""> </a>
Lien (autre site)
<a href=""> </a>
Lien (son site)
<h3 id="­"> </h­3>
pour placer une ancre sur la page
<a href=""> </a>
envoi vers une ancre
target­="_b­lan­ck"
ouvre un nouveau onglet
"­mai­lto­:a@­b.c­"
ouvre la boite mail
"­tel­:00­012­124­98"
ouvre un numéro de téléphone
<fi­gca­pti­on>
défini l'image
id
identi­fiand unique
class
classe les élément
<di­v>
groupe du texte dans un block
<sp­am>
groupe du texte dans un inline
<class "­sta­bil­o"...>
Met en surlingné
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Five ways to center DIV element in CSS Cheat Sheet