[Introduction au HTML] Leçon 4 - Sauts de ligne, lignes de séparation et HTML comments

[Introduction au HTML] Leçon 4 - Sauts de ligne, lignes de séparation et commentaires HTML

2024-07-12

Dans cette section, nous continuons à parler des connaissances d'introduction au HTML, y compris les sauts de ligne, la séparation horizontale des lignes et les commentaires (commentaires HTML).

Table des matières

1 nouvelle ligne

2 lignes horizontales divisées

3 commentaires HTML

1 nouvelle ligne

le HTML est divisé enélément de bloc et des éléments en ligne. Dans cette section, ne parlons pas d’abord de ces éléments. Parlons d’abord des sauts de ligne. Pourquoi parle-t-on d’éléments de bloc ? Vous le comprendrez peut-être plus tard.

Le saut de ligne est la balise br, ce qui signifie que les deux parties du contenu peuvent être séparées et qu'un effet de saut de ligne est produit au milieu.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是第一段内容</p>
        <p>这是第二段内容</p>
    </body>
</html>

Regardons l'effet ci-dessus, car la balise p elle-même est un élément de bloc et l'élément rapide signifie que si vous écrivez deux éléments p, ils seront enveloppés. Cependant, une fois l'élément p enveloppé, la hauteur générée au milieu est certaine et sera contrôlée par certains paramètres par défaut.

Et si vous souhaitez que l'espace de saut de ligne entre les deux éléments de bloc soit plus grand ? Ou est-ce que je veux un effet de saut de ligne au milieu du texte ? Tu peux le faire:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是<br/>第一段内容</p>
        <br/>
        <p>这是第二段内容</p>
    </body>
</html>

Comme le montre l'image ci-dessus, les deux balises p ont un grand effet d'espacement au milieu. De plus, le texte de la première balise p a également pour effet de revenir à la ligne.

2 lignes horizontales divisées

Ceci est le site officiel d'une université. Regardez la ligne horizontale au milieu. Elle peut être appelée une ligne horizontale ou une ligne horizontale de séparation. Il peut utiliser de nombreuses façons pour y parvenir, l’une d’elles est donc celle mentionnée dans cette section. Le nom de la balise est hr. Jetons un coup d'œil à l'effet du code :


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <p>这是第一段内容</p>
        <hr/>
        <p>这是第二段内容</p>
    </body>
</html>

Cela crée une division de ligne horizontale. Bien sûr, si vous souhaitez obtenir l'effet de l'exemple d'image, vous devez ajouter un contrôle de style ou utiliser d'autres solutions pour y parvenir.

3 commentaires html

En tant que développeur, rédiger des commentaires est très critique. Si votre code ne contient pas de commentaires, il sera facile pour les autres de ne pas le comprendre lorsque vous y reviendrez après un certain temps. Ou si vous n'écrivez pas de commentaires, il sera facile pour les autres de ne pas comprendre votre code lorsqu'il le sera. remis à d’autres, ou c’est très difficile à regarder.

De plus, les commentaires sont une sorte de contenu que les développeurs utilisent pour lire eux-mêmes, et non pour que les machines les lisent, ni pour les afficher dans les navigateurs, de sorte que les commentaires ne seront pas affichés sur la page Web.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <!-- 这是第一行代码的注释内容 -->
        <p>这是第一段内容</p>
        <hr/>
        <!-- 这里是第二行哦 -->
        <p>这是第二段内容</p>
    </body>
</html>

Comme dans le code ci-dessus, nous avons ajouté des commentaires à deux lignes de code respectivement pour dire aux développeurs quelque chose sur eux-mêmes. Mais il ne sera pas affiché sur le navigateur.

Partage de technologie

[Introduction au HTML] Leçon 4 - Sauts de ligne, lignes de séparation et commentaires HTML

1 nouvelle ligne

2 lignes horizontales divisées

3 commentaires html

Profil personnel

mes coordonnées