HTMLは実際にはいくつかの重要なタグを学ぶアプリケーションです

「これは革命になるだろう」という記事が出たあと。業界の皆様に認知され、もちろん内外からの評価もいただいておりますが、さらに嬉しいのは、あらゆる点について詳細を尋ねてくださる方が増えていることです。今夜は家に帰って早めに寝ました。夜中に夢を見て目が覚めました。夢の中で、私は小学校の同級生と「The Next」というゲームをしていました。目が覚めてから、何かしなくてはいけないと感じ、ついに TMENU を修正しました（長らく延期されていました）。そして、前述の 5 つのポイントについて、実際のケースを詳しく書く必要があると感じ、この記事を書き始めました。
夢の中で小学校に戻るのは意味があります。 1 つは、「The Next」というゲームが私に思い出させたこと、もう 1 つは、Piaopiao と私がよく他の人に言っていることです。HTML をしっかり学びたいなら、まず小学校の中国語の教科書を読み返してください。小学校に戻る理由は、そこにある本があまり試験重視の教育に干渉されておらず、その中の「本質」が本物であり、中国の教科書はタイトル、段落、リスト、参考文献など HTML の本質を意味しているからです。 HTML 学習の本質は、必要なもの、つまり Ghost を使用することです。もちろん、この文には説明が必要ですが、参考例としては小学校の中国語の教科書があります。
まずは、ウェブサイトを作成したプロセスを見てみましょう。私の記憶が確かなら、最初の Web サイトは 1998 年に作成されました。当時、ほとんどの人は Web ページを作成するためにテーブルを使用していました。テーブルの時代において最も難しい質問は何だと思いますか?
独特な 3 行、不定列のレイアウト:
HTML学習の真髄

奇妙な1ピクセルの境界線:
HTML学習の真髄

テーブルの時代（私が覚えている限りでは 2001 年頃）の後、<div> を使用する最初の人々が現れました。その結果、中国で CSS のトレンドが始まりました。使用方法は、複数のテーブルでラップしてから CSS 絶対配置を使用し、さらに JS を追加して浮動させるというものです。その後、CSS を勉強し始めた人もいました。Fengren Design の初期の頃、私と協力の話し合いに来た何人かの人が CSS の本を持って、あれこれと話をしてくれたのを覚えています (もちろん、これらの人々は最終的にキャリアを変えました)。当時、最も困難だと感じたのは、当時「ジャワ特撮」と呼ばれていたドンドンを作ることでした。当時、私は誰かが提案した XML に惹かれていましたが、それを一種のデータストレージとしてしか考えていなかったのです (実際、これが Qzone 実装のプロトタイプの基礎にもなりました)。
時は経つのが早い。2004 年 5 月 1 日の国際労働者の日、電子産業出版局は「Web サイトの再構築 - デザインへの Web 標準の適用」というタイトルの本を出版しました。その結果、「DIV CSS」への信仰が全国に広まり、まさに中国のウェブサイト再構築の画期的な始まりを意味したが、別の観点から見ると、この本は中国のWebReBuilderを一つの火の穴から引きずり出し、別の火の穴に投げ込んだとも言える。この本は、繁栄した隋唐の時代の観点からしか見ることができないと思います。それは単に新しい皇帝と新しい王朝の誕生を意味するだけであり、社会の変化と進化を根本的に促進するものではないからです。この本はテーブルのネストを div のネストに変更します。当時 (現在まで) 最もよく言われていたのは、「私の Web サイトは 'DIV CSS' で作成されています」というものでした。私は当時このグループに参加せず、待っていました。解決されていない非常に重要な疑問があったからです。「なぜ 'TABLE CSS' ではなく 'DIV CSS' を使用するのか」:
『これは革命になる』より引用:
2つの例を見てみましょう。 table の機能と div の機能は同じですが、プロダクトマネージャーが変更を提案すると、パフォーマンスを変更する必要があります。 div をこの例に変更するのは簡単です。この例では、HTML を変更しないとテーブルをまったく変更できないことがわかります。「DIV CSS」が「TABLE CSS」よりも優れている点は、タイプセットの自由度です。上記の例を例にとると、table ではこれを一生実現することは決してできません。
上記の質問に対する答えがわかり始めたのは Qzone 3.0 の頃で、それにはほぼ 1 年かかりました。そしてQzone4.0では「dl、dt、dd」という3つのタグが使用され、TMENUが誕生しました。私が今とても後悔しているのは、私が皆さんをもう一つの画期的な始まりである「XHTML CSS」にも導いてしまったこと、そして同時に、皆さんを新たな温床にも導いてしまったことです。カンに入るのは簡単だが、抜け出すのは難しい。アジエとラオ・ガンという2人の復興有名人がインターネットから徐々に姿を消した理由が分かり始めた。私は彼らが以前にしたことを責めるのをやめ、彼らに対してもっと思いやりを持つようになり、心の中で密かに決意しました。そして、「健全な競争」という「SB」のコンセプトの土台を築き始めました。
歴史的な経緯は上記の通りです。HTML学習の本質に立ち返ることは、必要なものを使うことです。つまり、タグを乱用すべきではなく、コンテンツの本質を復元するタグだけが適格なタグであるということです。 TMENU を例に挙げます。
以前の HTML コードは次のとおりです。
<ul class="メニュー">
<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>
HTML コードは次のようになります。
<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>以下はメニューリストです</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>
誰もがこの2つの違いに気づいたでしょう。追加のマップラベルとhnラベルがあります。なぜそうなるのでしょうか?別の例を見てみましょう。遊び場にはさまざまなブランド、形、色の車が 100 台あります。これらの車をいくつかのグループに分け、選択用のリストを返すように求められます。もちろん、リストを使用することが思い浮かびます。しかし、このリストが何を表しているのか考えたことがありますか?
引用例
<ul>
<li>XXX ブランド XXX モデル</li>
<li>XXX ブランド XXX モデル</li>
</ul>
または
引用例
<オル>
<li>XXX ブランド XXX モデル</li>
<li>XXX ブランド XXX モデル</li>
</ol>
上記のリストを見ると、このリストの分類がどのように形成されているのか、また、なぜ一方が順序付けられていて、もう一方が順序付けられていないのかがはっきりとわかりません。これらはどのようにしてこのように配置されるようになったのでしょうか、またなぜ一緒に組み立てられているのでしょうか?たくさんの質問があります。次の例を見てみましょう
引用例
<h3>イエローシリーズカー</h3>
<ul>
<li>XXX ブランド XXX モデル</li>
<li>XXX ブランド XXX モデル</li>
</ul>
または
引用例
<h3>製造年</h3>
<オル>
<li>XXX ブランド XXX モデル</li>
<li>XXX ブランド XXX モデル</li>
</ol>
上記の例は誰にとっても一目で明らかです。すべての詳細が明らかになった。しかし、なぜ TMENU コードにマップタグがあるのでしょうか?例を見てみましょう

上記の例は確かに正しいです。しかし、このような構造だと、ユーザーが非常に無能だと感じてしまいます。サイト名とサブタイトルの後にサイトマップのナビゲーションメニューはありませんか？ (特に上部にメニューがあるサイトを指します) 同時に、HTML 自体には、サイトマップナビゲーション専用のタグ <map> が用意されています。それ自体に意味があるラベルがあるのに、なぜ言葉で説明する必要があるのでしょうか? <h3>これは順序なしリストです</h3><ul> のような愚かなものは使用しないでしょう。おばあちゃんが女性だということは誰もが知っています。次の例を見てみましょう。

コードがよりシンプルで明確になったというのは本当でしょうか?

実は、WebReBuild HTML の第一歩を踏み出すのは難しくありません。小学校で習った中国語の教科書をもう一度読み返して、最も本質的なことを考え、「なぜ？」と自問自答してみてください。人と同じように、やるべきことをやるべきであり、複雑な社会や面倒な人間関係に惑わされるべきではありません。地に足の着いた原則を守り、誠実に働き、人として生きれば、金は必ず輝きます。
引用
私には癖がある。面接中は常に最初に面接官の XHTML をテストするのが気に入っています。昔、師匠が弟子を募集したときと同じように、能力や知性は二の次で、性格が最も重要でした。
XHTML は人の性質、CSS は人のやり方や態度、JS は人の行動やスタイルのようなものだと思っています。これら 3 つを分離し、SEO と人間とコンピューターの相互作用を取り巻くものを、私たちはウェブサイトの再構築と呼んでいます。これは非常に優れた人材を意味します。過去には、CSS がウェブサイトの最も重要な要素であり、それが当然ある種の人生観を表すものだと信じている人が常にいました。確かに、物事のやり方や態度が良ければ、現代社会でうまく生き残ることは難しいですが、そのやり方や態度が極端すぎると、人を騙したり、悪事を働いたりするのが得意な人になってしまうでしょう。
引用例
<h1>サイト名</h1>*
<h2>サイトのサブタイトル</h2>*
<map><div><a href="#">接続 1</a> <a href="#">接続 2</a></div></map>
注: * は、このサイトがプロモーションの主なサイトであることを強調するために使用されます。
引用例
<h1>サイト名</h1>*
<h2>サイトのサブタイトル</h2>*
<h3>サイトマップナビゲーションメニュー</h3>
<ul>
<li>コネクト 1</li>
<li>コネクト 2</li>
</ul>
注: * は、このサイトがプロモーションの主なサイトであることを強調するために使用されます。

<<: レスポンシブ原則のソースコード分析のVue解釈

>>: MySQL トリガーの使用シナリオとメソッドの例