本文详解 vs code 中 html 无法加载外部 css 的常见原因，重点纠正 `` 标签的 `rel` 属性错误（应为 `stylesheet` 而非 `style`）及缺失 `
` 结构问题，并提供完整可运行示例。在 VS Code 中编写前端页面时，新手常遇到“CSS 写对了，但样式完全不生效”的问题——这往往并非语法错误，而是 HTML 文档结构或资源链接配置不当所致。你提供的代码中存在两个关键问题，直接导致外部 CSS 文件 style.css 未被浏览器识别和应用。
✅ 正确写法：语义化 <head> + 规范 rel 属性
HTML 规范要求所有元数据、标题及外部资源（如 CSS、图标、脚本）应置于 <head> 元素内。而 <link> 标签的 rel（relationship）属性必须使用标准值 stylesheet，表示该资源是用于渲染的层叠样式表。rel="style" 是无效值，浏览器会忽略该链接。
修正后的 HTML 结构如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>WHY</title> <link rel="stylesheet" href="style.css"> <!-- ✅ 正确：rel="stylesheet"，且位于 <head> 内 --> </head> <body> <h1>rozkaz</h1> <p>smiech</p> <b>haha</b> <em>hehe</em> <mark style="background-color: blue;">hihi</mark> <p>Das ist <del>ein</del> kein Hund.</p> <p>Das ist <del>ein</del> <ins>kein</ins> Hund.</p> <sup>hoho</sup> </body> </html>
? 验证要点： 确保 style.css 与 HTML 文件在同一目录下； 检查文件名大小写是否完全一致（如 Style.CSS ≠ style.css，尤其在 Linux/macOS 系统中）； 在浏览器中按 F12 打开开发者工具 → 切换到 Network 标签 → 刷新页面，观察 style.css 是否显示为 200 OK（而非 404）； 若仍不生效，可在 Elements 面板中选中 <h1>，右侧 Styles 面板查看是否加载并应用了 h1 { color: bisque; }。
? 补充建议（提升开发健壮性）
- 始终声明 <!DOCTYPE html>：避免浏览器进入怪异模式（Quirks Mode），影响 CSS 解析；
- 移除空 <style> 标签：未使用时无需保留，减少冗余；
- 路径支持相对/绝对：若 CSS 在子目录（如 css/style.css），则 href 应写为 css/style.css；
- VS Code 提示辅助：安装扩展 Auto Rename Tag 和 IntelliSense for CSS class names，可实时校验标签与类名。
只要确保 <head> 结构完整、rel="stylesheet" 拼写准确、路径无误，外部 CSS 即可立即生效。这不是 VS Code 的限制，而是 HTML 标准的强制要求——掌握它，是你迈向专业前端开发的第一步。
立即学习“前端免费学习笔记（深入）”；
