In the previous section, we explained the default code for initialization. After these codes are configured, we can perform our new operations
Display our content in the view area of the web page
Today, let's learn some simple labels
The first label is the paragraph label p label
p tag is very powerful. It can store text and generate paragraph format by default
Of course, our labels should still be placed in the body, in our body, because they are for our users
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p align="center">
In the previous section, we explained the default code for initialization. After these codes are configured, we can perform our new operations
Display our content in the view area of the web page
Today, let's learn some simple labels
The first label is the paragraph label p label
p Tags are powerful for storing text and generating paragraph formats by default
</p>
</body>
</html>You can also add the attribute name above. The attribute name we add here is align, which means that there are three alignment methods: left right center, which means that the text inside is aligned left, aligned right and displayed in the center by default
Here we use the center attribute align="center" the attribute name is align The attribute value is center
However, there are few attribute values directly added to the tag. We will use css settings later
Let's take a look at the title tag
There are 6 levels of Title labels here
h1-h6 respectively
Indicates the degree of emphasis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is the first level title</h1>
<h2>This is the secondary title</h2>
<h3>This is a three-level title</h3>
<h4>This is a four level title</h4>
<h5>This is a five level title</h5>
<h6>This is a six level title</h6>
<p>
This is the paragraph label
</p>
</body>
</html>Now that we know the title paragraph, let's learn about the hypertext link tag a tag
Hypertext link tags are common in web pages and can be used to jump to another web page or to jump to the following paragraph
If you want to jump to a file written locally, you need to write the relative address of our linked file
Examples will be given later
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://baidu.com" target="_ Blank "> jump to Baidu</a>
<a href="https://Baidu.com "target =" _self "> jump to Baidu</a>
</body>
</html>Attribute 1 href represents the url, which is the address of the web page we need to link to
Attribute 2 target indicates how our web page is opened. One is to open it directly in the current web page, and the other is to open it in a new window
Attribute value_ blank means to open a web page in a new window_ self is the default property, which means that it is opened in the current web page
Some people may be curious about learning the a tag. If I click a link in a long document, I will directly jump to the relevant paragraph
Here is our anchor link
What is an anchor link? According to my personal understanding, I put an anchor in this paragraph, a unique name
Then click the link to jump directly to the anchor point
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#DSD "> third paragraph < / a > < br >
<p>Years have seasons, spring, summer, autumn and winter; days have seasons, alternating black and white; life should also have seasons, that is birth, old age, illness and death.</p>
<br><br><br><br><br><br><br><br><br><br>
<p>George and Herbert said: "if a person is not handsome at 20, not strong at 30, not rich at 40 and not wise at 50, he will never think of being handsome, strong, rich and wise in his life." this is the season of life in the eyes of Westerners.</p>
<br><br><br><br><br><br><br><br><br><br>
<p >Mr. Kong said, "I am determined to learn in five out of ten, stand in thirty, know the destiny in fifty, be obedient in sixty, and be obedient in seventy. It is also a limitation on the season of life, but Mr. Kong only has the courage to limit himself and is afraid to make judgments to others.</p>
<br><br><br><br><br><br><br><br><br><br>
<p id="dsd">Anyway, as the old Chinese saying goes, "when you hear the word in the morning, you can die in the evening." it tells people that no matter when you understand the benefits of life, you will begin the spring of life.</p>
</body>
</html>Here I use the < br > tag. Br tags represent line feed tags
When I click on the third paragraph, I will jump to the following paragraph by myself
Finally, let's talk about a label horizontal line label
< HR > label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>First paragraph</p>
<hr>
<p>The second paragraph</p>
<hr color="red" size="5" width="500px">
</body>
</html>
If there is only one hr, the default is a thin line as wide as your window
However, we can use the attribute value to change its length, thickness and color. It seems that there are seven levels of thickness. We can set its thickness in css
px unit is a pixel unit. We need to bring our unit px for most of our length and width