div标签

标签对儿，用来将相关的内容组合到一起，以便和其他内容进行分隔，使文档结构更加清晰。div就是division(分割)的前三个字母。

也就是说，一个网页，可以分割成不同的部分，每一个部分都可以放到一个div标签当中。

比如说，一个网站的首页，往往会包含头部、轮播图、页面主体、底部等几大部分，这每一个部分，都需要放到

标签对儿当中。而且，每一个大的部分，有可能还会进行进一步的分割，比如网页的头部，一般会包括logo、导航栏等更小的部分，那么logo和导航栏就需要分别用两个div标签对儿来包裹。

div css布局

是最为常见的HTML标签，它相当于是划分网页结构的工具，通常前端工程师用div标签，结合css来实现网页的布局，这种方式叫做”div css”布局形式。

div就像是一个容器，可以用它来容纳任何东西，因此div也习惯被称为”盒子”。

所以说，咱们的网页是由众多的”盒子”嵌套组成的。

我们在Chrome浏览器(Chrome浏览器的开发辅助功能比较强大)中打开京东这个网站，然后在网页的空白处右键点击”检查“，

然后就会弹出网页的控制台面板，然后在控制台面板中点击”Elements“这个选项卡，就能在控制台看到这个网页的HTML代码结构。

这时你就会看到有很多div标签。你把鼠标随便放到一个div标签上，控制台上方的网页的相应部分就会变成蓝色的。div标签是网页中使用最多、最频繁的标签。

以上的演示是为了说明div的作用。

接下来我打开vscode编辑器，打开之前写的first.html这个文件，用div标签来让它的代码结构更清晰。

比如说现在这个网页的头部，包含一个logo的部分和网页的标题，网页标题就是h1标签。logo部分，我用div标签进行分割。然后给logo部分和网页标题外面用div标签包裹起来，就表示这一部分是网页的头部。

下面的所有部分可以看做这个网页的主体部分，我用一个div标签把它们整体包裹起来。

上海简介

上海的地理环境

位置

上海在中国的东部沿海地区。

上海市位于东经120°52′至122°12′，北纬30°40′至31°53′之间。

气候

上海属亚热带季风性气候，四季分明，日照充分，雨量充沛。上海气候温和湿润，春秋较短，冬夏较长。2013年，全市平均气温17.6℃，日照1885.9小时，降水量1173.4毫米。全年60%以上的雨量集中在5月至9月的汛期。

水文

上海市地处长江入海口、太湖流域东缘。境内河道（湖泊）面积约500多平方公里，河面积率为9%～10%；上海市河道长度2万余公里，河网密度平均每平方公里3公里～4公里。境内江、河、湖、塘相间，水网交织，主要水域和河道有长江口，黄浦江及其支流吴淞江（苏州河）、蕰藻浜、川杨河、淀浦河、大治河、斜塘、圆泄泾、大泖港、太浦河、拦路港，以及金汇港、油墩港等。

上海的自然资源

矿产

境内缺乏金属矿产资源，建筑石料也很稀少，陆上的能源矿产同样匮乏。70年代以来开始在近海寻找油气资源，在多口钻井中获得工业原油和天然气。据初步估算，东海大陆架油气资源储量约有60亿吨，是中国近海海域最大的含油气盆地。

生物

上海市境内天然植被残剩不多，绝大部分是人工栽培作物和林木。天然的木本植物群落，仅分布于大金山岛和佘山等局部地区，天然草本植物群落分布在沙洲、滩地和港汊。栽培的农作物共有100多个种类，近万个品种。

上海的人口

年龄

上海市统计局最新发布的统计公报显示，2015年末上海市常住人口总数为2415.27万人，相比2014年末减少10.41万人

性别

全市常住人口中，0-14岁的人口为1985634人，占8.63%；15-64岁的人口为18703674人，占81.25%；65岁及以上的人口为2329840人，占10.12%。

主体部分还可以再进一步分割，比如每一个h2还可以分割成一个单独的部分。

上海简介

上海的地理环境

位置

上海在中国的东部沿海地区。

上海市位于东经120°52′至122°12′，北纬30°40′至31°53′之间。

气候

上海属亚热带季风性气候，四季分明，日照充分，雨量充沛。上海气候温和湿润，春秋较短，冬夏较长。2013年，全市平均气温17.6℃，日照1885.9小时，降水量1173.4毫米。全年60%以上的雨量集中在5月至9月的汛期。

水文

上海市地处长江入海口、太湖流域东缘。境内河道（湖泊）面积约500多平方公里，河面积率为9%～10%；上海市河道长度2万余公里，河网密度平均每平方公里3公里～4公里。境内江、河、湖、塘相间，水网交织，主要水域和河道有长江口，黄浦江及其支流吴淞江（苏州河）、蕰藻浜、川杨河、淀浦河、大治河、斜塘、圆泄泾、大泖港、太浦河、拦路港，以及金汇港、油墩港等。

上海的自然资源

矿产

境内缺乏金属矿产资源，建筑石料也很稀少，陆上的能源矿产同样匮乏。70年代以来开始在近海寻找油气资源，在多口钻井中获得工业原油和天然气。据初步估算，东海大陆架油气资源储量约有60亿吨，是中国近海海域最大的含油气盆地。

生物

上海市境内天然植被残剩不多，绝大部分是人工栽培作物和林木。天然的木本植物群落，仅分布于大金山岛和佘山等局部地区，天然草本植物群落分布在沙洲、滩地和港汊。栽培的农作物共有100多个种类，近万个品种。

上海的人口

年龄

上海市统计局最新发布的统计公报显示，2015年末上海市常住人口总数为2415.27万人，相比2014年末减少10.41万人

性别

全市常住人口中，0-14岁的人口为1985634人，占8.63%；15-64岁的人口为18703674人，占81.25%；65岁及以上的人口为2329840人，占10.12%。

这样就会让代码结构更加的清晰，这就是div的作用。当然，现在我们还没学习css，等学了css之后，就会在浏览器中看到更明显的效果。

关注我，一起成为基础扎实的全栈工程师