网页模板中如何正确的导入js、css等静态文件

因为我的项目是django我就拿django搭建的网站举例
其它网站也一样
Django版本1.10
网站通常需要js，css，图片等文件，在Django中，我们把这些文件称为“静态文件”（static files）。Django提供django.contrib.staticfiles来管理他们。 使用方法如下：
1.在settings.py中定义你的STATIC_URL：
STATIC_URL=’/static/’

2.在模板中，static文件的目录如下图所示：

项目名：ProjetTestDjango;APP名：peojetDjango,static 文件夹在APP目录下。
3.在settings.py中添加项目APP：

4.在HTML文件中调用：
{% load static %}

其实很简单只要调试html的代码即可
原有代码

网页截图

而为什么导入后会变成这样、

是 js和css引用不对
只要把js和css静态文件和html文件放在同一目录下
并且修改html的代码即可
开头修改css：

结尾处修改js：

如果你想把css和js另外放在一个文件夹下（方便管理）例如static下：
你需要在修改的地方加 入 …/static