SDL開發筆記（三）：使用SDL渲染視窗顏色和圖片
阿新 • • 發佈：2020-09-16
目錄
表格標籤
jason 123 read egon 123 dbj tank 123 hecha ... <table> <thead> <tr> 一個tr就表示一行 <th>username</th> 加粗文字 <td>username</td> 正常文字 </tr> </thead> 表頭(欄位資訊) <tbody> <tr> <td>jason</td> <td>123</td> <td>read</td> </tr> </tbody> 表單(資料資訊) </table> <table border="1"> 加外邊寬 <td colspan="2">egon</td> 水平方向佔多行 <td rowspan="2">DBJ</td> 垂直方向佔多行 # 原生的表格標籤很醜 但是後續我們一般都是使用框架封裝好的 很好看
表單標籤
""" 能夠獲取前端使用者資料(使用者輸入的、使用者選擇、使用者上傳...)基於網路傳送給後端伺服器 """ # 寫一個註冊功能 <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
什麼是css？
css全稱Cascading Style Sheet層疊樣式表，是專門用來為HTML標籤新增樣式的，讓它變的更加的好看
為何要用css？
解決以下缺點
1，記憶困難：需要記憶每個標籤的所有樣式相關屬性，如果標籤沒有某個樣式相關的屬性，那麼設定了也沒有效果
2，程式碼耦合度高：HTML語義與樣式耦合在一起
3，擴充套件性差：當某一類樣式需要修改時，我們需要找到所有設定了該樣式標籤進行修改
# 註釋
/*單行註釋*/
/*
多行註釋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.行內式(一般不用)
<h1 style="color: green">老闆好 要上課嗎?</h1>
4，匯入式
<head>
<style>
/*形式一：*/
/*@import "css/mystyle.css";*/
/*形式二：*/
@import url("css/mystyle.css");
</style>
</head>
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;*/
/*}*/
分組與巢狀
div,p,span { /*逗號表示並列關係*/
color: yellow;
}
#d1,.c1,span {
color: orange;
}
偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
}
a:link { /*訪問之前的狀態*/
color: red;
}
a:hover { /*需要記住*/
color: aqua; /*滑鼠懸浮態*/
}
a:active {
color: black; /*滑鼠點選不鬆開的狀態 啟用態*/
}
a:visited {
color: darkgray; /*訪問之後的狀態*/
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
input:focus { /*input框獲取焦點(滑鼠點了input框)*/
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">小軒在不在?</a>
<p>點我有你好看哦</p>
<input type="text">
</body>
</html>
偽元素選擇器
p:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文字開頭 同css新增內容*/
content: '你說的對';
color: blue;
}
p:after {
content: '雨露均沾';
color: orange;
}
ps:before和after通常都是用來清除浮動帶來的影響:父標籤塌陷的問題(後面馬上講)
選擇器優先順序
"""
id選擇器
類選擇器
標籤選擇器
行內式
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
1.選擇器相同 書寫順序不同
就近原則:誰離標籤更近就聽誰的
2.選擇器不同 ...
行內 > id選擇器 > 類選擇器 > 標籤選擇器
精確度越高越有效
*/
#d1 {
color: aqua;
}
/*.c1 {*/
/* color: orange;*/
/*}*/
/*p {*/
/* color: red;*/
/*}*/
</style>
<!-- <link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
<p id="d1" class="c1" style="color: blue">賢妻果然很識趣，有前途~</p>
</body>
</html>
css三大特性
1，繼承性
1,定義:給某一個元素設定一些屬性,該元素的後代也可以用,這個我們就稱之為繼承性
2,注意:
1,只有以color,font-,text-line-開頭的屬性才可以繼承
2,a標籤的文字顏色和下劃線是不能繼承別人的
3,h標籤的文字大小是不能繼承別人的,會變大,但是會在原來的字型大小的基礎上變大
ps:開啟瀏覽器審查元素可以看到一些inherited from...的屬性
3,應用場景:
通常基於繼承性統一設定網頁的文字顏色,字型,文字大小等樣式
2,層疊性
1,定義:css全稱:Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理衝突的一種能力，即如果有多個選擇器選中了同一個標籤那麼會有覆蓋效果
2,注意:
1,層疊性只有在多個選擇器選中了同一個標籤,然後設定了相同的屬性,
才會發生重疊
ps:通過谷歌瀏覽器可以檢視到,一些屬性被劃掉了
3,優先順序
1,定義:當多個選擇器選中同一個標籤,並且給同一個標籤設定相同的屬性時,如何層疊就有優先順序來確定
2,優先順序
整體優先順序從高到低:行內樣式>嵌入樣式>外部樣式
行內樣式並不推薦使用,所以我們以嵌入為例來介紹優先順序
1.大前提:直接選中>間接選中(繼承而來的)
2.如果都是間接選中,那誰離目標標籤最近就聽誰的
3.如果都是直接選中,並且都是同類型的選擇器,那麼就是誰寫的在後面就聽誰的
4.如果都是直接選中,並且是不同型別的選擇器,那麼就會按照選擇器的優先順序來層疊
id>類>標籤>萬用字元>繼承>瀏覽器預設(沒有設定任何屬性)
5.優先順序 !importtant
#1、作用：還有一種不講道理的!import方式來強制指定的屬性的優先順序提升為最高，但是不推薦使用。因為大量使用!import的程式碼是無法維護的。
#2、注意：
1、!important只能用於直接選中，不能用於間接選中
2、!important只能用於提升被指定的屬性的優先順序，其他屬性的優先順序不會被提升
3、!important必須寫在屬性值分號的前面
6.優先順序之權重計算
#1、強調
如果都是直接選中，並且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先順序
#2、計算方式
#1、id數多的優先順序高
#2、id數相同，則判定類數多的優先順序高
#3、id數、class數均相同，則判定標籤數多的優先順序高
#4、若id數、class數、標籤數均相同，則無需繼續往下計算了，誰寫在後面誰的優先順序高
css屬性相關
<style>
p {
background-color: red;
height: 200px;
width: 400px;
}
span {
background-color: green;
height: 200px;
width: 400px;
/*行內標籤無法設定長寬 就算你寫了 也不會生效*/
}
</style>
字型屬性
p {
/*font-family: "Arial Black","微軟雅黑","..."; !*第一個不生效就用後面的 寫多個備用*!*/
/*font-size: 24px; !*字型大小*!*/
/*font-weight: inherit; !*bolder lighter 100~900 inherit繼承父元素的粗細值*!*/
/*color: red; !*直接寫顏色英文*!*/
/*color: #ee762e; !*顏色編號*!*/
/*color: rgb(128,23,45); !*三基色 數字 範圍0-255*!*/
/*color: rgba(23, 128, 91, 0.9); !*第四個引數是顏色的透明度 範圍是0-1*!*/
/*當你想要一些顏色的時候 可以利用現成的工具
1 pycharm提供的取色器
2 qq或者微信截圖功能
也可以多軟體結合使用
*/
}
文字屬性
p {
/*text-align: center; !*居中*!*/
/*text-align: right;*/
/*text-align: left;*/
/*text-align: justify; !*兩端對齊*!*/
/*text-decoration: underline;*/
/*text-decoration: overline;*/
/*text-decoration: line-through;*/
/*text-decoration: none;*/
/*在html中 有很多標籤渲染出來的樣式效果是一樣的*/
font-size: 16px;
text-indent: 32px; /*縮排32px*/
}
a {
text-decoration: none; /*主要用於給a標籤去掉自帶的下劃線 需要掌握*/
}
背景圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d1 {
height: 500px;
background-color: red;
}
#d2 {
height: 500px;
background-color: green;
}
#d3 {
height: 500px;
background-image: url("222.png");
background-attachment: fixed;
}
#d4 {
height: 500px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
邊框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
background-color: red;
border-width: 5px;
border-style: solid;
border-color: green;
}
div {
/*border-left-width: 5px;*/
/*border-left-color: red;*/
/*border-left-style: dotted;*/
/*border-right-width: 10px;*/
/*border-right-color: greenyellow;*/
/*border-right-style: solid;*/
/*border-top-width: 15px;*/
/*border-top-color: deeppink;*/
/*border-top-style: dashed;*/
/*border-bottom-width: 10px;*/
/*border-bottom-color: tomato;*/
/*border-bottom-style: solid;*/
border: 3px solid red; /*三者位置可以隨意寫*/
}
#d1 {
background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /*直接寫50%即可 長寬一樣就是圓 不一樣就是橢圓*/
}
</style>
</head>
<body>
<p>窮人 被diss到了 哭泣.png</p>
<div>媽拉個巴子,媽拉個巴子,媽拉個巴子,媽拉個巴子</div>
<div id="d1"></div>
</body>
</html>
display屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*#d1 {*/
/* !*display: none; !*隱藏標籤不展示到前端頁面並且原來的位置也不再佔有了 但是還存在於文件上*!*!*/
/* display: inline; !*將標籤設定為行內標籤的特點*!*/
/*}*/
/*#d2 {*/
/* display: inline;*/
/*}*/
/*#d1 {*/
/* display: block; !*將標籤設定成塊兒級標籤的特點*!*/
/*}*/
/*#d2 {*/
/* display: block;*/
/*}*/
/*#d1 {*/
/* display: inline-block;*/
/*}*/
/*#d2 {*/
/* display: inline-block; !*標籤即可以在一行顯示又可以設定長寬*!*/
/*}*/
</style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">單純的隱藏 位置還在</div>
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
</body>
</html>
盒子模型
"""
盒子模型
就以快遞盒為例
快遞盒與快遞盒之間的距離(標籤與標籤之間的距離 margin外邊距)
盒子的厚度(標籤的邊框 border)
盒子裡面的物體到盒子的距離(內容到邊框的距離 padding內邊距)
物體的大小(內容 content)
如果你想要調整標籤與標籤之間的距離 你就可以調整margin
瀏覽器會自帶8px的margin，一般情況下我們在寫頁面的時候，上來就會先將body的margin去除
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0; /*上下左右全是0
/*margin: 10px 20px; !* 第一個上下 第二個左右*!*/
/*margin: 10px 20px 30px; !*第一個上 第二個左右 第三個下*!*/
/*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/
}
/*p {*/
/* margin-left: 0;*/
/* margin-top: 0;*/
/* margin-right: 0;*/
/* margin-bottom: 0;*/
/*}*/
#d1 {
margin-bottom: 50px;
}
#d2 {
margin-top: 20px; /*不疊加 只取大的*/
}
#dd {
margin: 0 auto; /*只能做到標籤的水平居中*/
}
p {
border: 3px solid red;
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 50px;*/
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
/*padding: 10px 20px 30px 40px;*/ /*規律和margin一模一樣*/
}
</style>
</head>
<body>
<!-- <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!-- <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!-- <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->
<p>ppp</p>
</body>
</html>
浮動
"""浮動的元素 沒有塊兒級一說 本身多大浮起來之後就只能佔多大"""
只要是設計到頁面的佈局一般都是用浮動來提前規劃好
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left; /*浮動 浮到空中往左飄*/
}
#d2 {
height: 200px;
width: 200px;
background-color: greenyellow;
float: right; /*浮動 浮到空中往右飄*/
}
</style>