HTML is actually the application of learning several important tags

After the article "This Will Be a Revolution" came out. It has been recognized by everyone in the industry, and of course it has also received some challenges from both inside and outside, but what is more exciting is that more people are asking about the details of every point. I went home and went to bed early tonight. I woke up in the middle of the night from a dream. In the dream, I was playing a game called "The Next" with my elementary school classmates. After waking up, I felt that I needed to do something, so I finally modified TMENU (it had been delayed for a long time); then I felt that I needed to write some real cases in detail for the five points mentioned earlier, so I started writing this article.
It makes sense to go back to elementary school in a dream. One is that the game "The Next" reminded me, and the other is what Piaopiao and I often tell others: if you want to learn HTML well, go back and read your elementary school Chinese textbook first. The reason for going back to elementary school is that the books there are not interfered with too much exam-oriented education, and the "essence" in them is authentic, and the Chinese textbooks mean the essence of HTML: titles, paragraphs, lists, and bibliographies. The essence of HTML learning is to use what is needed - Ghost. Of course, this sentence needs an explanation, and the reference example is your elementary school Chinese textbook.
Let’s first take a look at the process of how we created the website. As far as I can remember, my first website was created in 1998. At that time, most of the people used tables to create web pages. What do we think is the most difficult question in the era of tables?
A peculiar three-row and indefinite-column layout:
The essence of HTML learning

Weird one-pixel borders:
The essence of HTML learning

After the table era (around 2001 as far as I can remember), the first people to use <div> appeared. As a result, a CSS trend started in China. The usage is to wrap it with several tables and then use CSS absolute positioning, and also add some JS to make it float around. Later, some people started to study CSS. I remember that in the early days of Fengren Design, several people who came to discuss cooperation with me held a CSS book and talked to me about this and that (of course, these people eventually changed their careers). At that time, we felt that the most difficult task was to make a dongdong that was then called a "Java special effect". At this time, I was attracted by XML proposed by someone, but I only regarded it as a kind of data storage (in fact, this also laid the foundation for the prototype of Qzone implementation).
Time flies. On May 1, 2004, International Labor Day, the Publishing House of Electronics Industry published a book titled "Website Reconstruction - Applying Web Standards for Design". As a result, the belief in "DIV CSS" spread throughout the country, which truly meant that the epoch-making start of China's website reconstruction had begun; but from another perspective, this book pulled China's WebReBuilder out of one fire pit and threw it into another. I think we can only look at this book from the perspective of the prosperous Sui and Tang dynasties. Because it only means the birth of a new emperor and a new dynasty, and does not fundamentally promote social change and evolution. This book changes table nesting into div nesting. The most popular saying at that time (until now) was "My website is made with 'DIV CSS'." I didn't join this group at this time, and I was waiting; because I had a very critical question that was not solved: "Why use 'DIV CSS' instead of 'TABLE CSS'":
Quoting from This Will Be a Revolution:
Let's look at two examples. What table does and what div does are superficially the same, but once the product manager proposes a change, the performance needs to change. It would be easy to change the div to this example. The example shows that without modifying the HTML, the table cannot be changed at all. The advantage of "DIV CSS" over "TABLE CSS" is the freedom of typesetting. Taking the above example as an example, table will never be able to achieve this in your lifetime.
It was not until around Qzone 3.0 that I began to figure out the answer to the above question, which took almost a year. Then in Qzone4.0, three tags "dl, dt, dd" were used and TMENU was born. What I regret very much now is that I have also brought everyone into another epoch-making beginning - "XHTML CSS", and at the same time, I have also brought everyone into a new hotbed. It is easy to get into the kang but difficult to get out. I began to understand why two reconstruction celebrities - Ajie and Lao Gan - gradually disappeared from the Internet. I began to stop blaming them for what they had done before and became more considerate of them, and I made a secret decision in my heart. Then began to lay the groundwork for the "SB" concept of "healthy competition".
The historical journey is as above. Returning to the essence of HTML learning is to use what is necessary; this means that tags should not be abused, and only tags that restore the essence of the content are qualified tags. Take TMENU as an example.
The previous HTML code is:
<ul class="menu">
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#" class="now"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
</ul>
The HTML code is now:
<map id="directmenu" class="menu">
<div><a href="#"><span><span>123123</span></span></a>
<a href="#"><span><span>123123</span></span></a>
<a href="#"><span><span>123123</span></span></a>
<a href="#" class="now"><span><span>123123</span></span></a>
<a href="#"><span><span>123123</span></span></a></div></map>
<h2>The following is a menu list</h2>
<ul class="menu"><li>
<a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#" class="now"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
</ul>
Everyone has seen the difference between the two. There is an additional map label and an hn label. Why is this so? Let's look at another example: there are 100 cars of different brands, shapes and colors on the playground; now you are asked to divide these cars into several groups and return a list for selection. Of course, using a list is something that comes to mind. But have you ever thought about what this list can represent?
Citation Example
<ul>
<li>XXX brand XXX model</li>
<li>XXX brand XXX model</li>
</ul>
Or
Citation Example
<ol>
<li>XXX brand XXX model</li>
<li>XXX brand XXX model</li>
</ol>
Looking at the list above, I can’t see clearly how the classification of this list is formed, and why one is ordered and the other is unordered. How did they come to be arranged like this and why are they put together? Lots and lots of questions. Let’s look at the following example
Citation Example
<h3>Yellow Series Car</h3>
<ul>
<li>XXX brand XXX model</li>
<li>XXX brand XXX model</li>
</ul>
Or
Citation Example
<h3>Year of manufacture</h3>
<ol>
<li>XXX brand XXX model</li>
<li>XXX brand XXX model</li>
</ol>
The above examples are clear to everyone at a glance. All the ins and outs became clear. But why is there a map tag in the TMENU code? Let’s look at an example

The above example is certainly correct. However, such a structure will make people feel that users are extremely incompetent. Isn’t there a site map navigation menu after the site name and subtitle? ( Specifically refers to sites with menu at the top ) At the same time, HTML itself provides a tag specifically for site map navigation - <map>. Since there is a label that has such meaning in itself, why do you need to use words to explain it? You wouldn't use something as stupid as <h3>This is an unordered list</h3><ul>. Everyone knows that grandma is a woman. Let’s look at the following example:

Isn’t it true that the code is simpler and clearer?

In fact, it is not difficult to take the first step of WebReBuild HTML. Go back and look at the Chinese textbook you learned in elementary school, think about the most essential things, and ask yourself more often "why?" Just like being a person, you should do what you should do and should not be disturbed by the complex society and tedious interpersonal relationships. Stick to the principle of being down-to-earth, work and be a person conscientiously, and gold will always shine.
Citations
I have a quirk. I like that I always test the interviewer's XHTML first during the interview. Just like when masters recruited apprentices in the past, ability and intelligence were secondary, and character was the most important.
I think that XHTML is like a person's nature, CSS is like a person's way of doing things and attitude, and JS is like a person's behavior and style of doing things. The separation of the three plus some surrounding SEO and human-computer interaction is what we call website reconstruction, which means a very good person. In the past, there were always some people who believed that CSS was the most important element of a website, which naturally represents a kind of outlook on life. Indeed, it is difficult for a person to survive well in today's society without a good way and attitude of doing things; but if this way and attitude are too extreme, he will become a person who is good at deceiving and doing things unscrupulously.
Citation Example
<h1>Site Name</h1>*
<h2>Site subtitle</h2>*
<map><div><a href="#">Connection 1</a> <a href="#">Connection 2</a></div></map>
Note: The * is used to emphasize that the site is the primary one for promotion.
Citation Example
<h1>Site Name</h1>*
<h2>Site subtitle</h2>*
<h3>Sitemap Navigation Menu</h3>
<ul>
<li>Connect 1</li>
<li>Connect 2</li>
</ul>
Note: The * is used to emphasize that the site is the primary one for promotion.

<<: Solution to the problem that docker CMD/ENTRYPOINT executes the sh script: not found/run.sh:

>>: MySQL trigger usage scenarios and method examples