今日內容概要

• 初窺後端框架

• css簡介

• css選擇器

今日內容詳細

初次體驗前後端互動

# 程式碼無需掌握 只看效果即可
"""後端框架:可以簡單的理解為別人寫好的一個非常牛逼的TCP服務端"""
以flask框架為例>>>:第三方框架 pip3 install flask
 

前端通過標籤獲取使用者資料傳送給後端的過程中 標籤需要有name屬性
	相當於字典的key
 	使用者輸入的資料會儲存到標籤的value屬性中 相當於字典的value
  	如果是選擇型標籤需要自行加上name和value

from flask import Flask,request
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)  # 獲取普通資料
    print(request.files)  # 獲取檔案資料
    # print(request.form.get('name'))
    file_obj = request.files.get('file')  # 獲取檔案物件
    file_obj.save('xxx.md')  # 儲存檔案
    return 'flask框架真簡單'
app.run()
 

css簡介

# 層疊樣式表>>>:就是給HTML標籤修改樣式
語法結構
	選擇器 {
    	屬性名1:屬性值1;
    	屬性名2:屬性值2
	}
註釋語法
	/*註釋內容*/ 
引入方式
	1.style內部直接編寫css程式碼
  		平時學習、練習的時候推薦使用
	2.link標籤引入外部css檔案
  		正式工作、實際生產環境推薦使用
	3.標籤內直接書寫
  		一般情況下不推薦使用 容易造成冗餘現象
"""
單獨開設的css檔案內程式碼也是非常多的 可以藉助於註釋管理	
	/*導航條樣式*/	
	/*側邊欄樣式*/
"""

基本選擇器(重要)

"""
css是用來調節標籤樣式的 那為什麼需要學選擇器呢?
	因為同一個頁面上有很多相似的標籤 並且這些標籤在不同的位置有不同的樣式 
	所以為了能夠區分 我們肯定先需要學習如何查詢指定的標籤
"""
1.標籤選擇器>>>:通過標籤名直接查詢
  	/*查詢所有的div標籤*/
  	div {  
		color: red;
	}
2.類選擇器(關鍵符號為句點符.)>>>:通過class值查詢標籤
  	/*查詢所有含有c1樣式類的標籤*/
  	.c1 {
		color: red;
	}
3.id選擇器(關鍵符號為警號#)>>>:通過id值查詢標籤
  	/*查詢id為d1的標籤*/
  	#d1 {
		color: orange;
	}
4.通用選擇器(瞭解)
    /*body內所有的標籤*/
    * {
		color: darkgray;
    }
 

組合選擇器(重點)

"""
為了區分巢狀標籤之間的關係 我們發明了一種稱呼
	<div>
		<p>
			<span></span>
		</p>
	</div>
span是p的兒子 是div的孫子也可以說是div的後代
p是div的兒子也是div後代 是span的父親
div是p的父親是span的爺爺 也可以說是他們的祖先

即：
	兒子：子標籤
	孫子：子標籤的子標籤
	後代：無限子標籤
	父親：父標籤
	爺爺：父標籤的父標籤
	祖先：無限父標籤
"""
1.後代選擇器(特徵為空格)
	/*查詢div內部所有的後代span*/
	div span {  
		color: red;
	}
  
2.兒子選擇器(特徵>)
 	/*查詢div內部所有的兒子span*/
	div > span { 
		color: greenyellow;
	}

3.毗鄰選擇器(特徵為+)
	/*查詢同級別下面緊挨著的第一個span(不能有其他標籤間隔)*/
	div + span {  
		color: pink;
	}

4.弟弟選擇器(特徵為~)
	/*查詢同級別下面所有的span(不需要緊挨著)*/
	div ~ span {  
		color: deeppink;
	}
 

屬性選擇器

# 標籤可以有預設的屬性也可以自定義屬性
	<p id="d1" class="c1" name="jason" pwd="123">123</p>
 
1、含有name屬性名的標籤
    [name] {  
        color: red;
    }
2、含有name屬性名並且值為jason的標籤
    [name='jason'] {  
        color: red;
    }
3、p標籤中含有name屬性名並且值為jason的
    p[name='jason'] {  
        color: red;
    }

分組與巢狀

# 1、多個相同選擇器並列使用
ag：查詢div或者span或者p
    div,span,p {  
        color: red;
    }
    
# 2、多個不同選擇器並列使用
ag：標籤查詢div id查詢d1 類查詢c1
    div,#d1,.c1 {  
        color: red;
    }

# 3、不併列同樣可以使用組合選擇器
ag：查詢class為c1的後代p標籤
    .c1 p {   
        color: red;
    }

# 4、直接篩選
ag1：查詢id為d1的div標籤
	div#d1 {  
		color: red;
	}
ag2：查詢class為c1的div標籤
	div.c1 {  
		color: red;
	}
"""
練習題
	#d1>div>.c1>span.c2：
        查詢id為d1的標籤內部的兒子div
        並且在兒子div內部查詢class為c1的兒子標籤
        並且在該兒子內部查詢class為c2的兒子span
"""

偽類選擇器

/*滑鼠懸浮在上面*/
a:hover {   # 重點掌握 很多網址都在用!!!
            color: orange;
}
    
"""a標籤預設的顏色會變化 第一次是藍色 後面是紫色"""

input:focus {
            background-color: red;
        }
"""我們將input框被使用者點選即將錄入資料的過程看成是focus狀態(聚焦狀態)"""

作業

1.自行隨意發揮搭建一個使用者註冊頁面(用上所有的知識點)
2.整理今日內容至部落格
3.嘗試著使用css給題目1的標籤加點樣式