[Введение в HTML] Урок 4. Разрывы строк, разделительные линии и комментарии html

[Введение в HTML] Урок 4. Разрывы строк, разделительные линии и комментарии HTML

2024-07-12

В этом разделе мы продолжаем рассказывать о вводных знаниях HTML, включая переносы строк, горизонтальное разделение строк и комментарии (html-комментарии).

Оглавление

1 новая строка

2 разделенные горизонтальные линии

3 HTML-комментария

1 новая строка

HTML разделен наблочный элемент и встроенные элементы. В этом разделе давайте не будем сначала говорить об этих элементах, а сначала поговорим о разрывах строк. Почему мы говорим о блочных элементах? Возможно, вы поймете это позже.

Разрыв строки — это тег br, который означает, что две части контента могут быть разделены, и в середине создается эффект разрыва строки.


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

Давайте посмотрим на эффект выше, потому что тег p сам по себе является блочным элементом, а быстрый элемент означает, что если вы напишете два элемента p, они будут перенесены. Однако после переноса элемента p высота, сгенерированная в середине, определена и будет контролироваться некоторыми настройками по умолчанию.

А что, если вы хотите, чтобы пространство разрыва строки между двумя блочными элементами было больше? Или мне нужен эффект разрыва строки в середине текста? Вы можете сделать это:


<!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>

Как показано на рисунке выше, два тега p имеют большой эффект пробела посередине. Более того, текст в первом теге p также имеет эффект переноса строк.

2 разделенные горизонтальные линии

Это официальный сайт университета. Посмотрите на горизонтальную линию посередине. Ее можно назвать горизонтальной линией или разделительной горизонтальной линией. Его можно реализовать разными способами, и один из них упомянут в этом разделе. Имя тега — hr. Давайте посмотрим на эффект кода:


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

Это создает горизонтальное разделение линий. Конечно, если вы хотите добиться эффекта, как в примере с изображением, вам нужно добавить некоторый элемент управления стилем или использовать другие решения для его достижения.

3 HTML-комментарии

Для разработчика написание комментариев очень важно. Если в вашем коде нет комментариев, другие могут легко не понять его, когда вы вернетесь к нему через некоторое время. Или, если вы не пишете комментарии, другие могут легко не понять ваш код, когда он есть. передали другим, или это очень тяжело смотреть.

Более того, комментарии — это своего рода контент, который разработчики используют для чтения сами, а не для чтения машинами или для отображения в браузерах, поэтому комментарии не будут отображаться на веб-странице.


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

Как и в приведенном выше коде, мы добавили комментарии к двум строкам кода соответственно, чтобы рассказать разработчикам что-то о себе. Но оно не будет отображаться в браузере.

Обмен технологиями