Python web開發(fā)（五）：列表和表單
時(shí)間：2023-07-25 10:36:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-25 10:36:01 來源：網(wǎng)站運(yùn)營
Python web開發(fā)（五）：列表和表單：
Python爬蟲、數(shù)據(jù)分析、網(wǎng)站開發(fā)等案例教程視頻免費(fèi)在線觀看
https://space.bilibili.com/523606542 列表標(biāo)簽（重點(diǎn)）
HTML包含專門用于創(chuàng)建項(xiàng)目列表的元素。你可以創(chuàng)建普通列表、編號列表、符號列表以及描述列表，可以在一個(gè)列表中嵌套另外一個(gè)或多個(gè)列表。
所有的列表都是由主要元素和次要元素構(gòu)成的。主要元素用于指定要創(chuàng)建的列表的類型，其中，
ul 表示
無序列表 （unordered list），
ol 表示
有序列表 （ordered list），
dl 表示
描述列表（description list；在HTML5之前稱為定義列表）。次要元素用于指定要創(chuàng)建的列表項(xiàng)目類型，其中，
li 代表
ol 或
ul 中的列表項(xiàng)目，
dt 和
dd 分別代表
dl 中的術(shù)語和描述。
在這些類型里面，無序列表是萬維網(wǎng)上最為常見的列表類型，它也是對大多數(shù)類型的導(dǎo)航進(jìn)行標(biāo)記的事實(shí)標(biāo)準(zhǔn)（本書有幾個(gè)這樣的例子）。不過，上述三種類型都各有用武之地
表格一般用于數(shù)據(jù)展示的，但是網(wǎng)頁中還是有很多跟表格類似的布局，如下圖~~ 我們用什么做呢？
答：
答案是列表， 那什么是列表？ 表格是用來顯示數(shù)據(jù)的，那么列表就是用來布局的。 因?yàn)榉浅ＵR和自由
- 概念：
容器里面裝載著結(jié)構(gòu)，樣式一致的文字或圖表的一種形式，叫列表 - 特點(diǎn)：
列表最大的特點(diǎn)就是 整齊 、整潔、 有序，跟表格類似，但是他可組合自由度會更高。
無序列表 ul （重點(diǎn)）
無序列表的各個(gè)列表項(xiàng)之間沒有順序級別之分，是并列的。其基本語法格式如下：
<ul> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> ......</ul>比如下面這些，新聞是沒有順序的，不用排隊(duì)，先到先得，后發(fā)布先顯示。
?
??
腳下留心：1/. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。 2/. <li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。 3/. 無序列表會帶有自己樣式屬性，放下那個(gè)樣式，一會讓CSS來！有序列表 ol （了解）
?
??
有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列定義，有序列表的基本語法格式如下：
<ol> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> ......</ol>所有特性基本與ul 一致。 但是實(shí)際中比 無序列表 用的少很多。
自定義列表（理解）
定義列表常用于對術(shù)語或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號。其基本語法如下：
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> ... <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> ...</dl>列表總結(jié)
我們現(xiàn)在還沒有學(xué)布局，現(xiàn)在只要保證2個(gè)點(diǎn)：
- 學(xué)會什么時(shí)候用無序列表， 學(xué)會什么時(shí)候用自定義列表
- 無序列表和自定義列表代碼怎么寫？
- 具體的我們剛才看的布局，等我們學(xué)了css 在來全面布局。
表單標(biāo)簽(掌握)
目標(biāo)：
- 能寫出最常用的注冊類表單
- 能說出input表單常見屬性
現(xiàn)實(shí)中的表單，類似我們?nèi)ャy行辦理信用卡填寫的單子。 如下圖
?
??
作用：表單目的是為了收集用戶信息。
在我們網(wǎng)頁中， 我們也需要跟用戶進(jìn)行交互，收集用戶資料，此時(shí)也需要表單。
在HTML中，一個(gè)完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個(gè)部分構(gòu)成。
?
??
表單控件：? 包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。
提示信息：? 一個(gè)表單中通常還需要包含一些說明性的文字，提示用戶進(jìn)行填寫和操作。
表單域：? 他相當(dāng)于一個(gè)容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器。
input 控件(重點(diǎn))
- 語法：
<input type="屬性值" value="你好">
- input 輸入的意思
- <input />標(biāo)簽為單標(biāo)簽
- type屬性設(shè)置不同的屬性值用來指定不同的控件類型
- 除了type屬性還有別的屬性
?
??
1. type 屬性
- 這個(gè)屬性通過改變值，可以決定了你屬于那種input表單。
- 比如 type = 'text' 就表示 文本框 可以做 用戶名， 昵稱等。
- 比如 type = 'password' 就是表示密碼框 用戶輸入的內(nèi)容 是不可見的。
用戶名: <input type="text" /> 密 碼：<input type="password" />2. value屬性 值
用戶名:<input type="text" name="username" value="請輸入用戶名">- value 默認(rèn)的文本值。 有些表單想剛打開頁面就默認(rèn)顯示幾個(gè)文字，就可以通過這個(gè)value 來設(shè)置。
3. name屬性
用戶名:<input type="text" name=“username” /> name表單的名字， 這樣，后臺可以通過這個(gè)name屬性找到這個(gè)表單。 頁面中的表單很多，name主要作用就是用于區(qū)別不同的表單。
- name屬性后面的值，是我們自己定義的。
- radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個(gè)選其中的一個(gè)啦
<input type="radio" name="sex" />男<input type="radio" name="sex" />女- name屬性，我們現(xiàn)在用的較少， 但是，當(dāng)我們學(xué)ajax 和后臺的時(shí)候，是必須的。
4. checked屬性
- 表示默認(rèn)選中狀態(tài)。 較常見于 單選按鈕和復(fù)選按鈕。
性 別:<input type="radio" name="sex" value="男" checked="checked" />男<input type="radio" name="sex" value="女" />女上面這個(gè)，表示就默認(rèn)選中了 男 這個(gè)單選按鈕
5. input 屬性小結(jié)
label標(biāo)簽(理解)
目標(biāo)：label標(biāo)簽主要目的是為了提高用戶體驗(yàn)。 為用戶提高最優(yōu)秀的服務(wù)。
概念：label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)簽）。
作用：用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會獲得輸入焦點(diǎn)。
如何綁定元素呢？- 第一種用法就是用label直接包括input表單。
<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label>適合單個(gè)表單選擇
- 第二種用法 for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。
<label for="sex">男</label><input type="radio" name="sex" id="sex">當(dāng)我們鼠標(biāo)點(diǎn)擊 label標(biāo)簽里面的文字時(shí)， 光標(biāo)會定位到指定的表單里面
textarea控件(文本域)
?
??
<textarea > 文本內(nèi)容</textarea>- 作用：
通過textarea控件可以輕松地創(chuàng)建多行文本輸入框.
cols="每行中的字符數(shù)" rows="顯示的行數(shù)" 我們實(shí)際開發(fā)不用
文本框和文本域區(qū)別
select下拉列表
目的：如果有多個(gè)選項(xiàng)讓用戶選擇，為了節(jié)約空間，我們可以使用select控件定義下拉列表.
?
??
語法：<select> <option>選項(xiàng)1</option> <option>選項(xiàng)2</option> <option>選項(xiàng)3</option> ...</select>- <select> 中至少包含一對 option
- 在option 中定義selected =" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。
- 但是我們實(shí)際開發(fā)會用的比較少
form表單域
- 收集的用戶信息怎么傳遞給服務(wù)器？
通過form表單域 - 目的：
在HTML中，form標(biāo)簽被用于定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會被提交給服務(wù)器。
表單有三個(gè)重要的組成部分：
form 元素，其中包含用于處理表單的腳本的URL和處理表單的方法（
post 或
get ）；
表單元素，如字段和選擇框（復(fù)選框、下拉菜單、單選按鈕）；
提交按鈕，用于觸發(fā)向服務(wù)器上的接聽腳本發(fā)送數(shù)據(jù)的動作
**語法: **
<form action="url地址" method="提交方式" name="表單名稱"> 各種表單控件</form>常用屬性：注意:每個(gè)表單都應(yīng)該有自己表單域。我們現(xiàn)在做頁面，不寫看不到效果，但是 如果后面學(xué) ajax 后臺交互的時(shí)候，必須需要 form表單域。
綜合案例（注冊頁面）
?
??
在線咨詢
