Detailed introduction to the basic structure and tags of HTML

HTML basic composition structure and tags

In fact, the composition structure can be briefly understood with a picture as follows

The current structure of the general website is not very clear and simple

Let’s talk about the header first

Is this clearer?The navigation bar is a quick entry to guide users to view the content of the website. For example, if you go to the supermarket to buy soy sauce, there will be a hanging hanging above the supermarket's head. Classification area, for example, daily necessities, clothing, kitchenware, etc.

Then you will find where the items you want to buy are classified through the classification. Then you only have to find what you want to buy. of soy sauce will do. Is this easier to understand?

Then let’s continue to look at the content part. As the name suggests, it is a manifestation of the author or poster showing text combined with pictures and other content. The details are as follows:

This is how the content is displayed. If you want to make an analogy: everyone knows that Starbucks is a place to drink coffee. This is its hearer. But the specific coffee you drink depends on the content. Your choice Go to the front desk to see the types and prices of coffee

My personal understanding of the difference between hearer and content is that header is an overview directory. Although content can also be implemented, more content is positioned to a specific attributeAnd address

Finally, let’s talk about footer, also called footer

This is the contact information and supervision of the websites listed above, etc. , for example, it is the same as a car license, that is, it needs the supervision of the vehicle management office and your contact information.

Having introduced this, do you have a general impression of the structure of the web page?

Next let’s talk about the tags of the html web page

A very simple way to view the web page tags is to right-click the mouse. Click on a blank space on the web page to view the source code

## Can you see a lot of code composed of angle brackets? This is the tag > When there is a slash, it is called the closing of the label. It can also be understood as

Let’s take a look at the corresponding relationship. The general situation of title is like this The correspondence is as follows: Of course, there are other ways to write title. This is not considered for the time being.

Let’s take a look at the content Some of the relationships correspond to the following:

Of course, only a brief introduction will be given here, and the details will be understood later

We are looking at the tagThe internal and external relationship is the so-called nesting

##

　

　

　　

• 　　

  p>

  　

　

##

## Tags are layered one after another It is the nesting of tags, so the outermost p is the chairman, h2 is the general manager and the one at the same level as him, ul is also the general manager, li and p are the department heads, such a hierarchical relationship

For example, you are the chairman of company A and the chairman of company B knows each other. At this time, the copy you want requires someone from one of his departments to submit it to you to see about cooperation. , then B will have to

when he returns to the company and notify the matter like this p>h2>ul>li or p Then the employees will know that the boss wants copywriting Just send the copy directly. Our crawler BeautifulSoup also follows this logic to grab the desired content

## , which is to find the content through the tag level.

#This time I will briefly introduce it and will continue to update it in the future.​

The above is the detailed content of Detailed introduction to the basic structure and tags of HTML. For more information, please follow other related articles on the PHP Chinese website!