Understand the difference between BR and P tags through examples

Understand the difference between BR and P tags through examples
<br />Use of line break tag<br>The line break tag<br> is a tag without an end. As long as the <br> tag is used anywhere in the HTML file, when the file is displayed in the browser, the text after that position will be displayed on the next line. The <br> tag is the line break tag!
Please note! In a normal text file, just pressing the Enter key on the keyboard will create a line break. However, pressing the Enter key is useless in HTML files. We must use a specific tag <br> to make them create line breaks! example:
The following is the quoted content:
<html>
<head>
<title>Use of br tag</title>
</head>
<body>
Qingping Diao<br>
The clouds are like clothes, the flowers are like faces,
The spring breeze blows through the threshold, and the flowers are in full bloom.
If we had not seen each other on the top of the Jade Mountain,
We will meet under the moon at Yaotai. <br>
</body>
</html>
See what effect will appear~!
Someone may ask how to center the entire poem on the page? If we want to achieve centering, we can use the <p align=center>content</p> we learned before to achieve it!
example:
The following is the quoted content:
<html>
<head>
<title>Use of br tag</title>
</head>
<body>
<p align=center>Qingping Diao<br>
The clouds are like clothes, the flowers are like faces,
The spring breeze blows through the threshold, and the flowers are in full bloom.
If we had not seen each other on the top of the Jade Mountain,
We will meet under the moon at Yaotai. <br>
</p>
</body>
</html>
================================================
Use of paragraph tag <p> The text identified by the <p> tag represents the text of the same paragraph. In browsers, in addition to line breaks, different paragraphs of text are sometimes separated by a blank line to distinguish different paragraphs of text. The syntax is as follows:
<p>Text</p>
But in general applications, a <p> tag is often added only after the text to be divided into paragraphs. For example:
The following is the quoted content:
<html>
<head>
</head>
<title><p>Use of tags</title>
</head>
<body>
Qingping Diao
The clouds resemble clothes, the flowers resemble faces,
The spring breeze blows through the threshold, and the dew is thick.
If we had not seen it on the top of the Jade Mountain,
We will meet under the moon on Yaotai,
</body>
</html>
So what is the difference between <br> and <p>? In layman's terms, when they branch, they divide into rows
<p>The line spacing is relatively large! We can take a look at:
The following is the quoted content:
<html>
<head>
</head>
<title><p>Use of tags</title>
</head>
<body>
Qingping Diao<br>
The clouds are like clothes, the flowers are like faces,
The spring breeze blows through the threshold, and the dew is thick.
If we had not seen it on the top of the Jade Mountain,
We will meet under the moon on Yaotai,
</body>
</html>
This way you can see the effect, can you see it?

<<:  The front end creates and modifies CAD graphics details through JavaScript

>>:  How to install docker using YUM

Recommend

Practice of dynamically creating dialog according to file name in vue+el-element

Table of contents background accomplish 1. Encaps...

What you need to know about filters in Vue

Table of contents Preface What is a filter How to...

HTML+CSS to achieve drop-down menu

1. Drop-down list example The code is as follows:...

CSS3 animation – steps function explained

When I was looking at some CSS3 animation source ...

Analysis of the advantages of path.join() in Node.js

You might be wondering why you should use the pat...

Summary of Linux nc command

NC's full name is Netcat (Network Knife), and...

WeChat applet implements waterfall flow paging scrolling loading

This article shares the specific code for WeChat ...

Detailed explanation of Linux tee command usage

The tee command is mainly used to output to stand...

Tudou.com front-end overview

1. Division of labor and process <br />At T...

How to install docker on centos

Here we only introduce the relatively simple inst...

Vue application example code based on axios request encapsulation

Table of contents What is axios? Axios request ty...

Summary of ten principles for optimizing basic statements in MySQL

Preface In the application of database, programme...