HTML - hidden 属性

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

打印本页