HTML - div 标签_HTML 菜鸟教程

HTML <div> 标签用于定义网页中的部分。开发者使用此标签对 HTML 元素进行分组，我们可以一次将 CSS 样式应用于多个 div 元素。

仅当没有其他语义元素（如 <article> 或 <nav> 时，才应使用 <div> 元素。

语法

<div> ..... </div>

属性

<div> 标签接受所有 HTML 全局属性和事件属性。

创建 div 部分

HTML <div> 标签用于在 HTML 中创建除法，创建除法是为了将内容保留在特定部分，以将网页划分为恶意的 pasrts。

例子

在以下示例中，我们使用 HTML <div> 标签来定义 html 文档中的两个 div 部分。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML div tag</title>
</head>
<body>
	 <h3>HTML div tag Example</h3>
	 <!-- Using HTML div tag -->
	 <div>
			 This is div tag 1
	 </div>
	 <div>
			 This a div tag 2
	 </div>
</body>

嵌套的 div 部分

我们可以在除法内部创建除法，这些除法将是嵌套的除法。我们可以使用 HTML <div> 标签来创建嵌套的 div 部分。

例子

在这里，我们将使用 <div> 标签创建嵌套的 div 部分到 HTML 文档中。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML div tag</title>
	 <style>
			/* using CSS to increase the visibility of divs */
			div {
				 border: 2px solid black;
				 padding: 4px;
			}
	 </style>
</head>
<body>
	 <h3>HTML div Tag Example</h3>
	 <!-- Using HTML div tag -->
	 <div>Outer 
			 <div>Inner 
				<div>Inner1</div>
			</div>
	 </div>
</body>
</html>

多个 div 部分

我们可以根据自己的要求在单个网页中创建多个分割，通过使用 HTML <div> 标签，我们也可以做到这一点。

例子

在此示例中，我们使用 HTML <div> 标记将 HTML 文档划分为多个部分。我们正在使用 CSS 来设置我们创建的部分的样式。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML div tag</title>
	 <style>
			.first {
				 width: 100px;
				 height: 100px;
				 background-color: rgb(4, 109, 109);
				 text-align: center;
				 display: grid;
				 place-items: center;
				 float: left;
			}

			.second {
				 width: 100px;
				 height: 100px;
				 background-color: rgb(17, 92, 222);
				 text-align: center;
				 display: grid;
				 place-items: center;
				 float: left;
			}

			.third {
				 width: 100px;
				 height: 100px;
				 background-color: rgb(82, 40, 180);
				 text-align: center;
				 display: grid;
				 place-items: center;
				 float: left;
			}

			.fourth {
				 width: 100px;
				 height: 100px;
				 background-color: rgb(157, 17, 222);
				 text-align: center;
				 display: grid;
				 place-items: center;
				 float: left;
			}

			div {
				 border-radius: 10px;
				 margin: 10px 10px;
			}

			div p {
				 color: white;
			}
	 </style>
</head>
<body>
	 <h3>HTML div Tag Example</h3>
	 <!-- Using HTML div tag -->
	 <div class="first">
			<p>First</p>
	 </div>
	 <div class="second">
			<p>Second</p>
	 </div>
	 <div class="third">
			<p>Third</p>
	 </div>
	 <div class="fourth">
			<p>Fourth</p>
	 </div>
</body>
</html>

div 部分中的表单

我们可以将任何组件放在 div 标签中来包装该组件，这里我们在 HTML <div> 标签内放置一个表单。

例子

让我们看一下以下示例，我们将在其中使用 <div> 标签为表单创建一个部分。然后，我们正在为输入字段创建另一个部分，并在表单中创建一个按钮，用于将字段拆分为单独的部分。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML div tag</title>
	 <style>
			.myForm {
				 width: 300px;
				 height: 250px;
				 background-color: green;
				 border-radius: 10px;
			}

			.myForm h2 {
				 text-align: center;
				 position: relative;
				 top: 10px;
				 color: white;
				 font-family: sans-serif;
			}

			.myForm .fields input {
				 position: relative;
				 top: 20px;
				 border-radius: 5px;
				 width: 80%;
				 margin: 20px auto;
				 display: flex;
				 padding: 10px;
			}

			.myForm button {
				 width: 100px;
				 position: relative;
				 top: 10px;
				 left: 20px;
				 padding: 10px;
				 border-radius: 5px;
			}
	 </style>
</head>
<body>
	 <h3>HTML div Tag Example</h3>
	 <p>
			 Here we have placed a form inside a div, 
			 div is playing the role of wrper for the form.
	 </p>
	 <!--div tag-->
	 <div class="myForm">
			<h2>Login</h2>
			<form>
			<!--div tag-->
			<div class="fields">
				 <input type="text" placeholder="Username">
				 <input type="password" placeholder="password">
				 <br>
				 <button>Login</button>
			</div>
			</form>
	 </div>
</body>
</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - style 标签 HTML - span 标签 >>