div 与 span 本身没有任何语义

它们是「我不知道该用什么标签时的容器」，只负责把一组元素圈在一起，好让 CSS 或 JS 找到它们。

块级 vs 行内

block：独占一行，前后自动断开。div
也是 block，紧挨着上一行下面。div

段落里可以插入 inline 的 span，它不换行、只包住内容宽度，能跟着文字流走。span

常见的行内元素：a、span、strong、em、code、img、small。常见的块级元素：div、p、h1–h6、ul/ol、li、section、article、table、form、figure、pre、blockquote。

「行内元素里能不能放块级元素？」——默认不能（<span><div> 不合法），但 <a> 和 <button> 例外：现代 HTML 允许 <a> 包住整块内容（卡片整体可点就是这么做的），只要里面不再套另一个 <a>。

class 与 id 的边界

id 全站唯一，用途只有三个：锚点跳转目标（#id）、被 for="id"/aria-labelledby="id" 指向、被脚本 getElementById 抓。不要用 id 写 CSS 选择器，它的优先级过高（100），后面想覆盖只能加 !important。

class 可重复、可多个：class="btn btn--primary is-disabled" 是常规写法——基础样式 + 变体 + 状态分开。本站用的就是这套 BEM 风格的命名。

嵌套与缩进

正确示范（缩进体现层级，闭合标签成对）：

<div class="card">
  <h3 class="card__title">标题</h3>
  <div class="card__body">
    <p>正文</p>
  </div>
</div>

反例：<b><i>文字</b></i> 交叉嵌套是非法的，浏览器会强行「就近闭合」，结果与你想的完全不同。写 HTML 时把「后开的标签先关」当成铁律，编辑器（VS Code 装 indent-rainbow 之类）能直接把这类错误显示出来。