30分でhtmlの本質がわかる

htmlとは何ですか?

HTML の英語の正式名称は Hyper Text Markup Language、つまり Hypertext Markup Language です。HTML は、Web の発明者である Tim Berners-Lee とその同僚の Daniel W. Connolly によって 1990 年に作成されたマークアップ言語です。標準の汎用マークアップ言語 SGML のアプリケーションです。

いわゆるマークアップ言語は、さまざまなタグを使用してテキストの内容を変更する言語です。実際、さまざまなシナリオで非常に一般的なタグについてよく知っておく必要があります。

たとえば、スーパーマーケット、デリエリア、シーフードエリア、スナックエリア、ドリンクエリアなどです。

別の例として、男性は左側に立ち、女性は右側に立っています。

これらはあらゆる種類のラベルですが、それらはすべて目に見えません。

HTML の場合、Web ページ内のテキストのさまざまな配置やレイアウトを支援するさまざまなタグもあります。html言語仕様では、山括弧で囲まれた内容を左山括弧の後に英語で始まる文字列、または標準のhtmlタグを意味するslash/で始まる文字列を続けて使用します。<b>太字</b>、<i>斜体</i> 、 <u>下線</u>など。

CSDN文盲の老 Gu のブログ、https://blog.csdn.net/superwfei

HTMLの原点

HTML は長い間登場していません。http プロトコルが作成された後に作成されました。テキスト送信プロセスをサポートするために、テキスト形式を維持するためのラベル言語セットが作成されました。html の前身は IBM に遡ります。 1960年代に研究され始めたGML（Generalized Markup Language、General Markup Language）タグセット。

http プロトコルが使用され始めたとき、誰かが怠け者でテキスト形式を維持するために GML からサブセットを作成しましたが、なぜ A (リンク) などの古典的なタグには他の表現ではなくデフォルトで下線が付いているのでしょうか。。。。まあ、それはIBMエンジニアのミスだったからです。

GML
IBM は、出版システム内でこの要件を実装するために 1960 年代に GML (Generalized Markup Language) を作成しました。IBM は GML を使用して、書籍、レポート、およびその他の文書を単一タイプのソース文書で管理します。
SGML
SGML (Standard Generalized Markup Language) は、マークアップの焦点は文書構造にあるべきであるという考えから生まれました。SGML には、ジェンコードの考え方が統合されています。SGML は IBM の GML から発展したもので、最初の標準化された情報構造化テクノロジです。SGML は、法的文書のフォーマットと管理を行う IBM の内部手段となりました。SGML はその後、業界全体の幅広いアプリケーションに適合する包括的な情報標準として拡張および修正されました。しかし、SGML が ISO 標準になったのは 1986 年になってからでした。SGML は非常に強力ですが、非常に複雑で、実行するには高価なソフトウェアが大量に必要なため、長い間普及してきませんでした。
HTML
1989 年、欧州素粒子物理学研究所 (CERT) の研究者 Tim Berners-Lee と Anders Berglund は、インターネット上で共有される記事をマークアップするためのマークアップ ベースの言語 HTML を作成しました。HTML は、SGML の簡略化されたアプリケーションとみなすことができます。しかし、HTML タグは大きくなり、厳密さが失われます。

HTML開発

何かの発展には時代の特徴がつきものです。html についても同様です。

Http が最初に登場した初期の頃、HTML でのメディア情報のストリーミングはほとんどサポートされておらず、いくつかの画像を表示するための img タグしかありませんでした。さらに、タイプセット用のタグも増えています。

現時点で最もよく使用されるのは、p 段落タグ、h1 ～ h7 見出しタグ、および table テーブルタグです。もちろん、テキスト形式を維持するための pre タグや、テキスト変更タグのフォントもあります。

ネットワーク速度とコンピューターのパフォーマンスの向上に伴い、html には、人気のある mdi オーディオや wav オーディオなどのコンテンツが徐々に追加されています。

Lao Gu が初めて HTML に触れたのは、すでに 1997 年以降のことでした。彼はコンピュータ トレーニング クラスに参加し、フロント ページと呼ばれるツール、つまり、Web ビジュアライゼーション開発ツールについて友人に説明しました。現時点ではhtml4.0まで発展しており、機能はすでに完璧です。

たとえば、かつてすべてのブラウザを独占していた Flash コンテンツで使用される埋め込みタグです。たとえば、ダイナミック コントロールのオブジェクト タグを参照できます。例えば、動画を再生できるvideoタグなど。

そして、html5 ではあらゆる種類の新しいタグが追加されました。

ラベルの分類

さまざまなタグにおいて、英語で始まり、その後に左前括弧が続くコンテンツはタグ名と呼ばれ、ページ要素とも呼ばれます。各ページ要素は、一定量のページ領域を占有します。

スペース占有率

スペースの占有方法により、インライン要素（inline）とブロックレベル要素（block）に分けられます、はい、今CSSで記述しているものです。

昔はネットワーク速度が非常に遅かったため、CSSを使用していないコンテンツが多く、タグは比較的重要でした。デフォルトのブロックレベルタグである pre、table、p、div を除き、他のタグはすべてインラインタグです。

レイアウト

CSS が導入される前は、HTML で完成できるレイアウトは左、中央、右のみであり、独自の中央ラベルを除き、その他のレイアウト方法はラベルの属性を通じてのみ設定できました。

そうです。タグには属性を含めることができ、レイアウトは通常、center タグを使用して中央に、pre タグを使用してスペースを保持し、属性 align="left/center/right" を使用して設定されます。

CSSの導入後、html4では新しい座標レイアウト(相対座標レイアウトと絶対座標レイアウト)が追加され、css3ではより柔軟なレイアウト(フレックスレイアウト)が導入されました。

文字装飾

CSS が普及する前は、テキスト装飾はほんのわずかしかありませんでした。太字、斜体、取り消し線、下線は独立したタグとみなされていました。また、現在非推奨になっている font という重要なタグもあります。私たちは皆、フォント、色、フォント サイズを設定するためにフォントを使用しますが、今ではスパンやスタイルを使用してフォントを変更することに慣れています。

css導入後は、img画像（ストリーミングメディアタグ）、リンク（ジャンプ）、iframe/framesetフレーム（埋め込みフレーム/構造フレーム）などの一部を除き、上記要素のほとんどを置き換えることが可能です。

なぜ置換可能なのでしょうか? それは、マージン、フォント サイズ、行の高さ、レイアウト方法、占有スペース、など待ってください。

ストリーミングタブ

ネットワークが高速化し、圧縮アルゴリズムがますます成熟している現在、さまざまなストリーミング メディアが多数の Web ページで表示されており、ストリーミング メディア関連のタグのサポートが不可欠です。これらのタグの実装は、ブラウザーが関連するプロトコルとアルゴリズムを呼び出すことに基づいています。

ストリーミング メディア タグの特殊な機能は、関連するプロトコルとアルゴリズムを呼び出すには関連するタグを使用する必要があり、これらのタグは置き換えられないことです。

定義済みのシンボル シンボル

HTMLのタグ部分以外にもあらかじめ定義された記号がいくつかありますが、例えば山括弧は非常に厄介なもので、タグ構文の一部なのですが、ページ上に山括弧を表示したい場合はどうすればよいでしょうか？答えは、あらかじめ定義された記号 (< は左山括弧など) で記述されます。

老古はここに老古に知られているさまざまなシンボルをリストします。

    public enum HtmlSymbols
    {
    
    
        // 由于int为c#保留字，所以∫对应的枚举为INT，该特例需要在使用中处理
        Alpha = 'Α', Beta = 'Β', Gamma = 'Γ', Delta = 'Δ', Epsilon = 'Ε', Zeta = 'Ζ', Eta = 'Η', Theta = 'Θ',
        Iota = 'Ι', Kappa = 'Κ', Lambda = 'Λ', Mu = 'Μ', Nu = 'Ν', Xi = 'Ξ', Omicron = 'Ο', Pi = 'Π', Rho = 'Ρ',
        Sigma = 'Σ', Tau = 'Τ', Upsilon = 'Υ', Phi = 'Φ', Chi = 'Χ', Psi = 'Ψ', Omega = 'Ω',
        alpha = 'α', beta = 'β', gamma = 'γ', delta = 'δ', epsilon = 'ε', zeta = 'ζ', eta = 'η', theta = 'θ',
        iota = 'ι', kappa = 'κ', lambda = 'λ', mu = 'μ', nu = 'ν', xi = 'ξ', omicron = 'ο', pi = 'π', rho = 'ρ',
        sigmaf = 'ς', sigma = 'σ', tau = 'τ', upsilon = 'υ', phi = 'φ', chi = 'χ', psi = 'ψ', omega = 'ω',
        trade = '™', reg = '®', copy = '©', sect = '§', yen = '¥', pound = '£', euro = '€', spades = '♠', clubs = '♣', hearts = '♥', diams = '♦',
        nbsp = ' ', lt = '<', gt = '>', amp = '&', quot = '"', ldquo = '“', rdquo = '”', lsquo = '‘', rsquo = '’', hellip = '…', mdash = '—', middot = '·',
        ordf = 'ª', sup2 = '²', sup3 = '³', frac12 = '½', frac14 = '¼', frac34 = '¾', permil = '‰', bull = '•', prime = '′', Prime = '″', oline = '‾', frasl = '⁄',
        ordm = 'º', deg = '°', acute = '´', tilde = '˜', circ = 'ˆ', laquo = '«', raquo = '»', bdquo = '„', rsaquo = '›', lsaquo = '‹', sbquo = '‚', ndash = '–',
        ensp = ' ', emsp = ' ', thetasym = 'ϑ', upsih = 'ϒ', piv = 'ϖ', weierp = '℘', image = 'ℑ', real = 'ℜ', alefsym = 'ℵ', para = '¶',
        minus = '−', times = '×', divide = '÷', asymp = '≈', ne = '≠', equiv = '≡', le = '≤', ge = '≥', lowast = '∗', radic = '√', prod = '∏', sum = '∑',
        larr = '←', uarr = '↑', rarr = '→', darr = '↓', harr = '↔', crarr = '↵', lArr = '⇐', uArr = '⇑', rArr = '⇒', dArr = '⇓', hArr = '⇔', forall = '∀',
        part = '∂', exist = '∃', empty = '∅', nabla = '∇', isin = '∈', notin = '∉', ni = '∋', cedil = '¸',
        prop = '∝', infin = '∞', ang = '∠', and = '∧', or = '∨', cap = '∩', cup = '∪', INT = '∫', there4 = '∴', sim = '∼', cong = '≅',
        sub = '⊂', sup = '⊃', nsub = '⊄', sube = '⊆', supe = '⊇', oplus = '⊕', otimes = '⊗', perp = '⊥', sdot = '⋅',
        lceil = '⌈', rceil = '⌉', lfloor = '⌊', rfloor = '⌋', loz = '◊', iexcl = '¡', cent = '¢', curren = '¤', brvbar = '¦',
        uml = '¨', not = '¬', macr = '¯', plusmn = '±', micro = 'µ', iquest = '¿', dagger = '†', Dagger = '‡',
    }

記号を使用するには、キャラクター名の前に & を追加し、その後に ; を追加します (例: ∅ は ∅)。

非推奨のセクションタグ

現在では CSS の活発な発展により、多くのタグが必要なくなりました。

たとえば、font タグは表示されなくなります。

たとえば、事前レイアウトはスタイルを通じて実装されています。

たとえば、下線、取り消し線、下付き文字、上付き文字などにも独自のスタイルがあり、上線も作成できます。

HTMLを学ぶ

では、HTMLはどうやって勉強すればいいのでしょうか？上記の内容を見て、友人達もある程度の理解は得られると思います。

Lao Gu氏によると、htmlはコンテンツを変更するための特定のデフォルト値と特定の属性を持ついくつかの要素です。HTML ドキュメントによって表示されるコンテンツは、テキストがこれらのラベル要素によって変更された後の単なるテキストの山です。

実際、テキスト装飾要素、ストリーミング メディアの導入、レイアウト設定など、HTML の本質を理解した後は、HTML を特別に学ぶ必要はありません。Lao Gu 氏は以前、トレーニング クラスで HTML を学んだと言っています。フロント ページを通じて、コンテンツにタグを付けていることを理解した後は、HTML 学習のコンテンツは決して読みませんでした。ただ、w3school や他の Web サイトにアクセスして読んだだけです。ただ読むだけです。マニュアルで該当するラベルを探して完了です。たくさん書いてたくさん使えば、タグ名も自然と覚えられます。

まあ、昔はマニュアル本というものが比較的一般的でしたが、今はなぜ減ったのかわかりませんが、初心者向けから上級者向けまで、さまざまな種類の高級本が揃っています。。。。

このようなラベル言語はマニュアルがあり、簡単に始めることができ、覚えるのにあまり時間をかけなくてもよく使えば自然と上手に覚えられます、見たことのないラベルに出会ってもbefore、after マニュアルを見ればすべて理解できます。