首页技术文章正文

HTML容器标签div详细介绍【前端开发】

更新时间:2023-03-03 来源:黑马程序员 浏览量:

div是英文“division”的缩写,中文译为“分割、区域”。<div>标签可以简单理解成一个容器,用于容纳网页中的文本模块、图像模块,从而实现网页的规划和布局。<div>标签可以容纳段落、标题、表格、图像等各种网页元素,即大多数HTML标签都可以嵌套在<div>标签中;此外,标签中还可以嵌套多层标签。下面通过一个案例来演示<div>标签的用法,如下所示。

<!doctype html>
<htnl><head>
<meta charset="utf-8">
<title>div标签的使用</title>
</head>
<body>
<div style-"width:980px:margin:0 auto! padding:20px 0; background:tcoc:">
   <div style="height:60px;background:EFO:">头部</div>
   <div atyle-"height:200px: background:#0C0:">内容</div>
   <div style-"height:60px;background:#6CF;“>页脚</div>
</div>
</body>
</html>

在上例中,第7~ll行代码使用4个<div>标签对页面进行布局,其中,最外层的标签用于整体控制页面版式,里面嵌套的3个<div>标签分别用于布局页面头部、内容和页脚。代码中的“style=…”,用于为各个<div>标签定义样式(style属性的相关内容将在后面的项目中详细讲解,这里了解即可)。效果如图所示。

1677813032246_51.png

<div>标签最大的意义在于可与浮动属性float配合,进行网页布局,即常说的“DIV+CSS”网页布局。对于浮和布局这里了解即可,后面的内容将会详细介绍。<div>标签可以替代块级元素(如<b>标签、<p>标签等),但是它们在语义上有一定的区别。例如,标签和<h2>标签的不同在于,<h2>标签具有特殊的含义,语义较重,代表着标题,而<div>标签只是代表一个元素。


分享到:
在线咨询 我要报名
和我们在线交谈!