Concepts de base du HTML
1. Qu'est-ce que le HTML ?
HTML est un langage de balisage hypertexte qui crée des normes Web.
2. Quel est le cadre de base du HTML ?
<!DOCTYPE html> 网页的类型声明
<html>
<head lang="en"> 网页的语言类型
<meta charset=UTF-8> 浏览器的编码格式
<title>xxxxx<title> 网页的标题标签
<head>
<body>
xxxxxxxxx 网页的内容
<body>
<html>Remarque :
①Le format d'encodage par défaut du navigateur est UTF-8.
②Le format de rendu par défaut du navigateur est de gauche à droite et de haut en bas.
3. Format d'écriture HTML.
Les documents HTML sont définis par des éléments html, et html est écrit avec <html></html>/ . La première balise a un début et une fin, indiquant que la balise a du contenu ; la dernière balise commence et se termine, indiquant que la balise n'a pas de contenu.</html>
Balises HTML
1. Classification des balises HTML.
<1>Les balises HTML peuvent être divisées en sauts de ligne ou non
(1) Éléments de niveau ligne (éléments en ligne) → ne pas envelopper
(2) Élément de niveau bloc → saut de ligne (la taille par défaut est de 100 % du conteneur parent)
Comment distinguer les éléments de niveau ligne des éléments en ligne ?
Étant donné que les navigateurs ajoutent cssdes styles aux éléments par défaut, les styles les accompagnent display:block(éléments de niveau bloc par défaut) ; sinon, ce sont des éléments de niveau ligne.
<2>Les balises HTML peuvent être divisées en
(1) autiste et<html></html>
(2) complètement fermé<html/>
2. Types d'étiquettes.
<1> balise de titre
hÉcriture d'étiquette ( h1- h6) <h>[étiquette au niveau du bloc]
Caractéristiques : nouvelle ligne, police en gras par rapport au texte ordinaire et taille de police de grande à petite, il existe un espacement supérieur et inférieur par défaut entre les étiquettes.
<2> Balises de paragraphe
pLibellé [libellé au niveau du bloc]
Fonction : segmenter le document.
Attribut : alignement du texte
align="center" left/center/right
<3>Étiquette de ligne horizontale
<hr/>Libellé [libellé au niveau du bloc]
Caractéristiques : tracer des lignes.
<4> Libellé de retour à la ligne obligatoire
<br/>Étiqueter
Fonction : forcer un saut de ligne.
<5> Balises de mise en forme du texte
(1) bLibellés/ stronglibellés [libellés au niveau de la ligne]
Fonction : texte en gras.
(2) iLibellés/ emlibellés [libellés au niveau de la ligne]
Fonction : La police est inclinée.
(3) smallLibellé [libellé au niveau de la ligne]
Fonction : petite taille de police.
(4) delLibellé [libellé au niveau de la ligne]
Fonction : ajouter un barré
(5) insLibellé [libellé au niveau de la ligne]
Fonction : insérer du texte, ajouter un soulignement.
(6) sub/ supétiquette [étiquette au niveau de la ligne]
Fonction : Ajouter un exposant et un indice.
(7) codeLibellé [libellé au niveau de la ligne]
Fonction : empêcher le code.
(8) preLibellé [libellé au niveau du bloc]
Fonction : sortie sur la page Web telle qu'elle est.
<6> Libellé du lien hypertexte
aLibellé [libellé au niveau de la ligne]
Fonction : saut de page.
Attributs : (1)href=""
Deux manières d'écrire href : chemin distant ou chemin relatif (relatif au chemin du fichier projet en cours)
La méthode d'écriture du chemin relatif :
① Ecrire directement. (ce qui signifie le même niveau de répertoire)
② .(un point signifie sauter d'un niveau)
href="#" 默认跳转当前页面
(2) target _blankRouvrir un onglet.
(3) Utilisez ades liens comme balises d'ancrage.
<a href="#xxx">xxxx</a>Il peut s'agir d'un attribut de n'importe quelle étiquette idou d' un attribut ade lien name.
<7> Balise d'image
imgLibellé [libellé au niveau de la ligne]
Fonction : utilisée pour afficher des images.
Attributs :
src=""chemin de l'image actuelle (distante ou relative) ;
alt=""informations affichées lorsque l'image ne se charge pas ;
title=""informations sur le titre ;
width=""définir la largeur de l'image ;
height=""définir la hauteur de l'image ;
align=""alignement du texte.
<8> étiquette de liste
(1) ulLibellé : liste non ordonnée
(2) olLibellé : liste ordonnée
Attribut : type=""Le numéro de série peut être modifié.
(3) liLibellé : afficher le contenu.
(4) Étiquette personnalisée
dlBalises : similaires ul/ ol.
dtBalises : Équivalent li.
ddLibellés : Contenu de la liste.
<dl>
<dt>列表项</dt>
<dd>列表内容</dd>
</dl>
Remarque :
Les listes ordonnées peuvent être imbriquées avec des listes non ordonnées.
<ul>
<li>XX
<ol>
<li>XX</li>
<li>XX</li>
</ol>
</li>
<li>XX
<ol>
<li>XX</li>
<li>XX</li>
</ol>
</li>
<li>XX
<ol>
<li>XX</li>
<li>XX</li>
</ol>
</li>
</ul><9> éléments de bloc
(1) div【Éléments de niveau bloc】
Utilisé avec d'autres éléments, il sert principalement à la construction de pages web.
(2) span【éléments de niveau ligne】
Principalement utilisé pour mettre du texte.
<10> élément de formulaire de tableau
tableBalise : tr td/ th(centré et gras) [élément de niveau bloc]
Attributs :
caption : définir l'en-tête du tableau.
border: contrôle la largeur de la bordure du tableau.
cellspacing="0": définissez sur 0 pour combiner l'espacement des colonnes.
width: définissez la largeur du tableau.
align: définissez le format du texte du tableau. (gauche/centre/droite)
bgcolor : définissez la valeur de couleur de la page Web pour la couleur d'arrière-plan.
rowspan: à travers les lignes.
colspan: à travers les colonnes.
<11> Balises de formulaire et balises d'objet d'élément de formulaire
(1) formBalise de formulaire : permet à l'utilisateur de saisir des informations et de les soumettre à l'adresse du serveur.
Attribut :
action="" : le chemin du serveur soumis à l'arrière-plan.
method="": méthode de soumission du formulaire.
①get : Soumission explicite.
Avantages : grande quantité de données, non sécurisé
②post : Soumission implicite.
Avantages : sécurité, faible quantité de données.
（get post put delete insert update）
(2) formÉlément d'objet de formulaire
inputLibellé [bloc de niveau ligne]
Remarque :
typeLes attributs déterminent inputle type d'étiquette.
<input/>S'il n'y a pas typed'attribut d'écriture, la valeur par défaut est une zone de texte sur une seule ligne.
①Zone de texte sur une seule ligne
type="text" value="" : définissez la valeur de l'élément.
maxlength="": Définissez la longueur d'entrée maximale.
disabled: La zone de texte devient indisponible après l'ajout.
placeholder=“”: Invite intelligente.
②Boîte de mot de passe
type="password" ③Touche radio
type="radio"Attributs :checked : sélection par défaut
Remarque :
Le bouton radio peut être à choix multiples et une étiquette porte le même nom.
④. Case à cocher
type="checkbox"⑤Propriétés de l'Explorateur de fichiers
<input type="file"/>
:
multiple Sélection multiple.
accept=".mp3,.mp4,.wmv": Restreint le format de fichier.
⑥Attribut
buttond'étiquette de bouton (bouton normal), (bouton de réinitialisation), (bouton de soumission). Reset et submit ne sont valables que dans le formulaire form.
type
buttonresetsubmit
<input type="reset" value="取消"/><button type="reset">按钮</button>
<input type="submit" value="注册"/><button type="submit">按钮</button>⑦Onglet de menu
selectdéroulant.
<select>
<option>——请选择——</option>
<option value="0">xx</option>
<option value="1">xx</option>
<option value="2">xx</option>
<option value="3">xx</option>
</select>Remarque :
optionLes balises sont selectun sous-ensemble de balises et vlauecorrespondent à la valeur de l'élément en cours.
⑧Zone de texte multiligne
<textarea></textarea>
Attribut :
placeholder="请输入...."
rows=""combien de lignes.
cols=""Combien de colonnes.
⑨Étiquette Iframede cadre
Fonction : être un système de petite entreprise.
Attributs :src : le chemin à intégrer.
<iframe src="https://www.baidu.com"></iframe>⑩Label Function : Il est utilisé pour noter que lablela valeur de liaison de la liaison actuelle est sous la forme .inputforinputinputid