Hello everyone, I am your little horse brother, update an article every day, persistence is victory, I hope you also make persistent efforts. Move your little hands, welcome your attention and likes.

This section focuses on

  • Related tags in the body
After learning this chapter, you will have a preliminary understanding of the use of tags. You can use tags to make a simple article web page.

The related tags in the body are mainly displayed in the content area of the page.

Study 1.<hx>Tag to add a title to your web page

For example, open a Baidu news website, baijiahao.baidu.com/s?id=162521…

As shown in the figure below

Describe the information of the article. The name of the article is bold and black to highlight the central content. So h1 defines the largest heading and H6 defines the smallest heading.

Study 2.<p>Tag to add paragraphs to your post

P tag

If you want to display an article on a web page, leaving a certain amount of space between paragraphs of the article will make the user experience better, then you need the P tag.

For example, if I give you a paragraph of text and ask you to display the content of the corresponding paragraph on the web page, open sublime, copy the code to write, and find that the content of the article is messy and has no hierarchy.

Many couples struggle to make it to the end because they don't know how to talk well. In other words, for a relationship to last, both parties need to communicate with each other. Especially when you live under the same roof and see each other. Don't underestimate the power of words and the power of speech. Sometimes, you may just say it casually, but the speaker does not mean it, the listener intends it, and your partner may have all kinds of associations after listening to it.Copy the code

Modify code:

<body>
    <p>Many couples struggle to make it to the end because they don't know how to talk well. In other words, for a relationship to last, both parties need to communicate with each other.</p>
    <p>Especially when you live under the same roof and see each other. Don't underestimate the power of words and the power of speech.</p>
    <p>Sometimes, you may just say it casually, but the speaker does not mean it, the listener intends it, and your partner may have all kinds of associations after listening to it.</p>
</body>
Copy the code

Effect display:

Note: The default style of the

tag, as you can see in the figure above, has white space before and after each paragraph.

3. Add emphasis and use<strong>and<em>The label

In the above article, we already have a title and a paragraph, but now we can use or tags to emphasize certain words before a paragraph

But there are differences in the tone of emphasis : for emphasis, for stronger emphasis. By default, is in italics and is in bold. Compared with the two tags, domestic front-end programmers prefer to use for emphasis.

For example, in an online shopping mall, the price of a product is emphasized. The diagram below.

For example, we need to modify the above code to modify the webpage we made. If we classify the content of exposition, we need to emphasize 01 and 02, and we need to modify the information of additional points, and we like to present the style of italics for the title.

<h2>The more a woman talks to a man like that, the more he will<em>Like you</em></h2>
<strong>01</strong>
<p>Many couples struggle to make it to the end because they don't know how to talk well. In other words, for a relationship to last, both parties need to communicate with each other.</p>
<p>Especially when you live under the same roof and see each other. Don't underestimate the power of words and the power of speech.</p>
<p>Sometimes, you may just say it casually, but the speaker does not mean it, the listener intends it, and your partner may have all kinds of associations after listening to it.</p>
<strong>02</strong>
Copy the code

Effect:

Use 4.<br>Label lines display text

If we want to display a poem by Bai Juyi on a web page, we want to display this in order to make it beautiful

How do you get a line at the end of every poem? Then we can add a

tag to each line of poetry. The BR tag acts like the enter key in Word documents

The code is as follows:

<h2>The Singer of a Pipa Player</h2>
<p>A streak of sun spread over the water,<br>Half river rustling and half river red.<br>Poor third night of September,<br>Dew like a pearl moon like a bow.<br>
</p>
Copy the code

A

tag is an empty tag. A tag without HTML content is an empty tag. Empty tags only need a start tag, such as

,

, .

At this point, do you have any questions? Just like in Word or Notepad, just type enter before you want to fold a line. After trying it out, sorry, carriage returns and Spaces are ignored in HTML, and you can type in more carriage returns and Spaces and it won’t show up.

Conclusion: blank folding phenomenon

​

5. Add some space to your page

In the example in the previous section, we showed that entering carriage returns and Spaces in HTML code do not work and are folded into a single space, which is called “whitespace folding”. So if we have to type space in the page, we have to say  

Example: We made bai Juyi’s poems have Spaces before and after their names

The following code

<h2>"&nbsp;pipa&nbsp;"</h2>
<p>A streak of sun spread over the water,<br>Half river rustling and half river red.<br>Poor third night of September,<br>Dew like a pearl moon like a bow.<br>
</p>
Copy the code

The effect is as follows:

6. Know<hr>Label, add a horizontal line

In the presentation of information, it is sometimes necessary to add a line for segmentation to make the text look more tidy. As shown in the figure below

The following code

<p>Train speeding through the dark night in the village, moonlight, always too easy to miss lonely, too easy to let a person feel lonely.</p>
<hr>

<p>Every dandelion blown by the wind, are full of a pair of eyes affectionate farewell and a vision of reluctant to part. That day, I took the luggage, with a back blessing and melancholy, waved goodbye to this land. I don't know when I'll be back.</p>
<hr>

Copy the code

Note:

  1. The

    tag, like the

    tag, is an empty tag, so there is only a start tag and no end tag.

  2. The default style of the

    tag in the browser is thick and gray, which some people may think is not beautiful. It doesn’t matter, these external styles can be changed after we learn CSS style sheets.