Django零基础入门之调用漂亮的HTML前端页面

沈知远

发布时间：2026-10-14 | 4人浏览过

原创

本文介绍Django中调用HTML前端页面的基础方法。重点讲解render函数的使用、templates目录的创建与配置，以及views.py和urls.py的具体实现步骤，帮助初学者快速掌握Django模板渲染流程。

引言：

在Django框架中，如何有效地调用HTML前端页面是一个基础且关键的问题。

Django怎样去调用漂亮的HTML前端页面呢?

最直接的方法就是使用render方法！

render方法是Django封装好的，专门用于调用HTML前端模板的工具。

1.模板放在哪？

在主目录下创建一个templates目录，用于存放所有的HTML模板文件。需要注意的是，如果使用PyCharm创建Django项目，系统会自动生成这个目录；但如果通过命令行创建项目，则不会自动创建，需要手动建立。

在templates目录内部，建议再新建以app名称命名的子目录，用于存放各个app对应的模板文件，以保持结构清晰。

2.Django中实战使用——调用漂亮的HTML前端页面

（1）App music里面的views.py文件：


from django.shortcuts import render,redirect,reverse       
from django.http import HttpResponse
import time
# Create your views here.

def login(request):   #登陆
    return render(request,"music/test01.html")     #返回HTML模板       
    #第二个html文件的路径可以直接写templates下的：因为在settings.py文件中已经配置好了!

注意：如果是使用PyCharm创建的Django项目，templates目录路径通常已经添加到settings.py的DIRS配置中。如果是通过命令创建的项目，则需要手动添加此配置值，否则Django无法找到模板文件。

（2）App music里面的views.py文件：


from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [     #子路由
    path("login/",views.login),
]

（3）HTML模板文件：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet" href="RESETCSS.css" rel="external nofollow" >
    <style>
        div{
            width: 300px;
            height: 350px;
            border: 1px solid grey;
            margin: 8px 0 0 8px;
        }
        span{
            border-bottom: 3px solid purple;
            padding-bottom: 3px;
        }
        a{
            text-decoration: none;
            float: right;
            padding-top: 3px;
            color: deepskyblue;
        }
        .first{
            width: 290px;
            height: 30px;
            border: 1px solid grey;
            border-radius: 5px;
            margin: 5px 4px;
        }
        .second{
            width: 200px;
            height: 30px;
            border: 1px solid grey;
            border-radius: 5px;
            margin: 5px 4px;
        }
        .third{
            width: 79px;
            height: 30px;
            border: 1px solid blue;
            border-radius: 5px;
            color: blue;
        }
        .fourth{
            width: 79px;
            height: 30px;
            border: 1px solid blue;
            border-radius: 5px;
            vertical-align: middle;
            background-image: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1378353400,959510337&fm=26&gp=0.jpg");
            background-size: 79px 30px;
        }
        .zc{
            width: 290px;
            height: 30px;
            border: 1px solid grey;
            border-radius: 5px;
            margin: 5px 4px;
            background-color: skyblue;
            color: white;
        }
    </style>
</head>
<body>

<div>
    <form action="">
        <span>请注册</span>
        <a href="">立即登录&lt;</a>
        <hr>
        <input type="text" class="first" placeholder="请输入手机号"><br>
        <input type="text" class="second" placeholder="请输入短信验证码">
        <input type="button" class="third" value="发送验证码"><br>
        <input type="text" class="first" placeholder="请输入用户名"><br>
        <input type="password" class="first" placeholder="请输入密码"><br>
        <input type="password" class="first" placeholder="请再次输入密码"><br>
        <input type="text" class="second" placeholder="请输入图形验证码">
        <input type="button" class="fourth"><br>
        <input type="submit" class="zc" value="立即注册"><br>
    </form>
</div>

</body>
</html>

（4）实现效果：