如何使用 python http.server 将 CSS 样式添加到 HTML 文件？答案

【问题标题】：How do you add a CSS style to a HTML file with a python http.server?如何使用 python http.server 将 CSS 样式添加到 HTML 文件？
【发布时间】：2022-03-31 15:55:28
【问题描述】：

我有一个从 python 运行的简单 http 服务器，它返回一个 HTML 文件作为 GET 请求。 HTMl 文件只有一些输入，并且它被正确发送，但即使它链接到 CSS 文件也没有样式。这是server.py：

from http.server import BaseHTTPRequestHandler, HTTPServer
import time

hostName = "localhost"
serverPort = 8080

class MyServer(BaseHTTPRequestHandler):
    def do_GET(self):
            self.send_response(200)
            self.send_header("Content-type", "text/html")
            self.end_headers()
            h = open("main.html", "rb")
            self.wfile.write(h.read())
    def do_POST(s):
        if s.path == '/':
            s.path = './main.html'

if __name__ == "__main__":
    webServer = HTTPServer((hostName, serverPort), MyServer)
    print("Server started http://%s:%s" % (hostName, serverPort))

    try:
        webServer.serve_forever()
    except KeyboardInterrupt:
        pass

    webServer.server_close()
    print("Server stopped.")

main.html 是这个

<html>

<head>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <h1 class="mx-auto text-center mt-8 px-0 py-8 border border-4 border-solid border-gray-600"
        style="width: 700!important;">CHECKBOX INPUT</h1>
    <div class="flex h-full mx-auto">
        <form action="">
            <div class="w-3/4 py-10 px-8">
                <table class="table-auto">

                    <thead>
                        <tr>
                            <th class="py-10 h-4">
                                <div class="mr-64">
                                    <input type="checkbox" class="form-checkbox h-8 w-8">
                                    <label class="ml-4">test</label>
                                </div>
                            </th>
                        </tr>
                        <tr>
                            <th class="py-10 h-4">
                                <div class="mr-64">
                                    <input type="checkbox" class="form-checkbox h-8 w-8">
                                    <label class="ml-4"></label>
                                </div>
                            </th>
                        </tr>
                        <tr>
                            <th class="py-10 h-4">
                                <div class="mr-64">
                                    <input type="checkbox" class="form-checkbox h-8 w-8">
                                    <label class="ml-4">test</label>
                                </div>
                            </th>
                        </tr>
                        <tr>
                            <th class="py-10 h-4">
                                <div class="mr-64">
                                    <input type="checkbox" class="form-checkbox h-8 w-8">
                                    <label class="ml-4">test</label>
                                </div>
                            </th>
                        </tr>
                        <tr>
                            <th class="px-4  py-10 h-4">
                                <div class="mx-auto">
                                    <span>TEXT INPUT:</span>
                                    <input type="text" class="form-input mt-4">
                                    <select>
                                        <option value="value1" selected>DROPDOWN</option>
                                        <option value="valeu2">Value 2</option>
                                        <option value="valeu3">Value 3</option>
                                    </select>
                                </div>

                            </th>
                        </tr>
                        <tr>
                            <th class="px-4  py-10 h-4">
                                <div class="mx-auto">

                                </div>

                            </th>
                        </tr>
                        <tr>
                            <th class="px-4  py-10 h-4">
                                <div class="mx-auto">
                                    <input type="submit" value="Submit" class="bg-gray-600 p-4 border-0 border-solid rounded-lg">
                                </div>

                            </th>
                        </tr>
                    </thead>

                </table>
            </div>
        </form>
    </div>
</body>

</html>

即使在我托管服务器时 HTMl 文件链接到 output.css，它也会返回没有任何样式的 HTML 文件

提前谢谢你

【问题讨论】：

您是否尝试过使用不带前导点的href="/output.css"？基本上只有一个前导 / 的 href 让浏览器尝试在找到 html 的同一主机和端口上获取资源。将该 href 放入提供的文档 @http://example.com:8000/bar.html 将导致获取 http://example.com:8000/output.css 但是您 doGet 可能需要根据请求 URL 在 main.html 和 output.css 之间做出决定。

标签： python html css server

【解决方案1】：

当您的 HTML 文件在浏览器中加载时，它会尝试加载 CSS 文件 (./output.css)。由于您通过 HTTP 提供此页面，因此浏览器发出 HTTP 请求以获取此 output.css 文件，但显然您的服务器不提供此 CSS 文件。

【讨论】：

您需要让您的服务器也为该 CSS 文件提供服务，您的服务器应检查请求 URL 并返回所请求的文件。为什么需要自己创建服务器？我建议使用流行的后端解决方案，如 Flask 或 Django，您可以在其中轻松配置提供静态文件。
它是一个学校项目，我必须使用 python 来制作 HTTP 服务器，你能给我一个用于服务 CSS 文件的代码示例，因为我需要它返回 main.html 但它需要要样式
与返回 main.html 文件类似，只需检查请求 URL，如果它以 output.css 结尾，则返回 CSS 文件而不是 HTML。

【解决方案2】：

这样做真的很复杂，因为您必须创建新的服务器来为您的 css 文件提供服务。 **更好地使用强大且流行的解决方案，例如 Flask 和 Django **您可以轻松地配置这些文件。有关 Flask 的更多信息 https://pymbook.readthedocs.io/en/latest/flask.html

【讨论】：

【解决方案3】：

您的 html 文件或 css 文件是否在文件夹中？如果是这样，请在 html 文件中更改指向“[文件夹名称]/output.css”的链接

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

嘿，我只需要自己解决这个问题。你可能已经解决了这个问题，但如果其他人偶然发现这个问题，这就是我想出的，工作得很好！

def do_GET(self):
    # Cache request
    path = self.path

    # Validate request path, and set type
    if path == "/resources/index.html":
        type = "text/html"
    elif path == "/resources/script.js":
        type = "text/javascript"
    elif path == "/resources/style.css":
        type = "text/css"
    elif path == "/favicon.ico":
        path = "/resources/favicon.ico"
        type = "image/x-icon"
    else:
        # Wild-card/default
        if not path == "/":
            print("UNRECONGIZED REQUEST: ", path)
            
        path = "/resources/index.html"
        type = "text/html"
    
    # Set header with content type
    self.send_response(200)
    self.send_header("Content-type", type)
    self.end_headers()
    
    # Open the file, read bytes, serve
    with open(path[1:], 'rb') as file: 
        self.wfile.write(file.read()) # Send

【讨论】：