Flask教程-静态文件
静态文件（static files）是指那些不需要动态生成的文件，例如图片、CSS文件和JavaScript脚本等。
在Flask中，我们需要创建一个名为static的文件夹来存放静态文件。这个文件夹应该与程序模块和templates文件夹处于同一目录层级。因此，在项目的根目录下创建static文件夹：
$ mkdir static生成静态文件的URL
在HTML文件中，引用这些静态文件需要提供文件所在的URL。为了更加灵活，可以使用Flask提供的url_for()函数生成这些文件的URL。
在第2章的最后，我们学习了url_for()函数的用法。它接受一个端点值（即视图函数的名称）和参数，并返回对应的URL。对于静态文件，需要将端点值设置为static，并使用filename参数传入相对于static文件夹的文件路径。
假设我们在static文件夹的根目录下放置了一个名为foo.jpg的文件，下面的代码可以获取它的URL：
<img src="{{ url_for('static', filename='foo.jpg') }}">花括号中的url_for()调用将返回/static/foo.jpg。
提示：在Python脚本中，需要从flask包中导入url_for()函数；而在模板中可以直接使用，因为Flask将一些常用的函数和对象添加到了模板的上下文（环境）中。
添加 Favicon
Favicon（favorite icon）是显示在浏览器标签页和书签栏中的网站图标。您需要准备一个ICO、PNG或GIF格式的图片，一般大小为16×16、32×32、48×48或64×64像素。将该图片放置在static目录下，然后在HTML模板中使用以下方式引入它：
templates/index.html: 引入 Favicon
<head> ... <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}"></head>保存后刷新页面，即可在浏览器的标签页上看到该图片。添加图片
为了使页面更加丰富多样，我们将添加两个图片：一个是显示在页面标题旁边的头像，另一个是显示在页面底部的龙猫动图。我们在static目录下创建一个名为images的子文件夹，并将这两个图片放入其中：
shell$ cd static$ mkdir images创建子文件夹并非必需，这里只是为了更好地组织相似类型的文件。同样地，如果您有多个CSS文件，也可以创建一个css文件夹来组织它们。接下来，在页面模板中添加这两个图片，并确保填写正确的文件路径：
templates/index.html: 添加图片
<h2> <img alt="Avatar" src="{{ url_for('static', filename='images/avatar.png') }}"> {{ name }}'s Watchlist</h2>...<img alt="Walking Totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">请注意填写正确的文件路径。保存并刷新页面，您将在页面上看到相应的图片。
添加 CSS
虽然已经添加了图片，但是页面仍然非常简单，因为我们还没有添加 CSS 样式定义。在static目录下创建一个CSS文件style.css，并添加以下内容：
static/style.css: 定义页面样式
/* 页面整体 */body { margin: auto; max-width: 580px; font-size: 14px; font-family: Helvetica, Arial, sans-serif;}
/* 页脚 */footer { color: #888; margin-top: 15px; text-align: center; padding: 10px;}
/* 头像 */.avatar { width: 40px;}
/* 电影列表 */.movie-list { list-style-type: none; padding: 0; margin-bottom: 10px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);}
.movie-list li { padding: 12px 24px; border-bottom: 1px solid #ddd;}
.movie-list li:last-child { border-bottom:none;}
.movie-list li:hover { background-color: #f8f9fa;}
/* 图片 */.totoro { display: block; margin: 0 auto; height: 100px;}接下来，在页面的<head>标签内引入这个CSS文件：
templates/index.html: 引入CSS文件
<head> ... <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css"></head>提示：当您将CSS写入单独的文件后，浏览器会对其进行缓存（对于其他静态文件，比如JavaScript文件也是如此）。从Flask 2.0版本开始，它支持自动重新加载静态文件的变化。如果您仍在使用旧版本的Flask，则在每次更新CSS文件内容后，需要使用以下快捷键清除缓存：
Google Chrome（Mac）：Command + Shift + R
Google Chrome（Windows和Linux）：Ctrl + F5
Firefox（Mac）：Command + Shift + R
Firefox（Windows和Linux）：Ctrl + F5
Safari：Command + Option + R
最后，为对应的元素设置class属性值，以与相应的CSS定义关联起来：
templates/index.html: 添加class属性
<h2> <img alt="Avatar" class="avatar" src="{{ url_for('static', filename='images/avatar.png') }}"> {{ name }}'s Watchlist</h2>...<ul class="movie-list"> ...</ul><img alt="Walking Totoro" class="totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">最终的页面效果如下图所示（您可以根据需要自由修改CSS定义，我尽力了）：
本章小结
主页已经基本成形，接下来我们将逐步完成程序的功能。在结束之前，让我们提交代码：
$ git add .$ git commit -m "Add static files"$ git push扫码进群记得备注：城市、昵称和技术方向。
👇扫描下方二维码，逆袭成长👇