在 HTML 和 CSS 中隐藏元素有哪些不同的方法？

在 HTML 和 CSS 中隐藏元素有哪些不同的方法？

这些是使用 HTML 或 CSS 在网页中隐藏内容的一些主要方法。

这些是使用 HTML 或 CSS 在网页中隐藏内容的一些主要方法。

安东尼奥·巴蒂尼奇摄

1. HTML5 属性hidden（推荐）

HTML5 提供了一个属性 隐 这有助于隐藏网页中的内容，并且屏幕阅读器也会避免这种情况。它为您的前端提供了更好的语义。

例子 -

 <div hidden>  
 <!-- Content Hidden -->  
 </div>

The element is selected in the DOM but does not take up any space in the UI

2. CSS 属性display: none

我们可以使用 CSS 属性从前端屏幕隐藏内容—— 显示：无 .该元素不占用 UI 中的任何空间。

Does not take up space in UI

3. CSS 属性visibility: hidden

我们还可以使用 CSS 属性从前端屏幕中隐藏元素—— 可见性：隐藏 .

即使该元素是隐藏的，它也会占用它在 UI 中的空间。

Takes space in UI

4. CSS 属性不透明度：0;

使用 CSS 属性隐藏元素—— 不透明度； 0 使元素完全透明，因此看起来隐藏在 UI 中。

由于我们只改变了它的透明度，该元素仍然占据了它在网页上的空间。

Takes up the space in the UI

5.隐藏元素 可访问性树

如果有一些像图片这样的元素只是为了美化 UI 而出现的，我们可以添加一个属性 咏叹调隐藏=真 到 HTML 元素。该元素将在网页上可见，但会被屏幕阅读器跳过。

让我知道您是否喜欢这篇文章以及您是否知道任何其他隐藏网页内容的方法。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1538/21272917