HTML中如何隐藏元素？
HTML隐藏元素
您可以通过将布尔属性
hidden 与元素一起使用来隐藏元素。当您在
HTML 文件中指定隐藏属性时，浏览器将不会显示该属性指定的元素
语法
<element or tag hidden> Any statement or content </element or tag>
示例:指定以下示例以轻松理解如何将隐藏属性与不同的元素或标签一起使用:
<!DOCTYPE html>
<html>
<head>
<title>
隐藏属性的第一个示例
</title>
</head>
<body>
<center>
<h1> Lidihuo </h1>
</center>
<p hidden> 此段落应被隐藏。
</p>
</body>
</html>
输出:
示例2:以下示例在<input type="text">元素中使用了hidden属性。
在此示例中，我们对两个
输入标签。执行以下程序时，这些输入字段将不会显示在网页上。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>输入标记中的“隐藏”属性示例</title>
<style>
/* 以下标记选择器主体将font-family和background-color属性用于页面主体 */
body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
/* 在容器类之后，使用填充来在其周围生成空间，还使用background-color将浅蓝色指定为背景 */
.container {
padding: 50px;
background-color: lightblue;
}
/* 以下标记选择器输入对文本字段使用不同的属性。*/
input[type=text] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
input[type=text]:focus {
background-color: orange;
outline: none;
}
/* 以下div标签选择器用于在网页上的内容或元素之间提供空格或空白。 */
div {
padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> 注册表 </h1> </center>
<hr>
<label for="fn"> 姓名：</label>
<!-- 以下输入字段不会显示在网页上，因为此<input>标记中使用了hidden属性。 -->
<input hidden type="text" name="username" id= "fn" size="20" required />
<div>
<label for="mn"> 邮箱： </label>
<input type="text" name="email" id="mn" size="20" required />
</div>
<label for="Ln"> 地址：</label>
<input type="text" name="address" id="Ln" size="20" required />
<label for="pn">
Phone :
</label>
<input type="text" name="countrycode" placeholder="国家代码" value="+86" size="3"/>
<!-- 以下输入字段未显示在网页上，因为它也使用了hidden属性 -->
<input hidden type="text" name="phone" id="pn" size="10"/ required>
</hr>
</div>
</form>
</body>
</html>
输出:
浏览器支持
| 元素 |
 |
 |
 |
 |
 |
| <input type="text"> |
6.0 |
11.0 |
4.0 |
11.1 |
5.1 |
