替换了HTML的元素：神话和现实

>本文探讨了HTML中替代元素的经常被忽略的行为，阐明了它们的性质并消除了共同的误解。

由于浏览器和操作系统之间的渲染不一致，

前端开发人员经常遇到诸如iframe，applet和表单控件之类的元素。尽管众多图书馆提供解决方法，但了解根本原因（替换元素的概念）至关重要。 本文深入研究W3C规格以提供明确的解释。

钥匙要点：

>替换元素：它们的内容源于CSS格式化模型（例如，图像，嵌入式文档）。它们通常具有内在的维度（宽度，高度，宽高比）。
• > 内在维度：代表元素本身的首选大小，与页面上的上下文无关。 并非全部替换元素都有所有三个维度。
>
• ，和的元素
始终
• 更换元素。<embed></embed> <iframe></iframe> <video></video>误解：许多人认为，形式控件被替换为元素。 但是，HTML标准将它们显式将其分类为
• 元素。 它们的默认维度源于特定于浏览器的渲染规则，而不是固有的属性。> 理解替换的元素：

> W3C将替换的元素定义为：“其内容不在CSS格式化模型范围之外的元素，例如图像，嵌入式文档或applet。” 内容被其引用的外部资源代替。

固有的尺寸解释了：

内在尺寸（宽度，高度，纵横比）由CSS图像值定义，并替换了内容模块级别3。这些尺寸代表元素的自然大小。 图像具有所有三个； SVG可能只有纵横比；一个空的iframe没有。 任何两个的存在都会自动定义第三个。

>在实践中替换元素：

> HTML Living标准提供详细的渲染规则。某些元素总是被替换，而另一些元素仅在特定条件下：

• >嵌入式内容（始终替换）：<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>
如果没有可用的尺寸：
3. >
   视口≥300px：。
   • width: 300px; height: 150px视口＆lt; 300px：
   >和
   • 是width，具有2：1的纵横比。height auto

表格控制：澄清：

> 其他表单控件是

不是

替换元素。 HTML标准将其归类为非重建的。它们的外观由浏览器特异性渲染和> appearance结论：

了解替换元素和形式控件之间的区别需要仔细检查HTML和CSS规范。 在形式控件中，仅是一个替换元素。这种澄清提供了对HTML渲染经常被误解的方面的更清晰的理解。>

>常见问题（常见问题解答）：<input type="image">（本部分与输入相比基本不变，因为这是一个有用的补充，并且不需要重大重写伪源性。）

>

在html中究竟替换了什么？ HTML中替换的元素是其外观和尺寸由外部资源定义的元素。它们被称为“替换”，因为它们的内容被这些资源替换。替换元素的示例包括图像，对象，视频和嵌入式文档。这些元素的实际内容不是由HTML文档本身确定的，而是由外部文件确定。

>替换元素与非重定元素有何不同？

>

>替换元素和非重建元素之间的主要区别在于如何确定其内容。对于非重建元素，内容由HTML文档本身确定。对于替换元素，内容由外部资源确定。这意味着替换元素的外观和尺寸可能与HTML文档中指定的内容不同。

。

我可以控制替换元素的大小吗？ 是的，您可以使用CSS控制替换元素的大小。您可以使用“宽度”和“高度”属性来指定元素的宽度和高度。但是，请记住，除非您指定宽度和高度，否则将保持外部资源的长宽比。

使用替换元素有任何限制吗？

>替换元素具有很大的灵活性，但它们也有一些限制。例如，您无法使用CSS或JavaScript更改替换元素的内容。另外，某些CSS属性不适用于替换元素，例如“垂直align”和“线路高”。

>替换元素的一些常见用途是什么？

更换的元素通常用于将外部资源嵌入网页中。这包括图像，视频，音频文件和其他多媒体内容。它们也可以用于嵌入文档，例如PDF，以及创建互动内容，例如游戏和测验。

>

如何指定替换元素的来源？

使用“ SRC”属性指定了替换元素的来源。此属性的值是外部资源的URL。例如，要嵌入图像，您将使用“ img”元素将“ src”属性设置为图像的URL。

>可以替换元素会影响我的网页的性能吗？

> 是的，更换的元素可能会影响您的网页的性能。由于这些元素的内容是从外部资源加载的，因此它们可以增加网页的负载时间。为了最大程度地减少这种影响，您应该优化外部资源的大小，并考虑使用懒惰的加载技术。

是否有使用替换元素的可访问性注意事项？

是的，使用替换元素时，重要的是要考虑可访问性。例如，对于图像，您应始终包含描述图像内容的“ alt”属性。这有助于屏幕读取器理解内容，从而使您的网页更容易受到视觉障碍的访问。

>

我可以使用带有替换元素的CSS吗？

>

是的，您可以将CSS使用带有替换元素的CSS。但是，并非所有CSS属性都适用于更换的元素。例如，您可以使用“宽度”和“高度”属性来控制元素的大小，但是您不能使用“ content”属性来更改元素的内容。

是否有使用更换元素的最佳实践？

使用替换元素时，重要的是要优化外部资源的大小，以最大程度地减少对网页加载时间的影响。另外，始终包含图像以提高可访问性的“ alt”属性。请记住，虽然您可以控制使用CSS替换元素的大小，但应维护外部资源的纵横比以防止失真。

以上是替换了HTML的元素：神话和现实的详细内容。更多信息请关注PHP中文网其他相关文章！