您可以想到三个主要块的网页。你有标题和页脚在主体之间。但是，在查看任何网页时，您也可以看到身体也是由部分组成的。可能有一个用于产品和服务的部分，推荐，团队成员，联系信息等。
这些部分中的每一个看起来可能有些不同。也许它们具有不同的颜色和字体。也许有一个视差背景一个有视频背景。也许一个由多行和列组成，依此类推。
由于内容分割元素在html。该元素更名为“ DIV”，可以将您的网页分为部分，因此您可以使用唯一的CSS属性来定位它们。
在这篇文章中，我们将仔细研究一下此元素是什么，确切的作用以及为什么要在自己的网站上使用它。
HTML中的标签是什么？
在HTML中，
标签是其他元素的通用块级容器。
在HTML中，
让我们看一下此定义中的一些关键术语。
首先，DIV是一个“通用”容器，因为它不描述其包含的内容。其他元素，例如
其次，DIV是一个块级容器。要了解这意味着什么，让我们将DIV与跨度元素进行比较，该元素是一个内联容器。
这是块级和内联容器之间的几个关键区别。例如，DIV始终以自己的直线开始，而跨度则保持在线（排队- 得到它？）。DIV还占据了页面的完整宽度，而跨度不占据。这意味着，如果您连续有多个Div，它们将在前端彼此堆叠。另一方面，跨越可以并排存在。最后的主要区别是，您可以定义DIV的高度和宽度，但是您不能跨度。
第三，可以包含在DIV中的元素更明确地称为“可触及的内容”或“流量内容”。可触及的内容基本上是任何包含文本或嵌入式内容的HTML元素，而流内容基本上是HTML文档主体中使用的任何元素。因此，锚，块引用，音频，图像，段落和标题元素都被视为可显着或流动内容，并且可以放置在DIV中。
标签在HTML中位于哪里？Divs进入HTML文件的主体部分。这显然由HTML文件中的
标签标记。（注意：这些标签通常在代码编辑器中遗漏，例如Codepen。）要创建DIV元素，您必须使用开口和关闭标签。您可以将要组合在一起的元素在这些标签中。通常，这些会显得缩进，如下所示。
这是DIV元素中的标题
这是Div元素中的一些文本。
现在，我们了解了HTML中DIV元素的定义和语法，让我们仔细研究它的确切作用。
Div做什么？
标签从技术上看不做任何事情。它可以帮助将HTML文件整理到后端的部分中，但这不会影响这些部分在前端的显示方式。但是，它确实使这些部分可以轻松使用CSS进行样式。要使用CSS样式，您必须在DIV元素中添加类或ID属性。然后您将使用CSS选择器将独特的样式属性应用于Div中包含的元素。
在我们以CSS为例之前，让我们首先看看一个未经风格的DIV元素的示例。
这是HTML和结果：
看到笔XWMWMYO克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。
既然您知道DIV元素并不能自行执行任何操作，那么您可能想知道为什么您甚至会使用一个。我们将在下面查看一些用例。
为什么在HTML中使用DIV？
最常见的是，您将使用DIV元素将要针对CSS定位的代码组进行组。您可以样式的它们看起来与页面上的其他部分不同，或者以不同的方式定位它们。您还可以使用DIV和语言属性来更改页面上特定部分的语言。
在下面，让我们仔细研究这些用途情况。
标签示例标签最好用于添加样式或标记连续元素共有的语义。以下是您可以使用DIV元素添加样式或语义的一些示例。示例1：带有lang属性的标签让我们从最简单的例子开始。说网页上文本的默认语言是英语，但一节是另一种语言。要在网页上标记此特定部分，只需将元素放置在Div中。然后，添加语言属性并将其设置为所需的语言。为了这个演示，我将其设置为法语。
这是HTML：
<文章lang =“ en”>
网页的默认语言是英语。但是以下是法语的句子，在代码中相应地标记。
Dans leNumérode Novembre de Marie Claire，Une Erreur S'estGlisséeDansla Rubrique Modeautherités。
这是DIV元素之外的英语文本。
这将立即设置DIV内部的标题和段落的语言，因此您不必单独设置每个元素的语言。DIV以外的元素仍将设置为默认语言（英语）。
现在，让我们看一个示例，说明您何时使用DIV更改网页部分的外观。
示例2：带有类属性的标签
要更改DIV的样式，您将以与上面的方式相同的方式开始，但是您不会添加语言属性，而是添加ID或类属性。然后，您将使用相应的选择器添加所需的CSS。
假设您想在页面上定型特定的标题和段落，然后将其余的不风格。然后，您将单个标题和段落包裹在DIV元素中，并给它一个类名。为了这个演示，我们将使用“ myDiv”作为班级名称。
这是HTML：
这是DIV元素中的标题
这是Div元素中的一些文本。
这是Div元素之外的一些文字。
然后，在HTML文档的头部或外部样式表中，您可以使用类Selector .MyDiv并定义所需的任何CSS属性。对于此演示，我们将使用边界，背景颜色，，，，文本一致， 和颜色属性。
这是CSS：
.mydiv {
字体家庭：“ Avenir Next Lt Pro”；
字体重量：大胆；
边界：5PX发行＃00A4BD;
颜色：＃2D3E50;
背景色：＃eaf0f6;
文本合格：中心；
}
这是结果：
看到笔风格的Div克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。
示例3：标记为Flexbox现在，让我们看一个示例，说明您何时使用div更改网页部分的定位或布局。
说，我想创建一个带有七列的Flexbox网格。首先，我将创建七个DIV元素，然后将它们放在另一个DIV元素中。我会将.flex-container类添加到此父级。
这是HTML：
<身体>
Flexbox容器
请注意，随着浏览器的调整，弹性项目如何收缩和扩展，但是一旦视口超出特定点，就不会填充整个容器。
1 2 3 4 5 6 7
Divs进入HTML文件的主体部分。这显然由HTML文件中的
标签标记。（注意：这些标签通常在代码编辑器中遗漏，例如Codepen。）要创建DIV元素，您必须使用开口和关闭标签。您可以将要组合在一起的元素在这些标签中。通常，这些会显得缩进，如下所示。
这是DIV元素中的标题
这是Div元素中的一些文本。
现在，我们了解了HTML中DIV元素的定义和语法，让我们仔细研究它的确切作用。
Div做什么？
要使用CSS样式，您必须在DIV元素中添加类或ID属性。然后您将使用CSS选择器将独特的样式属性应用于Div中包含的元素。
在我们以CSS为例之前，让我们首先看看一个未经风格的DIV元素的示例。
这是HTML和结果：
看到笔XWMWMYO克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。
既然您知道DIV元素并不能自行执行任何操作，那么您可能想知道为什么您甚至会使用一个。我们将在下面查看一些用例。
为什么在HTML中使用DIV？
最常见的是，您将使用DIV元素将要针对CSS定位的代码组进行组。您可以样式的它们看起来与页面上的其他部分不同，或者以不同的方式定位它们。您还可以使用DIV和语言属性来更改页面上特定部分的语言。
在下面，让我们仔细研究这些用途情况。
标签示例标签最好用于添加样式或标记连续元素共有的语义。以下是您可以使用DIV元素添加样式或语义的一些示例。示例1：带有lang属性的标签让我们从最简单的例子开始。说网页上文本的默认语言是英语，但一节是另一种语言。要在网页上标记此特定部分，只需将元素放置在Div中。然后，添加语言属性并将其设置为所需的语言。为了这个演示，我将其设置为法语。
这是HTML：
<文章lang =“ en”>
网页的默认语言是英语。但是以下是法语的句子，在代码中相应地标记。
Dans leNumérode Novembre de Marie Claire，Une Erreur S'estGlisséeDansla Rubrique Modeautherités。
这是DIV元素之外的英语文本。
这将立即设置DIV内部的标题和段落的语言，因此您不必单独设置每个元素的语言。DIV以外的元素仍将设置为默认语言（英语）。
现在，让我们看一个示例，说明您何时使用DIV更改网页部分的外观。
示例2：带有类属性的标签
要更改DIV的样式，您将以与上面的方式相同的方式开始，但是您不会添加语言属性，而是添加ID或类属性。然后，您将使用相应的选择器添加所需的CSS。
假设您想在页面上定型特定的标题和段落，然后将其余的不风格。然后，您将单个标题和段落包裹在DIV元素中，并给它一个类名。为了这个演示，我们将使用“ myDiv”作为班级名称。
这是HTML：
这是DIV元素中的标题
这是Div元素中的一些文本。
这是Div元素之外的一些文字。
然后，在HTML文档的头部或外部样式表中，您可以使用类Selector .MyDiv并定义所需的任何CSS属性。对于此演示，我们将使用边界，背景颜色，，，，文本一致， 和颜色属性。
这是CSS：
.mydiv {
字体家庭：“ Avenir Next Lt Pro”；
字体重量：大胆；
边界：5PX发行＃00A4BD;
颜色：＃2D3E50;
背景色：＃eaf0f6;
文本合格：中心；
}
这是结果：
看到笔风格的Div克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。
示例3：标记为Flexbox现在，让我们看一个示例，说明您何时使用div更改网页部分的定位或布局。
说，我想创建一个带有七列的Flexbox网格。首先，我将创建七个DIV元素，然后将它们放在另一个DIV元素中。我会将.flex-container类添加到此父级。
这是HTML：
<身体>
Flexbox容器
请注意，随着浏览器的调整，弹性项目如何收缩和扩展，但是一旦视口超出特定点，就不会填充整个容器。
1 2 3 4 5 6 7
让我们从最简单的例子开始。说网页上文本的默认语言是英语，但一节是另一种语言。要在网页上标记此特定部分，只需将元素放置在Div中。然后，添加语言属性并将其设置为所需的语言。为了这个演示，我将其设置为法语。 这是HTML： <文章lang =“ en”> 网页的默认语言是英语。但是以下是法语的句子，在代码中相应地标记。 Dans leNumérode Novembre de Marie Claire，Une Erreur S'estGlisséeDansla Rubrique Modeautherités。 这是DIV元素之外的英语文本。 这将立即设置DIV内部的标题和段落的语言，因此您不必单独设置每个元素的语言。DIV以外的元素仍将设置为默认语言（英语）。 现在，让我们看一个示例，说明您何时使用DIV更改网页部分的外观。 要更改DIV的样式，您将以与上面的方式相同的方式开始，但是您不会添加语言属性，而是添加ID或类属性。然后，您将使用相应的选择器添加所需的CSS。 假设您想在页面上定型特定的标题和段落，然后将其余的不风格。然后，您将单个标题和段落包裹在DIV元素中，并给它一个类名。为了这个演示，我们将使用“ myDiv”作为班级名称。 这是HTML： 这是Div元素中的一些文本。 这是Div元素之外的一些文字。 然后，在HTML文档的头部或外部样式表中，您可以使用类Selector .MyDiv并定义所需的任何CSS属性。对于此演示，我们将使用边界，背景颜色，，，，文本一致， 和颜色属性。 这是CSS： .mydiv { 字体家庭：“ Avenir Next Lt Pro”； 字体重量：大胆； 边界：5PX发行＃00A4BD; 颜色：＃2D3E50; 背景色：＃eaf0f6; 文本合格：中心； } 这是结果： 看到笔风格的Div克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。 现在，让我们看一个示例，说明您何时使用div更改网页部分的定位或布局。 说，我想创建一个带有七列的Flexbox网格。首先，我将创建七个DIV元素，然后将它们放在另一个DIV元素中。我会将.flex-container类添加到此父级。 这是HTML： <身体> 请注意，随着浏览器的调整，弹性项目如何收缩和扩展，但是一旦视口超出特定点，就不会填充整个容器。示例1：
示例2：带有类属性的标签
这是DIV元素中的标题
示例3：
Flexbox容器
