div是块级元素，span是行内元素：div默认独占一行、撑满父宽、支持完整盒模型；span默认不换行、宽高由内容决定、垂直margin/padding无效；语义上div用于结构布局，span用于文本局部样式化。
div 和 span 的本质区别在哪
别被“容器”这个词带偏——div 和 span 都不自带语义，但它们的默认显示行为完全不同，这直接决定你能不能用对。
-
div是块级元素：默认独占一行，宽度撑满父容器，高度随内容自动撑开；适合划分大区域（比如页头、侧栏、文章区） -
span是行内元素：不换行，只包裹文字或小片段，宽高由内容决定；适合局部样式干预（比如给某几个字加背景色、加 tooltip） - 误用后果：把
span当成布局盒子用，会导致文字挤成一排、margin 失效；反过来把div塞进段落里，会强制断行、破坏阅读流
什么时候该用 div，什么时候该用 section 或 article
HTML5 引入了语义化标签，div 不再是唯一选择。关键看内容有没有明确含义：
- 用
div：纯视觉分组、无明确语义的布局层（比如轮播图外层 wrapper、浮动清除容器） - 用
section：有标题、逻辑上自成一节的内容块（如“产品特性”“客户评价”），必须配h1–h6 - 用
article：能独立存在、可被 RSS 订阅或单独分享的内容（如一篇博客、一条新闻、一个评论） - 注意：
section和article本身也是块级元素，但浏览器对它们的默认样式和辅助技术（如读屏器）处理更友好
class 和 id 在容器标签里怎么选
这两个属性不是装饰，而是 CSS 和 JavaScript 的入口。选错会影响后续维护和性能：
-
id必须全局唯一，且只能用一次：适合锚点跳转（href="#contact"）、单个组件控制（如document.getElementById("modal")） -
class可重复使用：适合批量样式（class="btn primary"）、组件复用（多个卡片共用card类） - 常见坑：
id写成id="header"然后在页面里用了两次 → CSS 生效但 JS 获取时只拿到第一个；class起名太泛（如class="box"）导致后期难以定位和覆盖
嵌套 div 的边界在哪
写 HTML 很容易陷入“套娃”陷阱：div 里套 div，再套 div。这不是语法错误，但会带来实际问题：
- 可访问性下降：屏幕阅读器需要逐层遍历，过多嵌套增加理解成本
- CSS 选择器变重：写
.wrapper .container .content p比写.article-content p更难维护、性能略差 - 建议原则：每多一层
div，先问自己——这一层是否承担了明确的布局职责？能否用语义标签替代？能否合并到上层样式中？ - 真实底线：只要不影响结构清晰度和可维护性，2–3 层嵌套是常态；超过 4 层就要警惕，大概率说明结构设计或 CSS 组织出了问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
