请问我调用JavaScript/CSS页面/文件的方式是否有误？

1. AngularJS 重复加载 #

你同时引用了本地版本和CDN版本的AngularJS核心库：

<script src="scripts/lib/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

重复加载同一个框架的不同（或相同）版本会导致全局变量冲突，可能引发莫名其妙的错误，比如模块注册失败、指令失效等。你需要二选一：要么用本地的离线版本，要么用CDN的在线版本。

2. jQuery 加载顺序错误 #

当前你把jQuery放在AngularJS之后加载：

<script src="scripts/lib/angular.min.js"></script>
<!-- 其他Angular依赖 -->
<script src="scripts/lib/jquery.min.js"></script>

对于AngularJS 1.x来说，如果想让它使用完整的jQuery而不是内置的jqLite，必须先加载jQuery，再加载AngularJS核心库。否则Angular会初始化自己的轻量级DOM操作库，后续加载的jQuery无法替换它，可能导致DOM操作行为不一致。

3. CSS路径的潜在风险 #

你的CSS引用用了./styles/相对路径：

<link href="./styles/w3ds.css" rel="stylesheet" type="text/css" />
<link href="./styles/w3ds-data-tables.css" rel="stylesheet" type="text/css" />

这个路径本身语法没问题，但要确保HTML文件所在目录下确实存在styles文件夹，并且里面有对应的CSS文件。如果HTML文件在子目录里，./会指向当前目录，可能导致找不到文件，此时需要调整为../styles/或者绝对路径。

修正后的示例代码 #

这里给你一个调整后的正确引用顺序：

<!-- 先加载jQuery -->
<script src="scripts/lib/jquery.min.js"></script>
<!-- 选择一个AngularJS版本加载 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- Angular依赖库要在核心库之后加载 -->
<script src="scripts/lib/angular-route.min.js"></script>
<script src="scripts/lib/angular-animate.min.js"></script>

<!-- CSS引用放在头部，确保页面渲染时样式已加载 -->
<link href="./styles/w3ds.css" rel="stylesheet" type="text/css" />
<link href="./styles/w3ds-data-tables.css" rel="stylesheet" type="text/css" />

另外建议把CSS引用放在HTML的<head>标签里，JS引用放在<body>标签末尾（或者加上defer/async属性），这样能优化页面加载性能。

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