本地Chrome打开HTML文件CSS不生效、静态资源未加载问题咨询

CSS未加载的核心问题是HTML中引入CSS的<link>标签属性书写完全错误，和Chrome本地文件访问限制无关。
你当前写的link标签存在3处语法错误，浏览器无法识别这是CSS资源引入声明，因此根本不会发起对index.css的请求，自然不会在Sources面板显示、也不会应用样式：

• 引入外部资源的路径属性错误：link标签用href属性指定资源路径，你错用了script标签的src属性
• 资源关系属性错误：标识当前引入资源是样式表的属性是rel，你错写为ref
• 属性语法错误：type属性后错用冒号而非等号，且HTML5标准下引入CSS无需额外写type属性
  另外在线运行环境能正常生效，是因为多数在线代码编辑器会自动修正HTML标签的书写错误，不会把错误代码直接交给浏览器解析，所以你没感知到语法问题。

将head区域内错误的link标签替换为以下正确写法，同时删掉标签后残留的无效字符`enter code here`：

<link rel="stylesheet" href="index.css">

修改保存后重新在Chrome中打开本地index.html：

• 页面样式会正常渲染
• Chrome DevTools的Sources/Network面板中可以看到index.css被成功加载
• 后续如果要加载本地json文件，只要路径书写正确、通过fetch等正常逻辑调用即可正常读取，不存在浏览器拦截同目录静态资源的问题

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