HTMLの基礎を詳しく解説（第2部）

1. リスト

リスト ulコンテナーには、一貫した構造とスタイルを持つテキストまたはグラフの形式が読み込まれます。これをリストと呼びます。

リストの最大の特徴は、表のように整然と整理されているが、組み合わせの自由度が高いことです。

1. 順序なしリスト ul

<ul></ul> 内にネストできるのは <li></li> のみです。<ul></ul> タグ内に他のタグやテキストを直接入力することはできません。

<li> と </li> の間のスペースは、すべての要素を保持できるコンテナーに相当します。

<ul>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
  ......
</ul>

2. 順序付きリスト ol

• <ol> タグの type 属性値はソートのシリアル番号です。type 属性を追加しない場合、順序付きリストはデフォルトで 1 番からソートされます。
• よく使われる型属性値は1、a、A、i、Iです
• <ol turned on="reversed"> の turned on 属性を使用すると、順序付きリスト内のシーケンスの順序を逆にすることができます。
• <ol start="3"> の開始属性値は 3 であり、順序付きリストの最初のシリアル番号は 3 から始まります。

<ol type="A"> 
  <li>リスト項目 1</li>
  <li>リスト 2</li>
  <li>リスト 3</li>
</ol>

3. カスタムリストのダウンロード

定義リストは、用語や名詞の説明や記述によく使用されます。定義リストでは、リスト項目の前に箇条書きはありません。

<ダウンロード>
  <dt>名詞 1</dt>
  <dd>名詞1の説明1</dd>
  <dd>名詞 1 説明 2</dd>
  ...
  <dt>名詞 2</dt>
  <dd>名詞2の説明1</dd>
  <dd>名詞2の説明2</dd>
  ...
</dl>

2. フォーム

HTML では、完全なフォームは通常、フォーム コントロール (フォーム要素とも呼ばれます)、プロンプト情報、およびフォーム フィールドの 3 つの部分で構成されます。フォームの目的はユーザー情報を収集することです。

フォームコントロール:

単一行テキスト入力ボックス、パスワード入力ボックス、チェック ボックス、送信ボタン、リセット ボタンなどの特定のフォーム機能項目が含まれます。

ヒント:

フォームには通常、ユーザーに入力や操作を促す説明テキストも含める必要があります。

フォームフィールド:

これは、すべてのフォーム コントロールとプロンプト情報を保持するコンテナーに相当します。フォーム データを処理するプログラムの URL アドレスや、サーバーにデータを送信する方法を定義するために使用できます。フォーム フィールドが定義されていない場合、フォーム内のデータはバックエンド サーバーに送信できません。

1. 入力制御

<input type="属性値" value="こんにちは">

• 入力の意味
• <input /> タグは単一のタグです
• type属性は、異なるコントロールタイプを指定するために異なる属性値を設定します。
• タイプ属性に加えて、他の属性もあります
  

ユーザー名: <input type="text" /> 
パスワード: <input type="password" />

値属性

value デフォルトのテキスト値。一部のフォームでは、ページを開いたときにデフォルトでいくつかの単語を表示する必要があり、この値を使用してそれを設定できます。

ユーザー名:<input type="text" name="username" value="ユーザー名を入力してください"> 

名前属性

• name はフォームの名前であり、背景はこの name 属性を通じてこのフォームを見つけることができます。 ページには多くのフォームがあり、名前の主な機能はさまざまなフォームを区別することです。
• name 属性の後の値は自分で定義します。
• ラジオがグループである場合は、複数の人がそのうちの 1 つを選択できるように、同じ名前を付ける必要があります。
• 現在、name 属性を使用することはほとんどありませんが、ajax や background を学習するときに必要になります。

<input type="radio" name="sex" />男性<input type="radio" name="sex" />女性

チェックされたプロパティ

デフォルトで選択された状態を示します。 ラジオ ボタンやチェック ボタンでよく使用されます。

性別：
<input type="radio" name="sex" value="男" checked="checked" />男<input type="radio" name="sex" value="女" />女

入力属性の概要

2. ラベル

• ラベル タグは、入力要素のラベル (ラベル) を定義します。
• ラベルの主な目的は、ユーザーエクスペリエンスを向上させることです。ユーザーに最高のサービスを提供します。
  

機能: フォーム要素をバインドするために使用されます。ラベル タグをクリックすると、バインドされたフォーム要素に入力フォーカスが設定されます。

要素をバインドするにはどうすればいいですか?

• 最初の使用法は、ラベルタグを使用して入力フォームを直接含めることです。これは、単一のフォーム選択に適しています。
• for 属性の 2 番目の使用法は、ラベルがどのフォーム要素にバインドされるか (ID によって) を指定します。

  まず、<label> ユーザー名を入力します。 
    <input type="radio" name="usename" value="ユーザー名を入力してください">   
  </ラベル>
  2番目のタイプ <label for="sex">男性</label>
  <input type="radio" name="性別" id="性別">

3. テキストエリアコントロール（テキストエリア）

• テキストエリアコントロールを使用すると、複数行のテキスト入力ボックスを簡単に作成できます。
• .cols="各行の文字数" rows="表示される行数" 実際の開発では使用する必要はありません
  

 <テキストエリア>
    テキストコンテンツ</textarea>

テキストボックスとテキストフィールドの違い

4. ドロップダウンリストを選択

• ユーザーが選択できるオプションが複数ある場合は、スペースを節約するために、選択コントロールを使用してドロップダウン リストを定義できます。
• オプションで定義selected = "selected" の場合、現在の項目がデフォルトで選択された項目になります。
• 実際の開発ではあまり使用しません
  

<選択>
  <option>オプション 1</option>
  <option>オプション 2</option>
  <option>オプション 3</option>
  ...
</選択>

3. フォームフィールド

収集したユーザー情報をサーバーに渡すにはどうすればいいですか?

• フォームフィールドを通じて

目的：

• HTML では、フォーム タグは、ユーザー情報を収集して送信するためのフォーム フィールドを定義するために使用されます。フォーム内のすべてのコンテンツはサーバーに送信されます。

<form action="URL アドレス" method="送信方法" name="フォーム名">
  さまざまなフォームコントロール</form>

共通プロパティ:

各フォームには独自のフォーム フィールドが必要です。後で Ajax バックグラウンドインタラクションを学習するときに、フォームフィールドが必要になります。

GETとPOSTの違い

GET はブラウザがフォールバックしても無害ですが、POST はリクエストを再度送信します。
GET リクエストはブラウザによってアクティブにキャッシュされますが、POST は手動で設定しない限りキャッシュされません。
GET リクエストは URL エンコードのみ可能ですが、POST は複数のエンコード方法をサポートします。
GET リクエスト パラメータはブラウザ履歴に完全に保持されますが、POST のパラメータは保持されません。
GET リクエストのサイズは一般的に (1024 バイト) です。http プロトコルには制限はありませんが、サーバーとオペレーティング システムに依存します。POST には理論上サイズ制限はなく、http プロトコル仕様にもサイズ制限はありません。ただし、実際には POST で送信できるデータ量はサーバーの設定とメモリ サイズに依存します。
パラメータ データ型の場合、GET は ASCII 文字のみを受け入れますが、POST には制限はありません。
GET はパラメータが URL 内で直接公開されるため、機密情報を渡すために使用できず、POST よりも安全性が低くなります。

チーム合意:

要素の属性値は二重引用符構文を使用する

書き込める要素属性値を全て書き込む

推奨 <input type="text" /> 
<input type="radio" name="名前" checked="チェック済み" />

URLを入力してからページが表示されるまでの流れ（インタビュー）

著者: Twinkle_
リンク: https://juejin.im/post/6869279683230629896
出典: ナゲッツ

ブラウザのマルチプロセスアーキテクチャ

• ブラウザによる URL の入力からページのレンダリングまでの全プロセスは、ブラウザ アーキテクチャ内のさまざまなプロセス間の連携によって完了します。
• ブラウザのメインプロセス: サブプロセスを管理し、サービス機能を提供する
• レンダリング プロセス: HTML、CSS、JS をインターフェイスにレンダリングします。js エンジン v8 とレイアウト エンジン Blink が搭載されています。タブ ページごとにレンダリング プロセスが作成されます。
• GPUプロセス: 元々は3Dcssの処理を担当していましたが、後にUIインターフェースもGPUで描画されるようになりました。
• ネットワークプロセス: ネットワーク要求とネットワークリソースの読み込みプロセスを担当します
• プラグイン プロセス: プラグインの動作を担当します。プラグインはクラッシュしやすいため、他のプロセスに影響を与えないように独立したプロセスに配置します。

次の図に示すように、ユーザー入力からページ表示まで、さまざまなプロセスが実行されます。

図からわかるように、プロセス全体ではさまざまなプロセス間の連携が必要です。プロセスは大まかに次のように説明できます。

• ユーザーがURLを入力し、入力情報を処理し、メインプロセスがナビゲーションを開始し、ネットワークプロセスに作業を引き渡す
• ネットワークプロセスがネットワーク要求を開始し、リダイレクトを引き起こす可能性があります
• サーバーが URL に応答すると、メイン プロセスがレンダリング プロセスに通知し、作業が開始されます。
• レンダリング プロセスの準備ができました。レンダリング プロセスにデータを送信することを、ドキュメントの送信と呼びます。
• レンダリング プロセスはデータを受信し、ページのレンダリングを完了します。

具体的なプロセス

1. URLを入力する

ユーザーは URL を入力し、入力情報を処理します。

• URL 構造のない文字列の場合は、ブラウザのデフォルト エンジンを使用して文字列を検索します。
• URL 構造を持つ文字列の場合、ブラウザのメイン プロセスはそれをネットワーク プロセスに渡して動作を開始します。

2.1 ブラウザのキャッシュを見つける

• ネットワークプロセスはまずローカルキャッシュがあるかどうかを確認します。ある場合は、リソースをブラウザプロセスに直接返します。ない場合は、次のステップはDNS-> IP-> TCPです。

2.2 DNS解決

• ネットワーク プロセスは URL を取得した後、まず DNS ドメイン名解決を実行して IP アドレスを取得します。リクエスト プロトコルが HTTPS の場合、TLS 接続を確立する必要があります。

2.2 TCP接続の確立、3ウェイハンドシェイク

• 次のステップは、IP アドレスを使用してサーバーとの TCP 接続を確立することです。接続が確立されると、サーバーにリクエストが送信されます。

3. サーバー応答

• サーバーは要求情報を受信した後、要求情報に基づいて応答行、応答ヘッダー、応答本文を生成し、ネットワーク プロセスに送信します。ネットワーク プロセスは応答情報を受信すると、応答ヘッダーの内容の解析を開始します。

ネットワーク プロセスによる応答行と応答ヘッダー情報を解析するプロセス:

3.1 リダイレクト

• 応答行のステータス コードが 301 (永続的なリダイレクト) および 302 (一時的) の場合、別の URL にリダイレクトする必要があることを意味します。このとき、ネットワーク プロセスは、応答ヘッダーの Location フィールドからリダイレクトされたアドレスを読み取り、ネットワーク要求を再開します。

3.2 応答データの処理

• ナビゲーションは、リクエスト ヘッダーの**Content-type**フィールドを通じて、応答本文データのタイプを決定します。ブラウザはこれを使用して、レスポンス本文のコンテンツを表示する方法を決定します。例えば、application/octet-stream の場合、ダウンロード種別に応じてリクエストが処理され、ナビゲーションが終了します。 text/html の場合、サーバーが HTML 形式を返すことをブラウザに伝え、ブラウザはレンダリング プロセスに作業する必要があることを通知します。

4. レンダリングプロセスを準備する

デフォルトでは、ページごとに 1 つのレンダラー プロセスが存在します。ただし、同じサイト (同じルート ドメイン名 + プロトコル) にある場合は、レンダリング プロセスが再利用されます。

5. 書類を提出する

• レンダリング プロセスの準備が整うと、ブラウザー プロセスは「ドキュメント送信メッセージ」を送信します。レンダリング プロセスは、メッセージを受信すると、ネットワーク プロセスとのデータ転送パイプラインを再開します。
• データ送信が完了すると、レンダリング プロセスはブラウザー プロセスにドキュメントの送信を確認するように指示します。このとき、ブラウザーはページ、セキュリティ ステータス、URL、前後の履歴を更新します。
• ここでナビゲーションは終了し、レンダリング段階に入ります。

注意: ブラウザがアドレスの読み込みを開始すると、タブ上のアイコンが読み込み状態になります。ただし、画像のページには、以前に開いたページの内容が表示されたままであり、すぐに Baidu のホームページ ページに置き換えられるわけではありません。ページ内容が置き換えられるまでに、書類提出の段階まで待つ必要があるためです。

4. フロントエンドHTMLの基本的な面接の質問

iframe の欠点は何ですか?

iframeの利点

• Iframe は埋め込まれた Web ページをそのまま表示できます。
• 複数の Web ページが iframe を参照している場合、呼び出される各ページのコンテンツを変更するには iframe のコンテンツを変更するだけでよいため、便利で迅速です。
• ウェブページに統一されたスタイルのための同じヘッダーとバージョンがある場合は、それを 1 つのページとして記述し、iframe でネストしてコードの再利用性を高めることができます。
• アイコンや広告などのサードパーティ コンテンツの読み込みが遅い場合は、iframe によってこれらの問題を解決できます。

iframeの欠点

• これにより、管理が容易ではない多くのページが生成されます。
• iframe 構造は、わかりにくい場合があります。フレームの数が多いと、上下左右のスクロール バーが表示され、訪問者の注意をそらし、ユーザー エクスペリエンスが悪くなります。世代
• コードが複雑で、一部の検索エンジンではインデックスできません。これは非常に重要です。現在の検索エンジンのクローラーは iframe 内のコンテンツをうまく処理できないため、iframe を使用すると検索エンジンの最適化に悪影響を及ぼします。
• 多くのモバイル デバイス (PDA 電話) ではフレームを完全に表示できず、デバイスの互換性も低いです。
• iframe ページはサーバーの http リクエストを増加させるため、大規模な Web サイトには推奨されません。
• 現在、基本的に Ajax が iframe の代わりとして使用されているので、iframe は徐々にフロントエンド開発から撤退しています。

ラベルの機能は何ですか?どうやって使うの？

例1: 「ユーザー名:」をクリックして入力ボックスにカーソルを置きます

<form><label for="myid"> ユーザー名:</label>
<input type="text" id="myid" /> </form>  

例2: 「ユーザー名:」をクリックするか、Alt+1を押して入力ボックスにカーソルを置きます。

<フォーム>
    <label for="myid" accesskey="1"> ユーザー名:</label>
    <input type="text" id="myid" tabindex="1" />
</フォーム>  

for 属性機能: ラベル タグがバインドされている HTML 要素を示します。このタグをクリックすると、バインドされた要素がフォーカスを取得します。

アクセスキー属性

機能:ラベル タグにバインドされた要素にアクセスするためのホットキーを示します。ホットキーを押すと、バインドされた要素にフォーカスが移動します。

制限: accessKey 属性によって設定されたショートカット キーは、ブラウザーのショートカット キーと競合することはできません。競合すると、ブラウザーのショートカット キーが最初にアクティブになります。

HTML5 フォームのオートコンプリート機能をオフにするにはどうすればいいですか?

HTML 入力ボックスには、オートコンプリート機能があります。入力ボックスにコンテンツを入力すると、ブラウザは、同じ名前の以前の入力ボックスの履歴から類似のコンテンツを検索し、入力ボックスの下にリストします。この方法では、すべてを入力する必要はなく、リスト内の項目を直接選択できます。

しかし、入力ボックスのオートコンプリート機能をオフにしたい場合もあります。たとえば、ユーザーがコンテンツを入力したときに、ユーザーの履歴を検索するのではなく、AJAX テクノロジを使用してデータベースから検索してリスト表示したい場合などです。

入力ボックスのオートコンプリート機能をオフにする方法は 3 つあります。

1. IEのインターネットオプションメニューで、オートコンプリートの内容を設定します。

2. フォームのオートコンプリートを「オン」または「オフ」に設定して、オートコンプリート機能をオンまたはオフにします。

3. 入力ボックスのオートコンプリートを「オン」または「オフ」に設定して、入力ボックスのオートコンプリート機能をオンまたはオフにします。

HTML5をオープンウェブプラットフォームとして見る

HTML5 の基本的な構成要素は何ですか?

• セマンティクス - コンテンツのより正確な説明を提供します。
• 接続 - サーバーと通信するための新しい方法を提供します。
• オフラインとストレージ - Web ページがデータをローカルに保存し、オフラインで効率的に実行できるようにします。
• マルチメディア - ビデオとオーディオは、オープン Web では第一級のものとして扱われます。
• 2D/3D グラフィックスと特殊効果 - より多くのプレゼンテーション オプションを提供します。
• パフォーマンスと統合 - より高速なアクセスとより優れたパフォーマンスのコンピューター ハードウェアを提供します。
• デバイス アクセス - さまざまな入力および出力デバイスの使用を許可します。
• 外観 - 豊富なテーマを開発できます。

ブラウザは HTML5 オフライン ストレージ リソースをどのように管理し、読み込むのでしょうか?

ブラウザの HTML ヘッダーにマニフェスト属性を追加します。ブラウザに初めてアクセスする場合は、マニフェストの内容に従ってオフライン コンテンツをダウンロードして保存します。以前にアクセスしたことがある場合は、オフライン ストレージから読み込み、サーバーと比較した後、新しいコンテンツがある場合はオフライン ストレージを更新します。

オフラインの場合、ブラウザはオフラインで保存されたリソースを直接使用します。

ブラウザのレンダリングプロセスですか?

1. 取得したHTMLをDOMツリーに解析する 2. CSSを処理してカスケーディングスタイルシートモデルCSSOMを形成する
3. DOM ツリーと CSSOM をレンダリング ツリーにマージします。 4. CSSOM に従ってレンダリング ツリーのノード レイアウトを計算します。 5. レンダリング ツリー ノード スタイルをページに描画します。 // レンダリング プロセスはトップダウン レンダリングであることに注意してください。
js はページのレンダリングをブロックするため、まず js の実行が完了するまで待機してください。レンダリング プロセス中にスタイルが変更されると、リフローが発生し、再レンダリングが必要になります。

link と @import の違いは何ですか?

1.従属関係の違い：
リンクは HTML タグに属し、@import は CSS によって提供されます。
2. 読み込み順序の違い:
ページが読み込まれると同時にリンクも読み込まれ、@import で参照される CSS はページが読み込まれるまで待機してから読み込まれます。
3. 互換性の違い:
インポートは IE5 以上でのみ認識されますが、リンクは HTML タグなので互換性の問題はありません。
4. DOM操作性の違い:
JS を使用して DOM を操作し、リンク タグを挿入してスタイルを変更できます。DOM メソッドはドキュメント ベースであるため、@import を使用してスタイルを挿入することはできません。
5. 重量差：
同じスタイルがすでに存在する場合、@import によって導入されたスタイルは CSS ファイル自体のスタイルによって上書きされ、リンク メソッドのスタイルの重みが @import の重みよりも高くなるという直感的な効果を示します。
(簡単に言うと、link と @import のうち、後から記述された方のスタイルが適用され、後のスタイルが前のスタイルを上書きします。)

src と href の違いは何ですか?

1.href はネットワーク リソースの場所を指し示し、現在の要素 (アンカー) または現在のドキュメント (リンク) へのリンクを確立し、ハイパーリンクに使用されます。

2. src は外部リソースの場所を指し、指し示されたコンテンツはドキュメント内の現在のタグの場所に埋め込まれます。src リソースが要求されると、それが指し示すリソース (js スクリプト、img 画像、フレーム要素など) がダウンロードされ、ドキュメントに適用されます。ブラウザがこの要素を解析すると、リソースが読み込まれ、コンパイルされ、実行されるまで、他のリソースのダウンロードと処理が一時停止されます。画像やフレームなどの要素にも同じことが当てはまり、ポイントされたリソースを現在のタグに埋め込むのと似ています。これは、js スクリプトを上部ではなく下部に配置する必要がある理由でもあります。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。