[Einführung in HTML] Lektion 4 – Zeilenumbrüche, Trennlinien und HTML-Kommentare

2024-07-12

In diesem Abschnitt sprechen wir weiterhin über die Einführungskenntnisse in HTML, einschließlich Zeilenumbrüchen, horizontaler Zeilentrennung und Kommentaren (HTML-Kommentare).

Inhaltsverzeichnis

1 Zeilenumbruch

2 geteilte horizontale Linien

3 HTML-Kommentare

1 Zeilenumbruch

HTML ist unterteilt inBlockelement und Inline-Elemente. Lassen Sie uns in diesem Abschnitt nicht zuerst über diese Elemente sprechen, sondern zuerst über Zeilenumbrüche. Warum sprechen wir über Blockelemente? Vielleicht verstehen Sie es später.

Zeilenumbruch ist das br-Tag, was bedeutet, dass die beiden Teile des Inhalts getrennt werden können und in der Mitte ein Zeilenumbrucheffekt erzeugt wird.


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

Schauen wir uns den obigen Effekt an, da das p-Tag selbst ein Blockelement ist und das schnelle Element bedeutet, dass zwei p-Elemente umbrochen werden, wenn Sie sie schreiben. Nachdem das p-Element jedoch umschlossen ist, ist die in der Mitte erzeugte Höhe sicher und wird durch einige Standardeinstellungen gesteuert.

Was also, wenn der Zeilenumbruchabstand zwischen den beiden Blockelementen größer sein soll? Oder möchte ich einen Zeilenumbrucheffekt in der Mitte des Textes? Du kannst das:


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

Wie im Bild oben gezeigt, haben die beiden p-Tags einen großen Abstandseffekt in der Mitte. Darüber hinaus hat der Text im ersten p-Tag auch den Effekt eines Zeilenumbruchs.

2 geteilte horizontale Linien

Dies ist die offizielle Website einer Universität. Schauen Sie sich die horizontale Linie in der Mitte an. Sie kann als horizontale Linie oder als horizontale Trennlinie bezeichnet werden. Es kann auf viele Arten implementiert werden, und eine davon ist die in diesem Abschnitt erwähnte. Der Tag-Name ist hr. Schauen wir uns den Codeeffekt an:


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

Dadurch entsteht eine horizontale Linienteilung. Wenn Sie den Effekt im Bildbeispiel erzielen möchten, müssen Sie natürlich eine gewisse Stilkontrolle hinzufügen oder andere Lösungen verwenden, um dies zu erreichen.

3 HTML-Kommentare

Als Entwickler ist das Schreiben von Kommentaren sehr wichtig. Wenn Ihr Code keine Kommentare enthält, ist es für andere leicht, ihn nicht zu verstehen, wenn Sie nach einer Weile darauf zurückblicken. Wenn Sie keine Kommentare schreiben, ist es für andere leicht, Ihren Code nicht zu verstehen, wenn er vorhanden ist an andere übergeben, oder es ist sehr schwer zu beobachten.

Darüber hinaus handelt es sich bei Kommentaren um eine Art von Inhalten, die Entwickler zum Lesen selbst verwenden und nicht zum Lesen durch Maschinen oder zur Anzeige in Browsern, sodass Kommentare nicht auf der Webseite angezeigt werden.


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

Wie im obigen Code haben wir jeweils zwei Codezeilen mit Kommentaren versehen, um den Entwicklern etwas über sich selbst zu sagen. Es wird jedoch nicht im Browser angezeigt.

Technologieaustausch