html 是网页骨架，css 是其衣服；link 必须放在 head 中以防闪白，@import 性能差且易出错；选择器失效多因匹配失败、特异性冲突或路径错误。

HTML 和 CSS 是网页的“骨架”与“衣服”关系：HTML 定义内容结构（比如哪些是标题、段落、按钮），CSS 负责控制这些结构的外观（颜色、大小、位置、间距等）。没有 HTML，CSS 无处可作用；没有 CSS，HTML 页面只是纯文本堆叠。

为什么 link 标签必须写在 里

浏览器按顺序解析 HTML，遇到 <link rel="stylesheet"> 才开始下载并应用 CSS。如果把它错放到 底部，页面会先以无样式状态渲染一次（俗称“闪白”），再重绘——用户能看到明显的样式跳变。

• <link> 必须放在 内，且在 <title></title> 之后、<script></script> 之前更稳妥
• 若用 <style></style> 标签，也必须在 中，不能在 里（部分旧浏览器会忽略）
• 现代浏览器支持 media 属性做条件加载，例如 <link media="print" href="print.css">，但基础引入仍需在

@import 和 <link> 的加载行为差异

@import 是 CSS 规则，不是 HTML 标签。它在 CSS 文件内部或 <style></style> 块中使用，但会阻塞后续 CSS 解析和渲染，性能比 <link> 差。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• <link> 是并行加载，浏览器能提前发现并发起请求
• @import url("base.css") 必须写在所有其他 CSS 规则之前，否则整条语句被忽略
• 嵌套 @import（比如 A.css 导入 B.css，B.css 又导入 C.css）会串行加载，拖慢首屏时间
• 除非用于媒体查询隔离（如 @import "theme.css" (prefers-color-scheme: dark)），否则不建议用

CSS 选择器失效的常见原因

即使 <link> 加载成功、路径正确，样式也可能不生效——大概率是选择器没匹配上目标元素。

• 检查 HTML 元素是否有对应 class 或 id，比如写了 .btn 却忘了给按钮加 class="btn"
• 注意大小写和空格：div .header（后代选择器）和 div.header（类名紧贴标签）完全不是一回事
• 特异性冲突：内联 style 属性优先级高于 class，class 高于元素选择器；用浏览器开发者工具的 Elements 面板看哪条规则被划掉
• 拼写错误：backgroud-color 不是 background-color，CSS 不报错，但直接忽略该行

最易被忽略的是路径问题：当 HTML 和 CSS 不在同一目录时，href 的相对路径必须基于 HTML 文件位置计算，不是编辑器当前打开的文件位置。调试时直接在浏览器地址栏访问 http://localhost:5500/style.css 看是否返回 404，比反复检查代码更快。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！