HTML的表格標簽2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
</head>
<body>
<table border='1' width='50%' cellpadding='0' cellspacing='0' align='center'>
	<caption>學生成績表</caption>
	<tr>
		<th>學號</th>
		<th>姓名</th>
		<th>成績</th>	
	</tr>
	
	<tr>
		<td>1</td>
		<td>laoda</td>
		<td>95</td>	
	</tr>
	
	<tr>
		<td>2</td>
		<td>laoer</td>
		<td>98</td>	
	</tr>
	
	<tr>
		<td>3</td>
		<td rowspan='2' >laoer</td>
		
	</tr>
	<tr>
		<td>4<td/>
		
		
	</tr>
</table>
</body>
</html>

.列表標簽 ul，ol, dl(掌握)

1.1ul無序列表標簽

基本結構:

<ul>

</ul>

注意：

1.ul標簽和li標簽是組合使用。

2.li標簽里面可以添加任何內容，或者嵌套標簽也可以

3.無序列表會自動生成一個小圓點，一般在實際應用中會去掉。

1.2有序列表ol

語法：定義子項順序的。一般有編號（數字或字母或希臘字母）

<ol>

</ol>

注意：

有序列表type屬性的幾個值：

A表示顯示的編號是大寫字母

a表示編號是小寫字母

I表示編號是羅馬數字

i表示編號是小寫羅馬數字

默認情況下顯示的是數字

實例：

</ol>

</ol>

</ol>

</ol>

</ol>

2.3定義列表dl

什么是定義列表

dl標簽定義了定義列表，通常用于名稱的解釋或者概念的定義。每個子項分為2個部分，一部分負責定義，另一部分負責解釋

<dl>

<dt>計算機資料</dt>

<dd>JavaScript</dd>

<dd>NodeJS入門到精通</dd>

<dd>PhP語法入門到精通</dd>

</dl>

<!--

dl:定義了一個定義列表

dt:術語部分

dd:對術語或項目進行解釋的部分

-->

2. 表格table

2.1表格的使用

（1）table標簽

（2）表格行、列的合并

<table>：定義表格

<tr>:定義表格的行

<td>：定義表格的列

<th> ：定義表格表頭單元格

<thead>:定義表格中表頭的內容

<tbody>:定義表格中的主體內容

<tfoot>:定義表格中的腳注

<caption>:定義表格標題

<!--

cellspacing:單元格與單元格之間的距離

cellpadding：內容與單元格之間的距離

border：單元格邊框寬度

bgcolor:設置背景色

-->

</table>

言

大家好，我是小雨！

今天我們要介紹的知識點是 Django 中的 Templates,它也是 MVT 結構中的 T，Templates 可以叫它模板。Templates 究竟用來做什么，通過這一節的介紹，希望大家有一個基本的了解。

一、Templates 模板

在上一節當中，我們在瀏覽器中看到的是 HTTPResponse 返回的字符串，而這一節我們講的 templates 最直接的功能是把前端的 html 頁面顯示出來，這樣用戶就能看到清晰美觀的界面。那么 Django 是如何加載 html 網頁的呢？下面介紹兩種方式：

1.使用 render_to_string 加載 html

我們提前準備好一個 html 頁面index.html，然后為了方便 views 中能成功訪問到這個index.html，需要在settings.py中將templates文件夾的路徑聲明清楚。在 TEMPLATES 列表字典的DIRS屬性下添加一下內容：

os.path.join(BASE_DIR, 'templates')  # 如果缺少os模塊記得導入

render_to_string 的使用方法：先使用from django.templates.loader import render_to_string導入模塊，然后給 render_to_string 傳入 html 文件后，最后將其以 HttpResponse 的方式返回出去即可。

from django.http import HttpResponse
from django.templates.loader import render_to_string

def index(request):
    html = render_to_string("index.html")
    return HttpResponse(html)

2. 使用 render 加載 html

這里我們需要從django.shortcut導入 render 模塊，一般情況下 Django 會默認導入這個模塊,views 中如果沒有的話就手動導入一下：

from django.shortcut import render

接著 render 中傳入 html 文件，記得添加 request 參數，然后使用 return 返回 render 即可：

def index(request):
    return render(request,'index.html')

最后記得在 urls.py 中將路徑對應的 views.index 添加進來就可以了。

二、模板語言的基本使用

我們要知道 templates 作為 MVT 架構中的 T，不僅僅是加載前端中的頁面，它還包含一種模板語言，能夠在 htmlL 語言中實現邏輯控制（條件選擇、循環），相對于 JavaScript 會更加的靈活。

常用的python模板語言引擎

接下來，我們就以一個簡單的例子來介紹 Django 模板語言的使用。

1.功能需求分析

我們有一個存儲學生信息的Students.csv文件，包含了學號、姓名、性別、手機號碼、出生日期、電子郵箱等信息。

319001,趙一,男,1998/12/27,18706012232,532211428@qq.com,北京市海淀區頤和園路5號,342622199801144314,2019/9/1,計算機,趙一,13655512212
319002,錢二,女,1995/10/25,13459732456,572501101@qq.com,北京市海淀區雙清路30號,342622199709066819,2019/9/1,物聯網,王二,13856909992

這里數據其實有很多條，為了減少篇幅我們就羅列出兩條。

現在需要將這些數據加載到前端的 html 頁面中，通過 tabel 標簽顯示出來。

2. 實現過程

（1）準備

首先用 pycharm 新建一個 Django 項目，為了方便使用直接把 application 和 templates 文件夾都建好。

pycharm新建Django項目

在 templates 中新建一個 index.html 文件，寫好用于顯示學生信息的標題以及表格框架。

<div id="title">學生信息列表</div>
<div id="table_main">
    <table border="1">
        <thead>
            <tr>
                <th>學號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>出生日期</th>
                <th>手機號碼</th>
                <th>電子郵箱</th>
                <th>家庭地址</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

（2）views 設置

為了讀取 csv 文件，寫一個read_form_file方法，將文件中的信息存儲在 Students 列表中。

def read_from_file(path:str):
    students = []
    try:
        with open(path, mode="r", encoding="UTF-8") as fd:
            # 讀取當前行
            current_line = fd.readline()
            # 判斷當前行是否為空
            while current_line:
                temp_line = current_line.split(",")
                students.append(temp_line)
                current_line = fd.readline()
        return students
    except Exception as e:
        raise e

接下來，我們定義一個 student 方法，用來顯示 html 內容給前端，這里面我們還是使用 render 將獲取的數據傳遞給前端頁面index.html。

注意使用 context 參數，它的值我們設置為一個字典，鍵設置為 DTL 模板語言中要引用的變量，值設置為本地獲取的數據

def student(request):
    students = read_from_file(r"D:\Python\Project\Demo\Student.csv")
    return render(request, "index.html", context={"all_student":students})

（3）DTL 模板語言

在index.html中，表格內容的填充，我們通過 DTL 模板語言來完成。在 HTML 代碼中要插入 DTL 模板語言，需要使用{%語句%}，for 語句還要使用{% endfor %}來結尾，在語句內部調用變量列表中的元素也是直接使用變量名.數字并且需要包裹兩層大括號。這里我們以循環輸出 student 列表中的各個元素為例，其 DTL 模板語言的寫法如下：

 {% for student in all_student %}
    <tr>
    <td>{{ student.0 }}</td>
    <td>{{ student.1 }}</td>
    <td>{{ student.2 }}</td>
    <td>{{ student.3 }}</td>
    <td>{{ student.4 }}</td>
    <td>{{ student.5 }}</td>
    <td>{{ student.6 }}</td>
    </tr>
 {% endfor %}

（4）urls 配置

接下來配置路由，添加 student 路徑

path('student/',app01_views.student),

（5）運行效果

一切準備就緒后，執行python manage.py runserver，在瀏覽器中打開127.0.0.1:8000/student效果如下：

數據被成功加載

三、加載靜態文件

1. 什么是靜態文件

不能與服務器做動態交互的文件叫靜態文件；對于 HTML 中的圖片、視頻、css、js 這些都屬于靜態文件。Django 對于這些文件有一套明確的管理機制。如果我們只遵循 HTML 的規范去加載靜態文件，在 Django 中是顯示不出來的。

Django無法加載靜態文件

2. 如何加載靜態文件

為了解決這個問題，我們首先要確保配置文件 settings.py 中 INSTALLED_APP 下靜態文件模塊有被加載到：

'django.contrib.staticfiles',  # 必須確保安裝靜態模塊

然后使用STATICFILES_DIRS這個全局變量來存儲靜態文件的路徑。

STATICFILES_DIRS = [
    os.path.join(BASE.DIR, 'static'),
]

然后在 html 中開始加上模板語言，如果讓 html 引用靜態文件，那就需要先導入靜態模塊。在 html 語句第一行寫上

{% load static %}

對于要引用靜態圖片的標簽路徑使用{% static "路徑文件名 "%}，如：

<img src="{% static "logo.png"%}">

這樣 Django 就能顯示靜態文件圖片了。

3. 顯示效果

靜態圖片被正確顯示了

4. 注意事項

一般情況下，static 文件夾我們會放在app目錄下。這時候訪問靜態文件，則需要在STATICFILES_DIRS的 os.path.join 參數中再多添加一個子文件夾名，可以寫成：

STATICFILES_DIRS = [
    os.path.join(BASE.DIR, 'app01','static'),
]

5. 直接訪問靜態文件

在 Django 配置的文件 settings.py 中有一個全局變量STATIC_URL，它定義了一個給外界用戶直接訪問靜態文件的路徑。上面我們添加在標題中的 logo.png，我們可以在瀏覽器中直接通過127.0.0.1:8000/student/static/logo.png來訪問。

直接訪問靜態文件

四、加載靜態文件綜合案例

為了更好地鞏固 Django 加載靜態文件的知識，我們做一個小案例。學生信息管理系統的登錄頁面。有顯示圖片 logo，有用戶名和密碼的輸入框，并且有提交按鈕。當點擊按鈕時，會彈出提示表示登錄成功。

這里簡單說明一下：

界面采用了 Bootstrap 框架，登錄按鈕的功能函數用了 jQuery 腳本。關于前端的知識我們這里就不做過多介紹了。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <!--加載外部的CSS文件-->
    <link type="text/css" rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
    <link type="text/css" rel="stylesheet" href="{% static "css/basic.css" %}">
    <!--加載外部的js文件-->
    <script src="{% static "js/jquery.min.js" %}"></script>
    <script src="{% static "js/login.js" %}"></script>
</head>
<body>
    <div class="container">
        <div id = "login">
            <form class="form">
                <h2><img src="{% static "imags/mainlogo.png" %}"></h2>
                <h2>學生信息管理系統登錄</h2>
                <hr>
                <hr>
                <div class="form-group">
                    <label for="user">用戶名:</label>
                    <input type="text" class="form-control" placeholder="請輸入用戶名" id="user">
                </div>
                <div class="form-group">
                    <label for="password">密碼</label>
                    <input type="password" class="form-control" placeholder="請輸入密碼" id="password">
                </div>
                <div class="form-group">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">請記住我
                        </label>
                    </div>
                </div>
                <button id="submit01" class="form-control">提交</button>
            </form>
        </div>
    </div>
</body>
</html>

將以上 html 文件保存在 templates 中,在 views 中配置好方法，urls 中配置好路由，最后在 settings 中配置好靜態文件路徑，最后啟動 Django 服務器，頁面顯示效果如下：

效果演示：

登錄頁面案例演示

最后

本節，我們介紹了 Django 中 templates 的知識，Django 加載 HTML 方法、模板的語言的使用，以及加載靜態文件的方法。希望大家多多練習，才能鞏固所學的知識。下一節我們將繼續介紹 Django 中 URL 跳轉的知識！

感謝大家的閱讀！

在線咨詢

上一篇：2021年全新升級的前端學習路線圖
下一篇：手把手教你實現一個高性能的抽抽樂H5小游戲(含源碼)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML的表格標簽2

.列表標簽 ul，ol, dl(掌握)

2. 表格table

言

一、Templates 模板

1.使用 render_to_string 加載 html

2. 使用 render 加載 html

二、模板語言的基本使用

1.功能需求分析

2. 實現過程

三、加載靜態文件

1. 什么是靜態文件

2. 如何加載靜態文件

3. 顯示效果

4. 注意事項

5. 直接訪問靜態文件

四、加載靜態文件綜合案例

效果演示：

最后

您的項目需求