CSS外部样式表引用需完整路径、删html标签修复的原因

你删掉<html lang="en" dir="ltr">后样式恢复正常，和Mac/Windows的系统差异、斜杠方向没有直接关系，核心是不规范的HTML结构触发了浏览器解析异常。

• 按照HTML标准，<html>是整个文档的唯一根节点，页面里所有内容（包括<head>里的样式引用、<body>里的可见内容）都必须嵌套在<html>标签内部。如果你写的这个<html>标签存在漏写闭合符、位置放错（比如把<head>写到了<html>外面）、拼写错误的问题，浏览器解析DOM树时会直接打乱结构，此时相对路径的解析基准会出错：本来应该以当前HTML文件所在文件夹为起点找资源，结果浏览器按照异常的源地址拼接路径，自然找不到对应的CSS文件。
• 你之前猜Windows要写反斜杠\是典型误区：所有Web场景下的路径都统一用正斜杠/做目录分隔符，不管是Windows、Mac还是Linux服务端，css/styles.css都是标准正确写法，反斜杠在Web路径里会被识别成转义字符，反而会导致路径解析失败。
• 你之前写的Web Development\css\styles.css这类路径本身也不符合相对路径规则：如果CSS文件夹和当前HTML文件同级，直接写css/styles.css即可；如果要找上一级目录的资源，要写../开头的路径，直接写文件夹名开头浏览器会默认从当前目录往下找。

• 把<html lang="en" dir="ltr">标签加回来，先核对整个HTML的基础结构是否正确，标准结构顺序如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <!-- 页面内容写在这里 -->
  </body>
</html>

• 检查所有标签是否正确闭合，不要出现交叉嵌套、标签漏写结束标记的问题。
• 所有资源路径统一用正斜杠/写分隔符，不要用Windows本地路径的反斜杠。
• 如果调整后还是加载失败，按F12打开浏览器开发者工具，切到「网络」面板看CSS请求的实际地址，和你本地CSS文件的存放位置对比，就能直接定位路径拼接的错误点。
• 开发阶段不要写C盘开头的本地绝对路径，后续项目迁移、部署到服务器时这类路径会全部失效，完全无法复用。

内容的提问来源于stack exchange，提问作者Ampersands