HTML与CSS是分工关系而非配合关系：HTML负责语义化内容结构，CSS负责视觉表现，二者解耦才能保障可维护性、可访问性与适配性。
HTML 和 CSS 不是“配合关系”，而是明确的分工关系：HTML 负责内容结构，CSS 负责视觉表现，二者解耦才能真正实现可维护、可访问、可适配的网页。
HTML 是内容骨架，不是样式容器
HTML 标签如 <h1>、<p>、<article> 的本质作用是表达语义和层级，不是为了“方便加样式”。比如用 <div> 套五层再加 class="red-big-title" 来模拟 <h1>，既破坏语义，又让屏幕阅读器失效，还增加 CSS 选择器复杂度。
- 正确做法：先按内容逻辑选标签（
<nav>用于导航，<time>用于日期），再用 CSS 控制它长什么样 - 错误信号：CSS 里出现大量
div:nth-child(3) > span:last-of-type这类强依赖 DOM 深度的选择器——说明 HTML 结构没语义化 - 影响：无 CSS 时页面仍需可读、可操作；搜索引擎和辅助技术只认 HTML 语义，不认 class 名
CSS 选择器绑定的是 HTML 元素，不是 class 名本身
CSS 不靠 class 名“记住”样式，而是靠选择器实时匹配当前 HTML 结构。一个 class="btn" 在 <button> 上和在 <span> 上，语义完全不同，但 CSS 规则若只写 .btn { ... } 就会一视同仁——这容易掩盖语义错位问题。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐写法：
button.btn { ... }或.header-nav a { ... }，把语义约束写进选择器 - 注意点：
id选择器虽快，但全局唯一性导致复用困难，现代项目基本只用class+ 元素组合 - 性能提示：浏览器从右往左解析选择器，
div .content p em比em多三步匹配，简单场景直接用em
外边距重叠（margin-collapse）是 HTML 盒模型与 CSS 渲染规则共同作用的结果
margin-collapse 不是 bug，是 CSS 规范对块级元素垂直外边距的主动合并行为，但它只发生在常规文档流中的相邻块容器之间——也就是说，它依赖 HTML 元素的 display 类型和嵌套关系。
立即学习“前端免费学习笔记（深入）”；
- 触发条件：两个同为
display: block的兄弟<p>，且中间无边框、内边距、行内内容等隔离物 - 常见误判：给父容器加
overflow: hidden或padding: 0.1px能阻止 collapse，但这只是绕过问题，没解决语义冗余（比如连续多个<p>本就该用间距系统重设） - 更稳方案：用
gap替代 margin（需父容器display: flex或grid），或统一用margin-block配合margin-block-start等逻辑属性
最常被忽略的一点：所谓“HTML+CSS 构建网页”，实际是 HTML 提供可验证的结构树，CSS 提供可计算的样式层，两者在浏览器中经由渲染引擎合成像素——这个过程里，任何一方的松散设计（比如随意嵌套 <div>、滥用 !important）都会让另一方失去控制力。
