如何在 localhost 中单独使用 Python 显示 HTML答案

【问题标题】：How to display HTML using Python Alone in localhost如何在 localhost 中单独使用 Python 显示 HTML
【发布时间】：2020-05-09 01:32:23
【问题描述】：

我正在尝试仅使用 python 来显示我的 html 文件。比如我会python code.py，我可以通过localhost:8080访问我的html

html 文件是相互访问的静态文件。比如index.html指向contact.html，它们都访问css文件夹。

如何打开我的 html 文件以使其显示在网页上？

以下是我目前所拥有的。

html_file = []
with open("index.html", "r") as f:
    for line in f.readlines():
        html_file.append(line)

有没有办法做到python code.py 并且当我访问localhost:8000 时会显示代码？我可以访问每个页面。

这是一个示例 html 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <img class="resize" src="./pictures/logo.png" alt="logo">
        <nav>
            <ul class="nav-links">
                <li class="active"><a href="./index.html">Home</a></li>
                <li><a href="./contact.html">Contact</a></li>
            </ul>
            <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
            <script type="text/javascript">
                $(document).on('click', 'ul li', function(){
                    $(this).addClass('active').siblings().removeClass('active')
                })
            </script>
        </nav>
    </header>
</body>
</html>

【问题讨论】：

标签： python html python-3.x

【解决方案1】：

使用Flask 或Django 等python 网络框架可以做到这一点。在典型的烧瓶场景中，您的代码将如下所示：-

1) 安装烧瓶：-

pip install flask

2) 像这样写你的code.py：-

from flask import Flask, url_for
from flask import render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('hello.html')

3) 接下来创建一个模板folder，在其中放置您的html文件，我将其命名为hello.html

templates > hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <img class="resize" src="./pictures/logo.png" alt="logo">
        <nav>
            <ul class="nav-links">
                <li class="active"><a href="./index.html">Home</a></li>
                <li><a href="./contact.html">Contact</a></li>
            </ul>
            <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
            <script type="text/javascript">
                $(document).on('click', 'ul li', function(){
                    $(this).addClass('active').siblings().removeClass('active')
                })
            </script>
        </nav>
    </header>
</body>
</html>

4) 您的目录结构如下所示：-

/code.py
/templates
    /hello.html

5) 运行python code.py，您可以在localhost:5000 上看到您的页面。

【讨论】：