基础div容器直接写即可，它原生支持、无需声明；空div默认高度为0，需内容或CSS（如height、border）使其可见；注意闭合顺序、避免语义缺失，优先使用HTML5语义标签替代。
怎么用 HTML 写一个基础的 div 容器
直接写 <div></div> 就行，不需要额外声明或引入。它本身是 HTML5 的语义中性容器，浏览器原生支持，所有现代浏览器（包括 IE9+）都能解析。
常见错误是套着用错闭合顺序，比如：<div>
<div></div> 忘记外层闭合，导致后续布局错乱；或者误以为要加 <code>type 或 class 才能生效——其实空 div 也能渲染，只是默认不占空间（高度为 0），看不见而已。
- 想让它“看得见”，至少得给点内容、
height、padding或border - 想让它“撑开父容器”，避免父级塌陷，常用
overflow: hidden或伪元素清除浮动（如果内部有浮动子元素） - 不要在
<table> 内部直接塞 <code>div做布局——老式邮件客户端或部分 CMS 渲染会出问题给
div加类名和 ID 时要注意什么类名（
class）用于复用样式或 JS 选择，ID（id）用于唯一锚点或单次操作。两者都只是字符串，但命名规则影响可维护性和 CSS 优先级。容易踩的坑：用数字开头（如
id="1box"）、含空格或特殊符号（class="my-container!"）、大小写混用后 JS 查询失败（document.getElementById("MyBox")找不到id="mybox"）。立即学习“前端免费学习笔记（深入）”；
-
class名建议全小写 + 连字符（header-main），避免下划线（某些旧 CSS 预处理器对下划线有特殊处理） -
id值必须全局唯一，重复会导致getElementById只返回第一个匹配项 - 如果用 JS 动态生成多个
div，别硬编码相同id，改用data-id属性替代
CSS 布局中
div的 display 行为差异div默认是display: block，独占一行、宽度自动填满父容器。但一旦改了display，它的盒模型行为就变了，直接影响布局流。典型问题：设了
display: inline-block后元素间莫名多出几像素空白；设了display: flex后子元素的float或vertical-align失效。-
inline-block的空白来自 HTML 换行符和空格，解决方法要么删 HTML 空格，要么父级设font-size: 0（记得子级重设字体大小） -
flex或grid容器里的子div，width和height可能被弹性算法覆盖，需配合flex-basis或min-width控制 - 绝对定位（
position: absolute）的div会脱离文档流，父容器可能塌陷——这时候不能只靠它撑高，得手动设父级高度或用其他元素占位
什么时候不该用
div？替代方案有哪些当容器有明确语义时，
div就不是最优选。比如页眉、导航、文章段落、侧边栏，HTML5 提供了更准确的标签，对 SEO、屏幕阅读器和维护性都有实际影响。强行用
div套一堆class="nav"或class="article"，不如直接用<nav></nav>或<article></article>。浏览器不认识这些 class，但认识语义标签。- 标题区域优先用
<header></header>，不是<div class="header"> <li>导航菜单用 <code><nav></nav>，里面套<ul><li></ul>，而不是<div><div><div> <li>表单区域用 <code><form></form>包裹，而非<div class="form-wrapper"> —— 否则 <code>submit事件监听可能漏掉语义标签不是“必须”，但跳过它们意味着你主动放弃了结构化信息，后面加 ARIA、做无障碍适配、甚至简单调试 DOM 结构时，都会多绕半步。
-
