Flask模板渲染异常：head元素被渲染到body内及出现零宽空格

搭建了一个使用模板继承的简单Flask应用，运行后生成的HTML出现异常：原本在<head>内的元素被渲染到<body>中，同时出现（零宽不换行空格）字符。

应用代码与目录结构 #

app.py #

from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html',
        title = "My Title"
    )

模板文件 #

templates/layout.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>{% block title %}{% endblock %}</title>
        <link rel="icon" href="data:,">
        <link rel="stylesheet" href="static/css/bootstrap.min.css">
        <link rel="stylesheet" href="static/css/style.css">
    </head>
    <body class="mx-3">

        <div class="card">
            <div class="card-body"> 
                {% block content %}{% endblock %}
            </div>
        </div>
        
        <script src="static/js/jquery-3.7.0.slim.min.js"></script>
        <script src="static/js/bootstrap.bundle.min.js"></script>
        {% block scripts %}{% endblock %}
    </body>
</html>

templates/index.html

{% extends "layout.html" %}

{% block title %}
{{ title }}
{% endblock %}

{% block content %}

<p class="display-4">Hello from index</p>

{% endblock %}

{% block scripts %}
<script src="static/js/scripts.js"></script>
{% endblock %}

目录结构 #

├───static
│   ├───css
│   │       bootstrap.min.css
│   │       style.css
│   │
│   └───js
│           bootstrap.bundle.min.js
│           jquery-3.7.0.slim.min.js
│           scripts.js
├───templates
│       index.html
│       layout.html
│
├───app.py

异常渲染结果 #

运行命令flask --app app run后，生成的异常HTML如下：

<html lang="en">
<head></head>
<body class="mx-3">
        "&#xFEFF; "
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title> My Title </title>
        <link rel="icon" href="data:,">
        <link rel="stylesheet" href="static/css/bootstrap.min.css">
        <link rel="stylesheet" href="static/css/style.css">   

        <div class="card">
            <div class="card-body"> 
                <p class="display-4">Hello from index</p>
            </div>
        </div>
        
        <script src="static/js/jquery-3.7.0.slim.min.js"></script>
        <script src="static/js/bootstrap.bundle.min.js"></script>
        <script src="static/js/scripts.js"></script>
</body>
</html>

环境信息 #

• Python版本：3.11.4
• Flask版本：2.3.2
• 仅在虚拟环境中安装Flask，无其他额外依赖

异常原因及解决办法 #

最可能的问题是模板文件带UTF-8 BOM标记：

• 是UTF-8 BOM的HTML实体编码，说明你的模板文件（尤其是layout.html）是以带BOM的UTF-8格式保存的。Jinja2解析模板时，会把这个BOM当成普通文本输出到页面最开头。
• 浏览器解析HTML时，一旦在<head>标签前遇到非HTML标签的内容（比如这个BOM），就会自动关闭<head>，把后续原本属于head的内容全部塞进<body>里，就出现了你看到的异常。

解决办法：

• 用VS Code、PyCharm这类专业编辑器打开模板文件，将文件编码改成UTF-8 无BOM格式后重新保存。
• 也可以用dos2unix这类工具批量去除文件里的BOM标记。

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