ホームページ >ウェブフロントエンド >htmlチュートリアル >Browser_html/css_WEB-ITnose に関する簡単な説明
Browser_html/css_WEB-ITnose に関する簡単な説明
- WBOYオリジナル
- 2016-06-21 08:51:081138ブラウズ
著者: Zhao Ce
発行日: 2016-4-16
昨日、学校会計協会で講演をし、HTML コードの変換について気軽に話しましたウェブページへ この過程で、戻ってきて簡単な整理をしました。以下はあくまでも個人的な理解ですので、間違いがあればご容赦ください。
なぜ HTML のような言語を選択するのでしょうか? C、C++、Java、または C# を学習したことのある人は、ほとんどの言語がコンパイルされてコードからアプリケーションにリンクされることを知っているからです。といった処理がありますが、HTMLをWebページに変換する場合にはそのような処理はありません。
HTML から Web ページへの変換は、コード言語をビュー言語に変換する「翻訳」プロセスに似ています。
ブラウザがどのように翻訳するかを理解するには、まず HTML とは何かを理解する必要があります。
私の個人的な意見では、HTML は言語というよりはルールであり仕様です。ブラウザは単なるプログラムであり、この仕様を適用する翻訳ツールです。
ご存知のとおり、HTML コードは <head> と <body> の 2 つの部分に分かれており、<head> タグには主にいくつかの Web サイト情報、参照ファイル、ライブラリなどが含まれます。 <body> タグには主に、テキスト、写真、ビデオなど、Web サイトによって表示される特定のコンテンツが含まれます。
ブラウザはコード内の 93f0f5c25f18dab9d176bd4f6de5d30e タグを読み取ると、規約に従ってコードを Web ページ情報に変換し、保存しますが、266dc6d4fea21f3d84fb73932139c4e4 タグを読み取るまでは表示しません。この状態はサーバーが終了する前の状態です。 次に、<body> タグが読み取られ、ブラウザは翻訳と描画のプロセスを開始します。
ここで最初に古代のプリンター、ドット マトリクス プリンターを紹介します。原理は、紙と印刷針の相対位置を制御することで印刷を実現することです。
ブラウザが <body> タグを変換するプロセスは、実際にはこのドットマトリックス プリンタと少し似ています。ブラウザは、ルールに記述された識別子 (HTML タグなど) を検出するたびにコードの読み取りを開始します。を指定すると、HTML ルールに従って対応する情報に変換されます。
たとえば、ブラウザは次の HTML コードを変換して描画します:
<body><h1>这里是h1标签</h1><a href="http://zhaoce.name">这里是a1标签</a><img src="img/01.png"><br><img src="img/02.png"></body>
ブラウザは <body> を読み取った後、最初に初期化を行い、ウィンドウ全体を A として扱います。印刷用紙の最初のボックスの 1 行目にカーソルを置きます。ドット マトリクス プリンタの初期状態に似ています。
変換プロセスは次のとおりです:
→ <body> タグ、ブラウザはカーソルを画面の開始位置に初期化し、合意されたルールに従ってサイズを初期化します。前進。
→ <h1> タグ、合意されたルールに従ってカーソルを合意されたサイズに調整します。
→ 「ここに h1 タグがあります」というコードを読み続け、規則に従って通常のテキストを画面に直接出力します。
→ ea495b15cf15aff25628557fb2c393f8 <a> タグのパラメータ href の値を URL リンクに設定します。
→ 「ここに a1 タグがあります」という通常のテキストを読み取って、それを現在のカーソル位置に出力し、前の URL リンクをこのテキストにバインドします。
→ 5db79b134e9f6b82c0b36e0489ee08ed タグを閉じて上記の設定状態を終了します:
→ <img src="img/01.png "> ; 現在のカーソル位置で画像ビューを開き、パラメーター src の値を表示された画像のアドレスとして使用します。次に、カーソルを画像の最後に移動します。 (画像は行を上に上げ、テキストは通常のサイズで行の下部近くに表示されるため、テキストは下に移動して見えます):
→ カーソルを置きます。次の行の開始位置:
→ <img src="img/02.png"> 前と同様に、2 番目の画像を印刷します。次に、カーソルを画像の末尾に移動します。
→ <a href="http://blog.zhaoce.name"> のパラメータ href の値を設定します。 ; タグを URL リンクに設定します。
タグ、合意されたルールに従って、カーソルを合意されたサイズに調整し、次の行の開始位置に移動します:
→「ここに a2 タグがあります」というコードを読み続け、通常のテキストをカーソルの現在位置に直接印刷し、前の URL リンクをこのテキストにバインドするルールに従います:
→ カーソルを初期サイズに戻し、カーソルを次の行の開始位置に置きます:
→ 5db79b134e9f6b82c0b36e0489ee08edラベルを貼り付けて上記の設定状態を終了します。
→