span是HTML5中最轻量的行内语义容器，无默认样式、不换行、不占额外空间，仅用于标记文本片段以供CSS或JS操作；必须用class而非id定义样式，不可包裹块级元素，且需注意可访问性与性能优化。
span 标签本质是纯语义容器，不自带样式
span 是 HTML5 中最轻量的行内元素，它本身没有默认样式、不换行、不占额外空间，只用来“圈出一段文本”供后续加样式或脚本操作。浏览器渲染时，文字 和直接写 文字 在视觉上完全一样——除非你主动加 CSS 或 JS。
给 span 加样式必须用 CSS，不能靠属性
老式写法如 红字 虽能用，但违背现代开发原则；推荐外联或内部 CSS：
span.highlight {
color: #d32f2f;
background-color: #fff3cd;
padding: 0 4px;
border-radius: 3px;
}
使用时：关键参数。注意：不要用 id 给多个 span 做样式，ID 必须唯一；重复样式请用 class。
别把 span 当 div 用，嵌套和语义要守界
立即学习“前端免费学习笔记（深入）”； 用 JavaScript 修改 span 只能包裹**短文本片段**，不能放块级元素（如 、），否则 HTML 会自动修复结构，导致意料外的 DOM 变形：JS 操作 span 要防动态内容丢失样式
span 内容时（比如 el.innerHTML = "新文本"），原有 class 不会丢，但若整个替换外层 HTML（如 parent.innerHTML = "..."），就得确保 class 名拼写正确且 CSS 已加载。
实际项目里，document.querySelector("span.tip") 返回 null —— 检查是否 DOM 尚未就绪，或 class 名写成 tip 却在 CSS 里定义了 .tips
span 样式，优先用 CSS 类切换（el.classList.add("active")），而非直接改 style.color
aria-label，例如 ✗
span 最容易被滥用成“万能包裹器”，结果样式错乱、语义模糊、JS 选中失败。它的价值不在功能多，而在足够干净——只负责标记，其余交给 CSS 和 JS 各司其职。
