div是块级容器，用于划分逻辑区块，需结合CSS/JS实现布局与交互；2. 通过class/id绑定样式，class用于复用，id用于唯一标识；3. 可构建多区域布局如三栏结构；4. 支持JavaScript动态操作内容与样式；5. 应避免过度使用，优先选择语义化标签以提升代码可读性。
HTML中的<div>标签是一个块级通用容器，用于将HTML文档分割为独立的逻辑区块。它本身没有特定语义，主要作用是配合CSS和JavaScript实现页面布局与交互控制。
1. 基本语法结构
<div>标签成对出现，包含开始标签和结束标签，中间可嵌套任意HTML内容：
<div>这里可以放置段落、图片、标题等内容
</div>
实际示例：
<div><h2>文章标题</h2>
<p>这是一段正文内容。</p>
</div>
2. 配合class和id进行样式控制
单独使用<div>无视觉效果，需结合class或id属性定义样式：
立即学习“前端免费学习笔记（深入）”；
- 用class命名一类区块，便于复用样式
- 用id标识唯一区块，常用于JS操作或锚点跳转
CSS中通过选择器绑定样式：
.box { padding: 20px; background-color: #f0f0f0; }
#header { text-align: center; }
</style>
<div class="box">通用样式区块</div>
<div id="header">页头区域</div>
3. 实现页面布局结构
利用多个<div>划分页面区域，例如构建三栏布局：
<div id="container"><div id="header">头部</div>
<div id="main">
<div class="sidebar">侧边栏</div>
<div class="content">主内容区</div>
</div>
<div id="footer">底部</div>
</div>
再通过CSS设置宽度、浮动或Flex布局控制排列方式。
4. 与JavaScript交互操作
为<div>添加id后，可用JavaScript动态修改内容或样式：
<div id="message">初始内容</div><script>
document.getElementById("message").innerHTML = "内容已更新";
document.getElementById("message").style.color = "red";
</script>
基本上就这些。合理使用<div>能提升代码结构清晰度，便于维护和样式管理。注意避免过度嵌套，现代开发推荐在有明确语义时优先使用<header>、<nav>等语义化标签替代纯<div>布局。
