标记用作 html 元素的容器。借助此标签，我们可以轻松定义 html 文档的一部分。它还用于将大部分 html 元素分组在一起并轻松格式化它们。 标签与块级元素一起使用。
标记接受所有 CSS 属性，并使用 class 和 id 等属性设置其中元素的样式。
语法
以下是 标记的语法。
<div class='division'>Content…</div>
示例 1
下面给出了一个在 HTML 中向 div 标签添加样式的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
box-shadow: 2px 2px 20px 23px aquamarine;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
background-color: #2ecc71;
color: white;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<div class='division'>div tag 3</div>
</div>
</body>
</html>
以下是上述示例程序的输出。
立即学习“前端免费学习笔记（深入）”；
我们可以向标签添加更多样式。
示例 2
下面给出了在 HTML 中向 div 标记添加样式的另一个示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
box-shadow: 2px 2px 20px 23px aquamarine;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
background-color: #2ecc71;
color: white;
text-transform: uppercase;
text-decoration: underline;
font-family: cursive;
font-size: 1.2rem;
font-weight: bolder;
font-style: italic;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<div class='division'>div tag 3</div>
</div>
</body>
</html>
以下是上述示例程序的输出。
立即学习“前端免费学习笔记（深入）”；
示例 3
您可以尝试运行以下代码以使用 标记设置 HTML 元素的样式。添加的样式规则将应用于 id=”content” 的元素。这里的 id 是 CSS 选择器。
<!DOCTYPE html>
<html>
<head>
<style>
#container p {
line-height: 15px;
margin: 20px;
padding-bottom: 15px;
text-align: justify;
width: 130px;
color: blue;
}
</style>
<title>HTML div Tag</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div id = "container">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>
</html>
