Titres HTML
Dans les documents HTML, les titres sont importants.
Le titre est défini via des balises telles que <h1> - <h6>.
<h1> Définit le plus grand titre. <h6> Définissez le plus petit titre.
Instance
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> </body> </html>
Résultat en cours d'exécution du programme :
Commentaire : Le navigateur ajoutera automatiquement des lignes vides avant et après le titre.
Remarque : Par défaut, HTML ajoutera automatiquement une ligne vierge supplémentaire avant et après les éléments de niveau bloc, tels que les paragraphes et les éléments de titre.
Le titre est important
Veuillez vous assurer d'utiliser le titre HTML balise uniquement dans le titre. N'utilisez pas de titres uniquement pour produire du texte en gras ou de grande taille.
Les moteurs de recherche utilisent des en-têtes pour indexer la structure et le contenu de vos pages Web.
Étant donné que les utilisateurs peuvent naviguer rapidement dans votre page à travers les titres, il est important d'utiliser des titres pour présenter la structure de votre document.
H1 doit être utilisé comme titre principal (le plus important), suivi de h2 (le prochain plus important), puis h3, et ainsi de suite.
Ligne horizontale HTML
<hr /> HTML Crée une ligne horizontale sur la page. L'élément
hr peut être utilisé pour séparer le contenu.
Exemple
Le code suivant affichera le titre et la ligne horizontale
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h1>这是第一个标题</h1> <hr/> <h2>这是第二个标题</h2> <hr/> </body> </html>
Résultats en cours d'exécution du programme :
Le code ci-dessus génère le titre <h1> title, Il y a aussi deux lignes horizontales
Paragraphes HTML
Les paragraphes sont définis via la balise <p>
Regardez directement l'exemple
Exemple
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p>这是第一个段落。</p> <p>这是第二个段落。</p> </body> </html>
Résultat de l'exécution du programme :
Voici le premier paragraphe.
Voici le deuxième paragraphe.
Commentaire : Le navigateur ajoutera automatiquement des lignes vides avant et après le paragraphe. (<p> est un élément de niveau bloc)
Astuce : C'est une mauvaise habitude d'utiliser des balises de paragraphe vides <p></p> Remplacez-le par la balise <br /> (Mais n'utilisez pas la balise <br /> pour créer une liste. Ne vous inquiétez pas, vous en apprendrez plus sur les listes HTML plus tard.)
N'oubliez pas la balise de fermeture
Même si vous oubliez d'utiliser la balise de fermeture, la plupart des navigateurs afficheront le HTML correctement, comme ceci :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p>忘记了结束标签 <p>忘记了结束标签 </body> </html>
Résultat de l'exécution du programme :
Oublié la balise de fin
Oublié la balise de fin
L'exemple ci-dessus fonctionnera correctement dans la plupart des navigateurs, mais ne vous fiez pas à cette approche. Oublier d'utiliser les balises de fermeture peut produire des résultats et des erreurs inattendus.
Remarque : Dans une future version de HTML, l'omission de la balise fermante ne sera pas autorisée.
Astuce : Fermer du HTML avec une balise de fermeture est une manière évolutive d'écrire du HTML. Marquer clairement où commence et se termine un élément rend votre code plus facile à comprendre, tant pour vous que pour le navigateur.
Sauts de ligne HTML
Si vous souhaitez créer un nouveau paragraphe sans Pour effectuer des sauts de ligne (nouvelles lignes), utilisez la balise <br /> L'élément
<br /> Puisqu’une balise fermante n’a aucun sens, elle n’a pas de balise fermante.
Instance
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p> 如果<br />需要<br />换行<br />段落,<br />请使用 br 标签. </p> </body> </html>
Résultat de l'exécution du programme :
Si
Besoin de
saut de ligne
paragraphe,
veuillez utiliser la balise br
Espaces HTML.
Normalement, HTML coupe automatiquement les espaces en excès. Quel que soit le nombre d’espaces que vous ajoutez, ils comptent tous pour un seul espace. Par exemple, si vous ajoutez 10 espaces entre deux mots, HTML tronquera 9 espaces et n’en gardera qu’un. Pour ajouter des espaces à une page Web, vous pouvez utiliser  > pour représenter les espaces.
Exemple
Utiliser des espaces dans le code source
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h1>春晓</h1> <p>春眠不觉晓,</p> <p>处处闻啼鸟。</p> <p>夜来风雨声,</p> <p>花落知多少。</p> <p>注意,浏览器忽略了源代码中的排版<br/>(省略了多余的空格和换行)。</p> </body> </html>
Résultats d'exécution du programme :
Ce qui suit utilise   pour représenter les espaces.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h1>春晓</h1> <p>春眠不觉晓,</p> <p>    处处闻啼鸟。</p> <p>      夜来风雨声,</p> <p>        花落知多少。</p> <p>使用了 空格</p> </body> </html>
Résultat en cours d'exécution du programme :
Astuce :   représente un espace