學會用HTML-flex布局制作漂亮的網頁

、摘要

（OF作品展示）

OF之前介紹了用python實現數據可視化、數據分析及一些小項目，但基本都是后端的知識。想要做一個好看的小系統，我們還要學一些前端的知識，今天OF將講解如何用pycharm（全棧開發不錯的工具）做一張好看的網頁，以后我們就可以自己開發網頁/網站放到互聯網上。

主要內容：網頁前端布局

適用人群：Python初學者，前端初學者

準備軟件：pycharm

二、pycharm操作說明

1. 創建項目

1) 下載完成pycharm, 點擊file-New Project...

2) 按下圖步驟創建一個項目，目前我們選擇Pure python即可，以后我們可以學習用Django/flask等框架來做完整的系統

2. 創建HTML文件

1）在創建的項目空白處鼠標右鍵-New-HTML File

2）輸入英文的網頁名字，盡量不要輸入中文/特殊字符

3. HTML格式說明

當雙擊打開我們創建后的HTML文件，大家會看到下面的界面

三、網頁設計

1. 草圖繪制

在開始開發網頁前，我們需要自己設計下想要把網頁做成什么樣，為了節省成本OF都是自己設計的頁面樣式，可以手繪，也可以在PPT上畫。

2. css名字定義

我們先學習一個比較簡單的布局如下圖，大家可以看到下圖已經畫出了我們需要添加的內容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會是左右的關系，而不是上下

四、網頁開發

1. body部分

根據上述的css名字定義，先填充<body>內的代碼，那么我們就完成一半的工作了，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

2. 網頁測試

1）鼠標移到代碼處，在右上角我們會看到一排瀏覽器，我們點擊其中一個運行

2）目前看到的網頁內容從上到下顯示

3. head部分

首先我們簡要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個顏色內容框在<div id="main">中，運行結果是3個顏色的內容橫向展示了，而不是上下

1）那么我們先從“人物介紹”的布局開始，“人物介紹”居中展現（用flex中justify-content:center），而且下面有一條黑線，OF準備用border樣式來實現，所以在<div id=intro>里另加了個<div class=peo>，代碼如下：

(注：style中的#main對應body中的id=main, .main對應class=main)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }
        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

運行結果：

2）圖片部分是3個<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設置flex布局，在<style>里加入以下代碼：

#pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}

運行結果：

3）圖片之間靠太近，圖片大小不一致，文字沒居中，我們在<style>里加入以下代碼：

.bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}

運行結果：

五、總結

今天我們學會了flex布局，今后所有的網頁排版都可以實現了，祝愿大家都有所收獲，完整的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;


        }

        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }

        #pic1 {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }

        .bord{
            padding: 1rem 2rem;
        }

        .img {
            border: 0.2rem solid #e3e3e3;
            max-width: 15rem;
            height: 22rem;
        }

        .word {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介紹</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">東</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">喬</p>
    </div>
</div>
</body>
</html>

今天的知識比較基礎但非常實用，每天學會一個小技能，積少成多，以后就能成為大神。如果大家對網頁上的實現有什么不懂的，盡請留言，OF一定會一一解答的。

之前理解Django那篇文章中，我們學習了在Django中如何使用視圖。現在，這篇文章將學習如何使用Django模板。模板是在Django項目中構建用戶界面的主要工具。讓我們學習一下在視圖中如何使用模板，以及Django的模板系統能夠提供什么特性。

設置模板

我們需要一個地方放置模板。模板是靜態文件，Django會在里面填充數據。為了使用那些文件，我們必須告訴Django在哪里可以找到它們。

像Django的大多數組成部分一樣，這項配置在項目的配置文件里面。在你執行startproject命令之后，你可在配置文件中找到一個叫TEMPLATES的小節。這個小節的內容像這樣：

Django的模板系統可以使用多個模板后端。這個后端決定了模板如何運行。我推薦使用Django默認的模板語言。這個模板語言對Django這個框架有最緊密的集成和最好的支持。

下一個需要注意的地方是APP_DIRS的值是True。對于Django的模板語言，將這個值設置為True將使Django在每個應用項目的templates目錄中查找模板文件。注意這將包括任何第三方應用，所以最好保持這個值為True。

那模板應該放到哪里？在Django社區，不同開發者對此有不同想法。一些開發者認為應該將所有模板都放在所在應用中。另一部分開發者將項目的所有模板放到一個單獨的目錄。我就是這第二種開發者。我發現將項目的所有模板放到一個單獨的目錄是很有價值的。

在我看來，將模板保存在單個目錄中使系統中所有布局和UI位置非常清楚。如果我們在Django中想使用該模式，必須設置DIRS變量包含這個目錄。我建議在項目的根目錄中保留一個templates目錄。如果你這樣做，DIRS變量值將變成類似這樣:

最后，還有OPTIONS變量。每個后端都能接受各種選項。startproject設置了許多上下文處理器。我們將在后面文章中回到上文處理器的話題上來。

模板設置好之后，你就可以繼續往下進行了！

配合渲染器使用模板

Django通過渲染模板的方式來構建用戶界面。渲染的思想是通過動態數據結合靜態模板文件來產生最終的輸出。

為了生成包含渲染輸出的HttpResponse, 我們使用render函數。讓我們看一個例子，

在這個例子中，這個視圖將使用路徑為templates/hello.txt的模板，它的內容：

當這個視圖對一個請求進行應答時，用戶將在它的瀏覽器中看到“Hello Johnny”。關于這個例子，這里有一些有趣的事情需要注意：

這個模板可以是任何類型的純文本文件。我們常用HTML來創建用戶界面，因此我們常看到some_template.html，但是Django模板系統可以渲染任何類型的純文本文件。
在渲染的過程中，Django使用上下文數據字典并以它的關鍵字作為模板中的變量名。由于特殊的雙花括號語法，在上下文中模板的后端把{{ name }}替換為字面值“Johnny”。

使用模板的核心觀念是將上下文和靜態布局相融合。文章的剩余部分會基于此觀念，并會展示Django模板語言還能帶來什么。

看到TemplateView，你可能會回想起上一篇文章。在那些例子中，我們提供一個模板名字，然后我說到Django會處理剩下的事情。現在你開始理解Django獲取模板名字，然后調用類似render的代碼來生成一個HttpResponse。當時，那些例子缺少與模板結合起來的上下文數據。下面是一個完整的例子復現上述過程，代碼如下：

這個例子用 get_context_data, 因此我們能向渲染系統中插入我們的動態數據，來產生我們想要的應答。

在一個真實的應用中，我們需要專注寫大量的代碼來構建一個真正動態的上下文(context)。為了使模板系統的機制清晰，在這些例子中我使用的是靜態數據。當你看到所使用的上下文時，試著去想象使用更加復雜的數據來創建一個用戶界面。

以上這些是渲染的基礎。我們現在把我們的注意力轉向Django模板語言的能力。

模板實戰

當使用模板時，我們把上下文數據插入到模板里各個占位符的位置。

模板變量是使用上下文填充占位符最常見的形式。上節中我們展示了一個使用name變量的例子。上下文字典中包含一個name關鍵字，而雙花括號{{ name }}代表name值應該展示在哪里。

當上下文數據更加復雜時，我們也可以用點號獲取。例如像這樣的模板上下文：

Django模板不能使用常規的字典(例如{{ address['street'] }})獲取這個上下文數據。這時你應該用點號記法來獲取字典中的數據。

上面模板將渲染成：

Django模板同時努力適應不同類型的上下文數據。你也可以傳遞一個Python類的實例，比如和前面字典關鍵字一樣屬性的地址類。這時模板工作的效果是一樣的。

通過使用標簽的形式，核心模板語言提供了標準的編程邏輯關鍵字。模板標簽是這樣{% some_tag %}，然而模板變量是這樣 {{ some_variable }}。變量代表用于填入值的占位符，但是標簽提供了更多的作用。

我們可以從兩個核心標簽開始學習，if 和 for。

標簽if用于模板需要處理條件判斷的時候。

這個例子只包含一個當用戶登錄到應用時歡迎信息的HTML頭部標簽。我們用if標簽開始這個例子。注意觀察if標簽結尾需要一個endif標簽。模板必須認真對待空格，因為布局依賴那些空格。模板語言不能像在Python中那樣用空格來表示范圍，所以需要用結束標簽。你可能猜到了，在if/endif標簽對中間也可以有else和elif標簽。

在這個例子中，只有一個頭部標簽根據用戶是否驗證來渲染。

for循環標簽是另一個核心標簽。在Django模板中，for循環會像你想象到的那樣工作。

Django會循環遍歷像列表一樣的可迭代對象，并對每個可迭代對象的中的項讓用戶輸出模板響應。如果上面的例子中列表的內容像下面一樣：

對應的輸出的大概會是這樣：

有時在for循環中的某個特定的元素上，你可能想采取一些特別的操作。在模板中不能直接使用Python內建的enumerate函數，但是在for標簽中有一個叫forloop的特別變量可用。這個forloop變量有一些你可用的屬性像first和last，讓模板對某個循環對象做不同的處理。

這個例子會這樣生成：

有了變量、if標簽以及for標簽，你可以制作一些相當強大的模板，但是除了這些還有更多東西可以發掘。

更多關于上下文的內容

在整個模板的設置項中，我們沒有詳細講解上下文處理器。上下文處理器是當模板被渲染時可以用來擴展上下文的有效方式。

這是一組當你用Django的startproject命令時默認生成的上下文處理器配置。

上下文處理器是接收HttpRequest，處理后返回字典的函數（嚴格來說是調用者，不過這里關注的是函數）。返回的字典和其他上下文一起傳遞給模板。

我們看看包含在上述列表中request的上下文處理器的實際定義。

這就是定義！因為有上下文處理器，這個request對象可以在你項目的任何模板中當作變量使用。這個功能非常強大。

工具條

不要害怕去看項目依賴的源代碼。記住你最喜歡的框架都是普通人寫的。你可以從他們寫的代碼中學到有價值的東西。這些代碼最開始可能看起來比較嚇人，但是這沒有捷徑可走。

上下文處理器的副作用是它們會對所有的請求都執行。如果你寫了一個做大量計算運行緩慢的上下文處理器，每個請求都會受到這個性能的影響。

所以，需要小心謹慎地使用上下文處理器。

可復用的模板代碼

現在讓我們說說模板系統的一個強大特性：可復用的代碼片段。

想象一個網站，大部分的頁面有相似的外觀和感覺。他們通過重復大量相同的HTML實現，HTML是一種定義頁面結構的超文本標記語言。這些頁面使用相同的CSS（層疊樣式表），層疊樣式表是定義頁面元素外觀形狀的樣式。

想象你被要求管理一個網站，并且你需要創建兩個獨立的頁面。主頁看起來像這樣：

并且在網站背后有一個介紹公司的頁面。

這些例子有少量的HTML，但是如果你被要求把styles.css樣式表改為設計師制作的叫做 better_styles.css新的樣式表怎么辦？你需要在兩個頁面同時更新。現在想象你有2000個頁面而不是兩個頁面，在這樣一個網站快速地做大量修改幾乎不可能。

Django通過用幾個標簽幫助你完全避免這樣的情形。讓我們寫一個取名base.html的新模板。

我們通過block標簽創建了一個可復用的模板！我們可以修改我們的主頁使用這個新模板。

這個新版主頁擴展了這個基礎模板。所有模板需要做的是定義自己的用于填充內容的main語句塊。我們可以對介紹頁面做相同的操作。

如果我們現在重新接到將styles.css樣式表替換為better_styles.css樣式表的任務時，我們可以在base.html中更新，然后將修改的內容應用到所有以它為基礎模板擴展的頁面。即使有2000個從base.html擴展的頁面，改變樣式表時依然是一行代碼就可以改變整個站點。

這就是Django模板擴展系統的強大之處。

另一個復用的強大的工具是include的標簽。當你想在多個地方引用一部分模板代碼時include標簽非常有用。你想用include來實現：

保持模板整潔。你可以將一個大模板拆分成多個更好管理的小片段。
在你網站的不同部分用其中某一個模板片段。你可能有一個模板片段可能只會在幾個頁面用。

回到我們網站的例子，想象base.html代碼行數增長到20000行。找到模板中你想改變的部分現在變得更加困難。我們可以將模板分解成更小的片段。

這個include標簽可以將那些額外的模板片段包含到所在位置。給模板取一個好的名字，如果你需要像導航一樣改變一些章節的結構，你可以通過合適名字找到所需要的模板。

block, extends和include是保持用戶界面代碼避免在大量重復中無序擴展的核心標簽。

接下來，讓我們討論更多Django的內置模板標簽，這些標簽使你更加熟練掌控UI。

模板的工具箱

Django的文檔中包含大量可用于項目的內置標簽。我們的內容無法覆蓋所有這些標簽，但是我將關注幾個標簽給你展示哪些東西是可用的。

除了我們已經講過的標簽外，其中最常用的一個內置標簽就是url標簽。回憶那篇關于URLs的文章，通過reverse函數你可以將URL與一個命名視圖聯系起來。如果你想模板中用URL怎么辦？你可以這樣做：

盡管這樣可以運行，但是所有URL必須通過上下文路由是令人厭煩的。然而，我們的模板可以直接創建所需要的URL。下面才是a_template.html應該有的樣子。

這個url標簽是模板中與reverse函數作用一樣的東西。像它的reverse一樣，url可以接受args或者kwargs參數，這些是期望用于路由的其他變量。url是一個極其有用的工具并且是很可能在創建用戶界面中用很多次的標簽。

另一個有用的標簽是now標簽。now是一個用于展示當前時間相關信息方便的方法。用Django中的格式說明符，你可以告訴模板怎樣去展示當前時間。想在網站里添加當前的版權年份嗎？一點問題都沒有！

最后需要學習的內建標簽是spaceless標簽。HTML對空格部分敏感。有一些令人沮喪的情形，當你構建用戶界面時，空格敏感性帶來的后果會非常可怕。

當你用CSS的時候，在那些列表項前面縮進的空格（或者跟著它們的下一行字符）可能會給你帶來麻煩。意識到空格可能影響布局這個問題，我們可以像下面這樣使用spaceless標簽：

這個整潔的模板小標簽會移除所有HTML標簽中間的空格，所以效果是這樣的：

通過移除額外的空格，你在用CSS樣式表時獲得更多便利的體驗，并避免一些沮喪情緒。

這里還有另一種內建類型我們目前還沒有學習到。另一種內建函數叫做過濾器。過濾器改變你模板中變量的輸出。過濾器的語法有一點有趣。它看起來像這樣：

這里面重要的元素是緊跟在每個變量后面的管道符號。這個符號是在告訴模板系統我們想要對變量做一些轉換。需要注意的是過濾器用在雙花括號中，而不是像使用標簽那樣的{%語法。

一個非常常見的過濾器是date過濾器。當你在上下文中傳遞Python的時間實例，你可用date過濾器來控制時間的格式。date過濾器的文檔中演示了在修改時間格式時可用的選項有哪些。

如果a_datetime是一個4月愚人節的實例，然后它會返回像2020-04-01的字符串。date過濾器有許多格式說明符，你可生成所能想到的絕大多數日期輸出格式。

當模板變量的值計算為False時，default是一個有用的過濾器。當你獲取到一個變量為空字符串時，這是完美的。下面這個例子中如果變量是非真值，將會輸出“Nothing to see here”。

length是一個簡單的列表過濾器。{{ a_list_variable | length }} 將會計算出一個數字。它功能和Django模板中的len函數一樣。

我非常喜歡linebreaks過濾器。如果你創建一個表格（下一篇文章我們會學習到）并且有一個文本區域用戶可以輸入新行，如果當渲染用戶數據時你想顯示那些新行，linebreaks過濾器會非常有用。HTML默認不會顯示換行的字符。linebreaks過濾器會將\n轉換為一個<br> HTML標簽，這很方便！

在繼續往下學習之前，讓我們學習兩個標簽。

當文本需要計算東西的個數時候，pluralize是一個方便的標簽。下面是計算項目數的例子。

如果列表中有0、1 或者更多的項目，pluralize標簽將計算出正確的結果。

在我們學習的旅程中，最后一個是yesno標簽。yesno適合將True|False|None轉換成有意義的文本消息。想象我們創作一個應用追蹤各種事件，用戶注意力集中在三個值中的某一個。我們模板可能看起來像這樣。

依賴于user_accepted這個值，模板將會展示一些有用的信息給用戶。

還有很多Django的內建功能，挑選我最喜歡的功能是非常困難的。你可以查一下完整的列表，看看哪些可能會你有用。

如果Django內置功能沒有覆蓋你想要的功能怎么辦？不要怕，Django允許你為自己定制標簽和過濾器。接下來我們看看如何來實現。

構建你自己的模板武器

當你需要構建你自己的模板標簽或者過濾器時，Django給你提供了制作它們的工具。

這里有三個主要的元素用來定制標簽：

在Django期望的地方定義你自己的標簽。
在模板引擎中注冊標簽。
在模板中加載標簽，這樣它們可被用。

第一步是將標簽放到正確的位置。為此，在Django應用中我們需要一個名為templatetags的Python包。我們也需要一個模塊在那個目錄里。要小心謹慎地給模塊命名，因為它會在稍后加載到模板時用。

下一步，我們需要制作標簽或者過濾器并且注冊它。讓我們從過濾器的例子開始。

現在，如果我們有一個message變量，我們可以給它提供一些pizzazz。為了用這個定制的過濾器，我們必須用load標簽把我們的標簽模板加載到模板。

如果我們的消息是“You got a perfect score!”，然后模板會選擇三個選項之一，顯示在這條信息之后，比如“You got a perfect score! Wowza!”。

簡單的定制標簽的編寫和定制過濾器非常的相似。這里代碼比語言描述的更好。

我們可以加載這個定制標簽，并且像其他內建標簽一樣用我們標簽。

這個搞笑的歡迎標簽會處理多個輸入變量并且根據提供的級別進行變化。這個例子的中會顯示“Hello great champion He-Man!”。

在我們的例子中，僅僅學習了最常見的定制標簽。還有許多更加高級的定制標簽特性，你可以在Django定制模板標簽文檔探索。

總結

現在我們已經學習了模板的實戰！我們已經學習的以下內容：

如何設置你網站的模板
從視圖中調用模板的方法
如何使用數據
如何處理邏輯
可用于模板的內置標簽和過濾器
使用你自己的代碼擴展定制模板

英文原文：https://www.mattlayman.com/understand-django/templates-user-interfaces/
譯者：穆勝亮

文為Django技術學習筆記，相關教材為清華大學出版社出版的《Django開發寶典》。

這一節介紹Django開發的前端技術，主要為HTML相關知識點補記。

1.1 初識HTMl

1.1.1 HTML的定義

HTML是用來描述網頁的一種語言。

HTML是指超文本標記語言（Hyper Text Markup Language）。
HTML不是一種編程語言，而是一種標記語言（Markup Language）。
標記語言是一套標記標簽（Markup Tag），HTML使用標記標簽來描述網頁。

1.1.2 HTML標簽

HTML標記標簽通常被稱為HTML標簽（HTML Tag）。

HTML標簽是由尖括號括起來的關鍵詞，如<html>。
HTML標簽通常是承兌出現的，如<b>和</b>。
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽；開始標簽和接數標簽也被稱為開放標簽和閉合標簽。

1.1.3 HTML元素

HTML元素是指開始標簽（Start Tag）到接數標簽（End Tag）的所有代碼。

1.2 走進HTML

1.2.1 HTML編輯器

可以是用專業編輯器來編輯，推薦使用文本編輯器來學習HTML。

1.2.2 HTML標題

HTML標題（Heading）是通過<h1>~<h6>等標簽進行定義的。例如：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h2>This is a heading</h2>

1.2.3 HTML段落

HTML段落是通過<p>標簽進行定義的。例如：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

1.2.4 HTML鏈接

HTML使用超級鏈接與網絡上的另一個文檔相連。幾乎在任何一個網頁中都能找到超級鏈接，單擊超級鏈接可以從一張頁面跳轉到另一張頁面。

通過使用<a>標簽可以在HTML中創建超級鏈接，具體有一下兩種使用/標簽的方式。

1. 通過使用href屬性創建指向另一個文檔的鏈接。

1. 通過使用name屬性創建文檔內的標簽。

使用target屬性可以定義被超級鏈接的文檔要在何處顯示。下面的這行會在新窗口打開文檔：

<a  target = "_blank">百度一下，你就知道</a>

1.2.5 HTML圖像

要在頁面上顯示圖像需要使用（src），src是指"source"。源屬性的值是圖像的URL地址。定義圖像的語法是：

< img src = "url" /> //URL指存儲圖像的位置

1.2.6 HTML表格

表格由<table>標簽來定義。每個表格均有若干行（由<tr>標簽定義），每行被分割為若干單元格（由<td>標簽定義）。字母td是指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。

<table border = "1"> 
 <tr> 
 <td>row 1,cell 1</td> 
 <td>row 1,cell 2</td> 
 </tr> 
 <tr> 
 <td>row 2,cell 1</td> 
 <td>row 2,cell 2</td>
 </tr>
</table>

1.2.7 HTML列表

HTML支持有序列表、無序列表和自定義列表。

1）有序列表

無序列表是一個項目的列表，此列表項目使用粗體原點（典型的小黑圓圈）進行標記。無序列表始于<ul>標簽，每個列表項始于<li>標簽。

<ul> 
<li>Coffee</li>
 <li>Milk</li>
</ul>

2）無序列表

有序列表是一個項目的列表，此列表項目使用數字進行標記。有序列表始于<ol>標簽，每個列表始于<li>標簽。

<ol> 
<li>Coffee</li> 
<li>Milk</li>
</ol>

3）自定義列表

自定義列表不僅是一個項目的列表，也是項目及其注釋的組合。自定義列表以<dl>標簽開始，每個自定義列表項以<dt>標簽開始，每個自定義列表項的定義以<dd>標簽開始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd> 
<dt>Milk</dt> 
<dd>White cold drink</dd>
</dl>

1.2.8 HTML表單和輸入

1）表單

HTML表單用于收集不同類型的用戶輸入信息。表單使用表單標簽（<form>）定義。

<form>... input 元素...</form>

2）輸入

多數情況下被用到的表單標簽是輸入標簽（<input>），輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下。

（1）文本域（Text Fields）。當用戶要在表單中輸入字母、數字等內容時，就會用到文本域。

<form>
First name: 
<input type="text" name="firstname" />
Last name: 
<input type="text" name="lastname" />
</form>

（2）單選按鈕（Radio Buttons）。當用戶需要從若干給定的選擇中選取其一時，就會用到單選按鈕。主義，只能從中選取其一。

<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
</form>

（3）復選框（Checkboxes）。當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到復選框。

<form>
<input type="checkbox" name="bike" /> I have a bike
<input type="checkbox" name="car" /> I hava a car
</form>

3）表單的動作屬性（Action）和確認按鈕

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

<form name="input" action="html_form_action.asp" method="get">
Username:<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

1.2.9 HTML背景

<body>擁有兩個配置背景的標簽，背景可以是顏色或者圖像。

1）背景顏色（Bgcolor）

背景顏色屬性將背景設置為某種顏色，屬性值可以是十六進制數、RGB值或顏色名。

<body bgcolor = "#00000">
<body bgcolor = "rgb(0,0,0)">
<body bgcolor = "black">

2）背景（Background）

背景屬性將背景設置為圖像，屬性值為圖像的URL。如果圖像尺寸小于瀏覽器窗口，那么圖像將在整個瀏覽器窗口進行復制。

<body backgroud = "clouds.gif">
<body backgroud = "http://www.w3school.com.cn/clouds.gif">

1.2.10 HTML樣式

當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下3種方式來插入樣式表。

1）外部樣式表

當樣式需要被應用到很多頁面時，外部樣式表將是理想的選擇。使用外部樣式表，用戶就可以通過更改一個文件來改變整個站點的外觀。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2）內部樣式表

當單個文件需要特別樣式表時，就可以使用內部樣式表。用戶可以在head部分通過<style>標簽定義內部樣式表。

<head> 
<style type="text/css">
body {backgroud-color:red} 
p {margin-left:20px} 
</style>
</head>

3）內聯樣式

當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何CSS屬性。以下示例顯示出如何改變段落的顏色和左外邊距。

在線咨詢

上一篇：CSS 表單美化-outstyle
下一篇：Vue實戰081：多HTML標簽元素如何實現并排顯示詳解

您的項目需求

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

整合營銷服務商

學會用HTML-flex布局制作漂亮的網頁

、摘 要

二、pycharm操作說明

1. 創建項目

2. 創建HTML文件

3. HTML格式說明

三、網頁設計

1. 草圖繪制

2. css名字定義

四、網頁開發

1. body部分

2. 網頁測試

3. head部分

五、總 結

文為Django技術學習筆記，相關教材為清華大學出版社出版的《Django開發寶典》。

這一節介紹Django開發的前端技術，主要為HTML相關知識點補記。

1.1 初識HTMl

1.1.1 HTML的定義

1.1.2 HTML標簽

1.1.3 HTML元素

1.2 走進HTML

1.2.1 HTML編輯器

1.2.2 HTML標題

1.2.3 HTML段落

1.2.4 HTML鏈接

1.2.5 HTML圖像

1.2.6 HTML表格

1.2.7 HTML列表

1.2.8 HTML表單和輸入

1.2.9 HTML背景

1.2.10 HTML樣式

您的項目需求

、摘要

五、總結