HTML hidden 是全局属性，用于暂时隐藏元素以提高用户的可见性。此属性主要在存在用户必须登录才能看到的条件时使用。
例如，它用于隐藏在登录过程完成之前无法使用的页面元素。登录完成后，可以使用 JavaScript 代码使其可见。
语法
<element hidden> ...content</element>
适用于
hidden 属性可以应用于任何 HTML 元素，使其对用户隐藏。但是，有些元素通常不支持隐藏或不适合隐藏，例如 <html>、<head>、<title> 等标签是不可隐藏的。
HTML hidden 属性的示例
以下示例将说明 HTML 隐藏属性，我们应该在何处以及如何使用此属性！
隐藏 span 元素
在以下示例中，我们创建了一个句子并在 <span> 标签中保留了一个关键字，我们在其中使用 hidden 属性来隐藏“space”单词。
<!DOCTYPE html>
<html>
<body>
<h3>HTML hidden Attribute</h3>
<p>
<!-- HTML hidden Attribute used on span Tag -->
A hidden element does not take <span hidden>space</span> as well
</p>
</body>
</html>
隐藏图像元素
在这个例子中，我们将以相同的方法隐藏 img 元素，我们可以直接在 img 标签上应用隐藏属性。
<!DOCTYPE html>
<html lang="en">
<body>
<h3>HTML hidden Attribute</h3>
<strong>This image is not hidden</strong>
<br>
<img src="html/images/html.jpg" alt="Image 1" width="200">
<br>
<strong>This image is hidden</strong>
<br>
<img src="html/images/html.jpg" alt="Image 4" width="200" hidden>
</body>
</html>
隐藏元素空间占用
在此示例中，我们将创建三个 div 并设置边框以检查是否隐藏了 div，它是否占用空间。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h3>HTML hidden Attribute</h3>
<div>
<p>This is paragraph Element inside of a div Element</p>
</div>
<br>
<div hidden>
<p>This is paragraph Element inside of a div Element</p>
</div>
<br>
<div>
<p>This is paragraph Element inside of a div Element</p>
</div>
<p>
Note: If you remove the hidden keyword from second
div element you can will see the gap between the div
reduce that is because of <br> tag.
</p>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | 6.0 | 11.0 | 4.0 | 5.1 | 11.1 |
