- 表格标簽(隻要是展示資料 一般都可以使用表格标簽)
- 表單标簽(重要:擷取前端使用者資料發送給後端)
- 偷窺一下後端架構的基本使用(flask)
- css層貼樣式表(選擇器)
表格标簽
...
<table>
<thead>
<tr> 一個tr就表示一行
<th>username</th> 加粗文本
<td>username</td> 正常文本
</tr>
</thead> 表頭(字段資訊)
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>read</td>
</tbody> 表單(資料資訊)
</table>
原生的表格标簽很醜 但是後續我們一般都是使用架構封裝好的 很好看
### 表單标簽
```python
"""
能夠擷取前端使用者資料(使用者輸入的、使用者選擇、使用者上傳...)基于網絡發送給後端伺服器
"""
# 寫一個注冊功能
<form action=""></form> 在該form标簽内部書寫的擷取使用者的資料都會被form标簽送出到後端
action:控制資料送出的後端路徑(給哪個服務端送出資料)
1.什麼都不寫 預設就是朝目前頁面所在的url送出資料
2.寫全路徑:https://www.baidu.com 朝百度服務端送出
3.隻寫路徑字尾action='/index/'
自動識别出目前服務端的ip和port拼接到前面
host:port/index/
<label for="d1"> 第一種 直接講input框寫在label内
username:<input type="text" id="d1">
</label> 第二種 通過id連結即可 無需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label關聯也沒有問題
"""
label 和 input都是行内标簽
"""
input标簽 就類似于前端的變形金剛 通過type屬性變形
text:普通文本
password:密文
date:日期
submit:用來觸發form表單送出資料的動作
button:就是一個普普通通的按鈕 本身沒有任何的功能 但是它是最有用的，學完js之後可以給它自定義各種功能
reset:重置内容
radio:單選
預設選中要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
當标簽的屬性名和屬性值一樣的時候可以簡寫
<input type="radio" name="gender" checked>女
checkbox:多選
<input type="checkbox" checked>DBJ
file:擷取檔案 也可以一次性擷取多個
<input type="file" multiple>
hidden:隐藏目前input框
釣魚網站
select标簽 預設是單選 可以加mutiple參數變多選 預設選中selected
<select name="" id="" multiple>
<option value="" selected>新垣結衣</option>
<option value="" selected>斯佳麗</option>
<option value="">明老師</option>
</select>
textarea标簽 擷取大段文本
<textarea name="" id="" cols="30" rows="10"></textarea>
# 能夠觸發form表單送出資料的按鈕有哪些(一定要記住)
1、<input type="submit" value="注冊">
2、<button>點我</button>
# 所有擷取使用者輸入的标簽 都應該有name屬性
name就類似于字典的key
使用者的資料就類似于字典的value
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p> 驗證form表單送出資料
# 接下來的架構代碼無需掌握 看一下效果即可
pip3 install FLASK
form表單預設送出資料的方式 是get請求 資料是直接放在url後面的
http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通過method指定送出方式
<form action="http://127.0.0.1:5000/index/" method="post">
針對使用者選擇的标簽 使用者不需要輸入内容 但是你需要提前給這些标簽添加内容value值
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" checked value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="basketball">籃球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">雙色球
</p>
<p>province：
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
</select>
</p>
"""
form表單送出檔案需要注意
1.method必須是post
2.enctype="multipart/form-data"
enctype類似于資料送出的編碼格式
預設是urlencoded 隻能夠送出普通的文本資料
formdata 就可以支援送出檔案資料
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
"""下面的代碼無需掌握 你隻需要關心form表單即可"""
from flask import Flask, request
app = Flask(__name__)
# 目前url既可以支援get請求也可以支援post請求 如果不寫預設隻能支援get請求
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 擷取form表單送出過來的非檔案資料
# ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
print(request.files) # 擷取檔案資料
file_obj = request.files.get('myfile.png')
file_obj.save(file_obj.name)
return 'OK'
app.run()
# 針對使用者輸入的标簽。如果你加了value 那就是預設值
<label for="d1">username:<input type="text" id="d1" name="username" value="預設值"></label>
disable 禁用
readonly隻讀 CSS
# 注釋
/*單行注釋*/
/*
多行注釋1
多行注釋2
多行注釋3
*/
通常我們在寫css樣式的時候也會用注釋來劃定樣式區域(因為HTML代碼多是以對呀的css代碼也會很多)
/*這是部落格園首頁的css樣式檔案*/
/*頂部導覽列樣式*/
...
/*左側菜單欄樣式*/
...
/*右側菜單欄樣式*/
...
# css的文法結構
選擇器 {
屬性1:值1;
屬性2:值2;
屬性3:值3;
屬性4:值4;
}
# css的三種引入方式
1.style标簽内部直接書寫(為了教學示範友善我們用第一種)
<style>
h1 {
color: burlywood;
}
</style>
2.link标簽引入外部css檔案(最正規的方式 解耦合)
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
老闆好 要上課嗎? """
css的學習流程
1.先學如何查找标簽
css查找标簽的方式你一定要學會
因為後面所有的架構封裝的查找語句都是基于css來的
css選擇器很簡單很好學不要有壓力!!!
2.之後再學如何添加樣式
""" CSS選擇器
基本選擇器
# id選擇器
# 類選擇器
# 元素/标簽選擇器
# 通用選擇器
<style>
/*id選擇器*/
/*#d1 { !*找到id是d1的标簽 将文本顔色變成綠黃色*!*/
/* color: greenyellow;*/
/*}*/
/*類選擇器*/
/*.c1 { !*找到class值裡面包含c1的标簽*!*/
/* color: red;*/
/*}*/
/*元素(标簽)選擇器*/
/*span { !*找到所有的span标簽*!*/
/* color: red;*/
/*}*/
/*通用選擇器*/
/** { !*将html頁面上所有的标簽全部找到*!*/
/* color: green;*/
/*}*/
</style> 組合選擇器
"""
在前端 我們将标簽的嵌套用親戚關系來表述層級
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
div裡面的p span都是div的後代
p是div的兒子
p裡面的span是p的兒子 是div的孫子
div是p的父親
...
"""
# 後代選擇器
# 兒子選擇器
# 毗鄰選擇器
# 弟弟選擇器
/*後代選擇器*/
/*div span {*/
/* color: red;*/
/*}*/
/*兒子選擇器*/
/*div>span {*/
/* color: red;*/
/*}*/
/*毗鄰選擇器*/
/*div+span { !*同級别緊挨着的下面的第一個*!*/
/* color: aqua;*/
/*}*/
/*弟弟選擇器*/
div~span { /*同級别下面所有的span*/
color: red;
} 屬性選擇器
"""
1 含有某個屬性
2 含有某個屬性并且有某個值
3 含有某個屬性并且有某個值的某個标簽
"""
# 屬性選擇器是以[]作為标志的
/*[username] { !*将所有含有屬性名是username的标簽背景色改為紅色*!*/
/* background-color: red;*/
/*}*/
/*[username='jason'] { !*找到所有屬性名是username并且屬性值是jason的标簽*!*/
/* background-color: orange;*/
/*}*/
/*input[username='jason'] { !*找到所有屬性名是username并且屬性值是jason的input标簽*!*/
/* background-color: wheat;*/
/*}*/