[HTML Introduction] Lesson 4 - Line breaks, dividing lines and HTML comments

2024-07-12

In this section, we will continue to talk about the basic knowledge of HTML, including line breaks, horizontal line divisions and comments (html comments).

Table of contents

1 Line break

2 dividing lines

3 HTML comments

1 Line break

HTML is divided intoBlock ElementsAnd inline elements. In this section, let's not talk about these elements first, let's talk about line breaks first. Why do we talk about block elements? Maybe you will understand it later.

Line break is the br tag, which means that it can separate the two parts of content and create a line break effect in the middle.


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

Let's look at the effect above. Because the p tag itself is a block element, the meaning of a fast element is that when you write two p elements, they will wrap. But after the p element wraps, the height generated in the middle is fixed and will be controlled by some default settings.

What if I want the line break spacing between these two block elements to be larger? Or what if I want a line break effect in the middle of the text? You can do this:


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

As shown in the above figure, there is a large spacing effect between the two p tags, and the text in the first p tag also has a line break effect.

2 dividing lines

This is the official website of a university. You can see the horizontal line in the middle. It can be called a horizontal line or a dividing line. It can be implemented in many ways. One of them is the one mentioned in this section. The label name is hr. Let's take a look at the code effect:


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

This creates a horizontal line dividing the page. Of course, if you want to achieve the effect shown in the example picture, you need to add some style controls or use other solutions to achieve it.

3 HTML Comments

As a developer, writing comments is very important. If your code is not commented, it will be difficult to understand it when you look back at it after a while. If you do not write comments, when you hand your code to others, they will also find it difficult to understand or have difficulty reading it.

Moreover, comments are a kind of content that developers use for themselves to read. They are not meant to be read by machines or displayed to browsers, so comments will not be displayed on the web page.


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

As shown in the code above, we have added comments to the two lines of code to tell the developer something, but they will not be displayed on the browser.

Technology Sharing