当前位置：首页 > news >正文

Python进阶操作——创建容器

news 2025/7/18 6:36:02

一、创建容器概述

HTML 用容器概念规整网页布局，div 标签是常用容器，可划分网页区域，把相关标签放同一容器，方便统一设置样式、管理布局，让网页结构清晰。

二、`<div>` 标签

（一）作用与说明

用 <div> 标签创建容器，包裹的标签同属一个容器，给 <div> 设 style 样式（通用样式），容器内标签会继承样式（受容器样式影响）。

（二）示例代码

<body><h1>我是标题1</h1><div style="background: antiquewhite"><h2>我是标题2</h2><p>我这里可以输入一个段落</p></div>
</body>

说明：

h1 标签在容器外，不受容器样式（背景色 antiquewhite ）影响。
div 标签创建容器，设背景色，内部 h2、p 标签在容器内，显示时背景会填充为 antiquewhite ，呈现统一区域效果。

三、布局

（一）布局属性说明

通过 <div> 标签 style 属性里的 width（宽度）、height（高度）、float（浮动位置）等属性，实现网页布局控制：

width、height：设容器宽、高，单位常用 px（像素）。
float：控制容器位置，值选 right（靠右）、left（靠左）等，让容器在页面中灵活排列。

（二）示例代码

<body><h1>我是标题1</h1><div style="background: antiquewhite; width: 500px;height: 400px "><h2>我是标题2</h2><div style="background: brown; width: 200px; height:300px;float: left"><p>我这里可以输入一个段落</p><p>python <span style="color:blue">办公</span> 自动化</p></div></div>
</body>

说明：

外层 div 设背景色 antiquewhite 、宽 500px 、高 400px ，作为大容器。
内层 div 设背景色 brown 、宽 200px 、高 300px ，float: left 让其靠左浮动，内部 p 标签等内容在该小容器内展示，通过多层 div 配合属性，实现网页复杂布局规划。