Как объединить Python и HTML на веб-страницах

Раздел: Веб-разработка -> Веб-разработка

Способы встраивания Python в HTML

Как динамически генерировать HTML-страницы с помощью Python на сервере?

Шаблонизаторы Jinja2 и Flask

Наиболее эффективный способ интеграции Python в HTML - использование серверных шаблонизаторов. В экосистеме Python популярен Jinja2, часто применяемый вместе с микрофреймворком Flask. Python код выполняется на сервере, результаты вставляются в шаблон.

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    name = "Мир"
    items = ["яблоко", "банан", "вишня"]
    return render_template('index.html', name=name, items=items)

if __name__ == '__main__':
    app.run()

Backend python django (backend на django с python)


<!DOCTYPE html>
<html>
<head><title>Привет, {{ name }}</title></head>
<body>
    <h1>Привет, {{ name }}</h1>
    <ul>
    {% for item in items %}
        <li>{{ item }}</li>
    {% endfor %}
    </ul>
</body>
</html>

веб библиотека python (веб-библиотека python (фреймворк))

Пояснение: Flask передаёт переменные name и items в шаблон. Jinja2 выполняет подстановку {{ name }} и цикл {% for %}. Результат - чистый HTML, отправленный клиенту.

Типичные ошибки: неэкранированный пользовательский ввод (XSS). Jinja2 по умолчанию экранирует {{ }}, но если нужно вывести HTML, используйте |safe. Другая проблема - перегруженная логика в шаблонах: рекомендуется выносить сложные вычисления в Python код.

Как встроить Python в HTML с помощью Django?

Django использует собственный шаблонизатор, похожий на Jinja2. Пример:

# views.py
def my_view(request):
    context = {'title': 'Django', 'users': ['Alice', 'Bob']}
    return render(request, 'my_template.html', context)

Html python code (встраивание python кода в html)

<!-- my_template.html -->
<h1>{{ title }}</h1>
<ul>
{% for user in users %}
    <li>{{ user }}</li>
{% endfor %}
</ul>

Django разработка веб приложений на python (разработка веб-приложений на django)

Отличие от Jinja2: Django шаблоны имеют собственные теги (например, {% url %}) и более строгие правила. Ошибки: забыть загрузить статические файлы через {% static %}.

Как запустить Python код непосредственно в браузере на HTML странице?

PyScript - фреймворк, позволяющий выполнять Python в браузере через WebAssembly. Устанавливать сервер не требуется. Пример:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <py-script>
        print("Привет из PyScript!")
        import datetime
        now = datetime.datetime.now()
        print(f"Текущее время: {now}")
    </py-script>
    <div id="output"></div>
</body>
</html>

Flask на языке python (flask на python)

Результат будет выведен в область, управляемую PyScript.

Проблемы: PyScript загружает интерпретатор Python (~10 МБ), что замедляет загрузку. Не все библиотеки Python доступны (например, NumPy работает, но не все функции). Ошибки: некорректный путь к скриптам, проблемы с CORS.

Как использовать CGI для встраивания Python в HTML?

CGI (Common Gateway Interface) - старый метод, при котором веб-сервер запускает скрипт Python для каждого запроса. Пример:

#!/usr/bin/env python3
print("Content-Type: text/html\n")
print("<html><body>")
print("<h1>Привет от CGI</h1>")
print("</body></html>")

Fast api python (fastapi для python)

Скрипт должен быть помещён в каталог cgi-bin с правами на выполнение.

Недостатки: низкая производительность, нет разделения логики и представления, уязвимости безопасности (выполнение произвольных команд). Современные проекты почти не используют CGI.

Как генерировать HTML из Python без шаблонизатора?

Можно формировать HTML строки непосредственно в коде с помощью f-строк или конкатенации. Пример:

name = "Анна"
items = ["книга", "ручка"]
html = f"<h1>Привет, {name}</h1><ul>"
for item in items:
    html += f"<li>{item}</li>"
html += "</ul>"
print(html)

Этот подход прост, но плохо масштабируется и смешивает представление с логикой.

Проблемы: сложность поддержки, уязвимость к XSS при вставке пользовательских данных (нужно экранировать вручную).

Расширенные примеры встраивания Python в HTML

Пример 1: Наследование шаблонов в Jinja2 и Flask

Создадим базовый шаблон base.html с общим оформлением:

Пример 
<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Мой сайт{% endblock %}</title>
</head>
<body>
    <header>Шапка сайта</header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>Подвал</footer>
</body>
</html>

Дочерний шаблон page.html:

Пример 
{% extends "base.html" %}
{% block title %}Главная страница{% endblock %}
{% block content %}
    <h1>Добро пожаловать, {{ name }}!</h1>
    <p>Сегодня {{ date }}</p>
    {% macro render_list(items) %}
        <ul>
        {% for i in items %}
            <li>{{ i | upper }}</li>
        {% endfor %}
        </ul>
    {% endmacro %}
    {{ render_list(products) }}
{% endblock %}

Python код:

Пример 
from flask import Flask, render_template
from datetime import datetime

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('page.html',
                           name='Алексей',
                           date=datetime.now().strftime('%d.%m.%Y'),
                           products=['ноутбук', 'мышь', 'клавиатура'])

app.run()

Результат (сгенерированный HTML):

<!DOCTYPE html>
<html>
<head>
    <title>Главная страница</title>
</head>
<body>
    <header>Шапка сайта</header>
    <main>
        <h1>Добро пожаловать, Алексей!</h1>
        <p>Сегодня 05.04.2025</p>
        <ul>
            <li>НОУТБУК</li>
            <li>МЫШЬ</li>
            <li>КЛАВИАТУРА</li>
        </ul>
    </main>
    <footer>Подвал</footer>
</body>
</html>

Пример 2: Интерактивный калькулятор с PyScript

Пример 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <input type="number" id="a" value="10">
    <input type="number" id="b" value="5">
    <button py-click="calculate()">Сложить</button>
    <div id="result"></div>

    <py-script>
        from js import document

        def calculate():
            a = float(document.getElementById('a').value)
            b = float(document.getElementById('b').value)
            result = a + b
            document.getElementById('result').innerHTML = f"Результат: {result}"
    </py-script>
</body>
</html>

При нажатии кнопки выполняется Python функция, которая читает значения из полей ввода и выводит сумму. PyScript обеспечивает взаимодействие с DOM через from js import document.

Результат (после нажатия кнопки):

Результат: 15

Встраивание Python кода в HTML - comments

En
Html python code (python)