ARIAランドマークのHTML「役割」属性

ネイティブLazyロードは、タグにロード= "lazy"属性を追加することにより、写真の怠zyなロードを可能にする組み込みブラウザー機能です。 1. JavaScriptまたはサードパーティライブラリを必要とせず、HTMLで直接使用されます。 2。ページの下の最初の画面に表示されない写真、画像ギャラリーはアドオンをスクロールし、大規模な写真リソースに適しています。 3.最初の画面またはディスプレイを備えた写真には適していません。 4。それを使用する場合、レイアウトジッターを避けるために適切なプレースホルダーを設定する必要があります。 5。SRCSETおよびサイズの属性と組み合わせて、レスポンシブな画像の読み込みを最適化する必要があります。 6。互換性の問題を考慮する必要があります。一部の古いブラウザはそれをサポートしていません。これらは、機能検出を通じて使用し、JavaScriptソリューションと組み合わせることができます。

SRCSETとサイズは、レスポンシブ画像のHTML実装の重要なプロパティです。 SRCSETは複数の画像ソースと400Wや800Wなどの幅またはピクセル密度を提供し、ブラウザはそれに応じて適切な画像を選択します。サイズは、ブラウザが画像サイズをより正確に一致させることができるように、（最大幅：600px）100VW、50VWなど、異なる画面幅で画像の表示幅を定義します。実際には、メディアクエリに従って明確に名前が付けられたマルチサイズの写真を設計レイアウトを準備し、サイズやユニットエラーを無視しないように機器のパフォーマンスをテストし、帯域幅を節約してパフォーマンスを改善する必要があります。

HTMLタグを使用して、HREF属性を使用して、ページジャンプを実現し、新しいウィンドウを開く、ページ内の配置、電子メールおよび電話リンクの機能を実現できます。 1。基本的な使用法：Webページへのアクセスなど、HREFを介してターゲットアドレスを指定します。 2。新しいウィンドウを開きます：ターゲットを追加= "_ blank"およびrel = "noopener"属性。 3.ページ内にジャンプします：IDと＃シンボルを結合して、アンカーポイントの位置決めを実現します。 4。電子メール電話リンク：MailTo：またはTel：Protocolを使用してシステムアプリケーションをトリガーします。

主な違いは、Textareaが複数のテキスト入力をサポートし、inputTextは単一行でのみ使用できることです。 1。inputtype= "テキスト"を使用して、ユーザー名、電子メールアドレスなどなどの短いおよび単一ラインのユーザー入力に適しており、最大長を設定して文字の数を制限できます。ブラウザは自動充填機能を提供するため、ブラウザ全体で均一にスタイルを整えることができます。 2。コメントボックス、フィードバックフォーム、サポートラインブレーク、パラグラフなど、複数の入力を必要とするシナリオには、Textareaを使用し、CSSを介してサイズを制御したり、調整機能を無効にしたりできます。どちらもプレースホルダーや必要な塗りつぶしなどのサポートフォームの機能ですが、Textareaは行とcolを介してサイズを定義し、入力はサイズ属性を使用します。

これは、大きなブロックコンテンツ領域を分割するために使用されるブロックレベルの要素です。これは、テキストまたはコンテンツの断片の小さなセグメントを包むのに適したインライン要素です。特定の違いは次のとおりです。1。列、幅、高さのみを占有し、内側と外側の縁を設定できます。これは、ヘッダー、サイドバーなどのレイアウト構造でよく使用されます。 2。ラインを包み、コンテンツ幅のみを占有し、変色、太字などのローカルスタイル制御に使用されます。 3.使用シナリオの観点から、それは全体の領域のレイアウトと構造の組織に適しており、全体的なレイアウトに影響を与えない小規模なスタイル調整に使用されます。 4.ネスティングの場合、任意の要素を含めることができ、ブロックレベルの要素を内部にネストしないでください。

基本的なポップアップ効果を実現するには、次の手順に従う必要があります。1。構造：HTMLを使用して、トリガーボタン、マスクレイヤー、ポップアップコンテンツ領域を作成します。 2。スタイル：CSSを介して、デフォルトの非表示、中央レイアウト、マスクの背景、閉じるボタンスタイルを設定します。 3。相互作用：JavaScriptを使用してクリックイベントをバインドしてポップアップディスプレイと非表示を制御し、ESCキークロージング関数を拡張できます。 4。最適化：CSSアニメーションを追加して、ユーザーエクスペリエンスを向上させます。プロセス全体には、基本的なポップアップ関数を迅速に実現するのに適したサードパーティライブラリは必要ありません。

タグは、再利用可能なコンテンツフラグメントを定義するためにHTML5によって導入されたタグです。それらはすぐにレンダリングされませんが、JavaScriptを介して動的に挿入できます。使用プロセスには以下が含まれます。1。テンプレートの定義。 2。コンテンツのクローニング。 3。DOMの挿入。たとえば、document.getElementByIDを使用してテンプレートを取得し、CloneNode（True）を呼び出し、ページを挿入します。データを動的に埋める場合、クローン化されたDOM要素を操作することでコンテンツバインディングを実現できます。これは、製品リスト、ユーザーカード、その他のコンポーネントの構築に適しています。使用する場合は、テンプレートサブエレメントに直接アクセスしないように注意し、IDの競合を回避し、スタイルのスコープを処理し、WebComponentsを持つカプセル化コンポーネントを作成することもできます。

HTMLをすばやく開始するには、Webスケルトンを構築するためにいくつかの基本的なタグをマスターするだけです。 1.ページ構造は不可欠であり、ルート要素であり、メタ情報が含まれ、コンテンツディスプレイ領域です。 2。タイトルを使用します。レベルが高いほど、数が小さくなります。タグを使用してテキストをセグメント化して、レベルをスキップしないようにします。 3.リンクはタグを使用してHREF属性を一致させ、画像はタグを使用し、SRCおよびALT属性が含まれます。 4.リストは、順序付けられていないリストと順序付けリストに分割されます。各エントリは表され、リストにネストする必要があります。 5.初心者は、すべてのタグを強制的に記憶する必要はありません。あなたが書いている間にそれらを書いてチェックする方がより効率的です。構造、テキスト、リンク、写真、リストをマスターして、基本的なWebページを作成します。