HTMLの交換された要素：神話と現実

この記事では、HTMLの交換された要素のしばしば想定されている行動を探り、彼らの性質を明確にし、一般的な誤解を払拭します。

フロントエンドの開発者は、ブラウザーやオペレーティングシステム間の一貫性のないレンダリングにより、IFRAME、アプレット、フォームコントロールなどの要素で課題に頻繁に遭遇します。多数のライブラリが回避策を提供していますが、根本的な原因（交換された要素の概念）を理解することが重要です。 この記事では、W3C仕様を掘り下げて、決定的な説明を提供します。

キーテイクアウト：

交換された要素：

それらのコンテンツは、CSSフォーマットモデル（例：画像、埋め込みドキュメント）の外部から発生します。多くの場合、固有の寸法（幅、高さ、アスペクト比）を持っています。
• 固有の寸法：
ページ上のコンテキストとは無関係に、要素自体の優先サイズを表します。 交換されたすべての要素がすべて3つの次元を持っているわけではありません
• 、、、
のような要素は、常に
• に置き換えられた要素です。<embed></embed> <iframe></iframe><video></video>誤解：フォームコントロールが交換された要素であると多くの人が信じています。 ただし、HTML標準は、それらを明示的に非表現
要素として分類します。 デフォルトの寸法は、本質的なプロパティではなく、ブラウザ固有のレンダリングルールに起因します。
• 交換された要素を理解する：
W3Cは、置き換えられた要素を次のように定義しています。「画像、埋め込まれたドキュメント、またはアプレットなど、CSSフォーマットモデルの範囲外のコンテンツがある要素」。 コンテンツは、参照する外部リソースに置き換えられます。

本質的な寸法が説明されています：

固有の寸法（幅、高さ、アスペクト比）は、CSS画像値で定義され、コンテンツモジュールレベル3を置き換えます。これらの寸法は、要素の自然なサイズを表します。 画像には3つすべてがあります。 SVGにはアスペクト比のみがある場合があります。空のiframeにはありません。 任意の2つの存在は、3番目を自動的に定義します

実際に交換された要素：

HTML Living Standardは、詳細なレンダリングルールを提供します。常に交換される要素もありますが、他の要素は特定の条件のみでのみです。

• 埋め込みコンテンツ（常に置き換えられます）： <embed></embed>、<iframe></iframe>、<video></video>。
• 埋め込みコンテンツ（条件付きで置き換えられます）： <applet></applet>、<audio></audio>、<object></object>、<canvas></canvas>（埋め込みコンテンツを表すときに置き換えられます）。
• 画像（通常は置き換えられます）：および<img src="/static/imghw/default1.png" data-src="/uploads/20250217/173975173867b2813a4a5be.webp" class="lazy" alt="HTMLの交換された要素：神話と現実" >（画像のロードまたはロードが予想されるときに置き換えられます。それ以外の場合は、ボタンとしてレンダリングする可能性があります）。 <input type="image">

交換された要素のデフォルトのサイジング：

本質的な寸法が利用できない場合、ブラウザはデフォルトのルールを適用します（視覚的なフォーマットモデルの詳細）：

明示的な幅、高さ、比率が存在する場合、これらが使用されます。

1. 比率のみがわかっている場合、
および
2. がwidthに設定され、アスペクト比を維持します。 height寸法がない場合：auto
ViewPort≥300px：
3. 。
   • viewport＆lt; 300px：width: 300px; height: 150pxおよび
   は
   • 、2：1のアスペクト比。 width height auto

フォームコントロール：alification：

他のフォームコントロールは、ではないに置き換えられた要素です。 HTML標準は、それらを非複製として分類します。それらの外観は、ブラウザ固有のレンダリングと

CSSプロパティによって決定され、クロスブラウザーとクロスOSの矛盾につながります。

結論：appearance

交換された要素とフォームコントロールの区別を理解するには、HTMLおよびCSS仕様を慎重に調べる必要があります。 フォームコントロールの間でのみ

が置き換えられた要素です。この明確化は、HTMLレンダリングの頻繁に誤解されている側面をより明確に理解することを提供します。 よくある質問（FAQS）：

（このセクションは、有用な追加であり、擬似オリジナリティのための重要な書き換えを必要としないため、入力からほとんど変化していません。）

> <input type="image">HTMLの交換された要素は正確には何ですか？

HTMLの交換された要素は、外部リソースによって外観と寸法が定義される要素です。コンテンツがこれらのリソースに置き換えられるため、「交換」と呼ばれます。交換された要素の例には、画像、オブジェクト、ビデオ、埋め込みドキュメントが含まれます。これらの要素の実際のコンテンツは、HTMLドキュメント自体ではなく、外部ファイルによって決定されます。

交換された要素は、非表現されていない要素とどのように異なりますか？

交換された要素と非複製要素の主な違いは、コンテンツの決定方法にあります。非複製要素の場合、コンテンツはHTMLドキュメント自体によって決定されます。交換された要素の場合、コンテンツは外部リソースによって決定されます。これは、交換された要素の外観と寸法がHTMLドキュメントで指定されているものとは異なる可能性があることを意味します。

交換された要素のサイズを制御できますか？

はい、CSSを使用して交換された要素のサイズを制御できます。 「幅」と「高さ」のプロパティを使用して、要素の幅と高さを指定できます。ただし、幅と高さの両方を指定しない限り、外部リソースのアスペクト比は維持されることに留意してください。

交換された要素を使用することに制限はありますか？

交換された要素は多くの柔軟性を提供しますが、いくつかの制限もあります。たとえば、CSSまたはJavaScriptを使用して交換された要素のコンテンツを変更することはできません。また、一部のCSSプロパティは、「垂直整列」や「ラインハイイト」などの交換された要素には適用されません。

交換された要素のいくつかの一般的な用途は何ですか？

交換された要素は、外部リソースをWebページに埋め込むために一般的に使用されます。これには、画像、ビデオ、オーディオファイル、その他のマルチメディアコンテンツが含まれます。また、PDFなどのドキュメントの埋め込みや、ゲームやクイズなどのインタラクティブなコンテンツの作成にも使用できます。

交換された要素のソースを指定するにはどうすればよいですか？

交換された要素のソースは、「SRC」属性を使用して指定されています。この属性の値は、外部リソースのURLです。たとえば、画像を埋め込むには、「SRC」属性を画像のURLに設定した「IMG」要素を使用します。

交換された要素は、私のWebページのパフォーマンスに影響しますか？

はい、交換された要素は、Webページのパフォーマンスに影響を与える可能性があります。これらの要素のコンテンツは外部リソースからロードされるため、Webページの負荷時間を増やすことができます。この影響を最小限に抑えるには、外部リソースのサイズを最適化し、怠zyなロードテクニックの使用を検討する必要があります。

交換された要素を使用するためのアクセシビリティの考慮事項はありますか？

はい、交換された要素を使用する場合、アクセシビリティを考慮することが重要です。たとえば、画像の場合、画像の内容を記述する「ALT」属性を常に含める必要があります。これにより、読者がコンテンツを理解し、視覚障害のあるユーザーがWebページをよりアクセスしやすくします。

交換された要素でCSSを使用できますか？

はい、交換された要素でCSSを使用できます。ただし、すべてのCSSプロパティが交換された要素に適用されるわけではありません。たとえば、「幅」と「高さ」のプロパティを使用して要素のサイズを制御できますが、「コンテンツ」プロパティを使用して要素のコンテンツを変更することはできません。

交換された要素を使用するためのベストプラクティスはありますか？

交換された要素を使用する場合、外部リソースのサイズを最適化して、Webページの負荷時間への影響を最小限に抑えることが重要です。また、アクセシビリティを向上させるための画像の「ALT」属性を常に含めてください。また、交換された要素のサイズをCSSで制御できますが、外部リソースのアスペクト比を維持して歪みを防ぐ必要があります。

以上がHTMLの交換された要素：神話と現実の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。