上節復習
web開發
客戶端 服務端
瀏覽器 自己寫的小demo
HTML標簽
1. 單標簽和雙標簽
2. 內聯標簽和塊兒級標簽(是否獨占一行)
內聯: span img a b i
塊兒級: div h1~h6 p hr ul li ol
嵌套的規則:
1. 內聯的不能套塊兒級
2. p不能套塊兒級標簽
3. 展示用的和交互用的
4. table標簽
5. 列表
1. ul
2. ol
3. dl
6. 特殊符號
1.
2. ©
3. ®
4. <
5. >
HTML(body內常用標簽)
form表單
表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標簽。
表單屬性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>form表單示例</title>
</head>
<body>
<!--注冊示例--> # action為form表單提交給的路徑 # 提交時提交為字典格式name為鍵，type(控制輸入類型)為值
<form action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data" autocomplete="off" novalidate>
# method 請求 (HTTP協議)get---->展示信息的內容(默認get) post---->信息交互(傳文件)
# enctype form表單數據的格式(默認application/x-www-form-urlencoded) 傳文件要改成(multipart/form-data)
# autocomplete 自動補全 novalidate 不做校驗(郵箱例子)
<p>用戶名:
<input name="name" type="text" value="小強"> # value默認值為""，是一個值
<input name="name" type="text" placeholder="小強" disabled> # disabled不可用
</p> # placeholder默認放一個東西，不是值
<p>
<label for="i1">用戶名:</label> # 規范(加不加無區別)
<input id="i1" name="name" type="text" value="小強">
<input name="name" type="text" placeholder="小強" disabled>
</p>
<p>密碼:
<input name="password" type="password"> # password(類)會使輸入信息變成●
</p>
<p>郵箱:
<input type="email" name="email"> # email為郵箱
</p>
<p>
<input type="hidden" value="hidden"> # 隱藏按鈕與數據庫主鍵id配合使用
</p>
<p>性別:
<input name="gender" type="radio" value="1"> 男 # name類似於鍵值對的鍵 # value為值
<input name="gender" type="radio" value="0"> 女 # radio為單選勾選框(圓形)
<input checked name="gender" type="radio" value="2"> 保密 # 一組內name值相同
</p> # checked默認選中
<p>性別2:
<label for="r1">男</label>
<input id="r1" name="gender" type="radio" value="1">
<label>男
<input name="gender" type="radio" value="1">
</label>
<label for="r2"> 女</label>
<input id="r2" name="gender" type="radio" value="0">
<label for="r3">保密</label>
<input id="r3" checked name="gender" type="radio" value="2">
</p>
<p>愛好:
<input checked name="hobby" type="checkbox" value="basketball">籃球 # checkbox(正方形)勾選
<input name="hobby" type="checkbox" value="football">足球
<input checked name="hobby" type="checkbox" value="doublecolorball">雙色球
</p>
<p>生日:<input name="birthday" type="date"></p> # date年月日 datetime年月日時分秒
<select name="from1" id="s1"> # 下拉菜單
<option value="bj">北京</option>
<option value="sh" selected>上海</option> # selected默認選中
<option value="sc">四川</option>
</select>
<select name="from1" id="s11" multiple> # multiple下拉菜單多選(按ctrl)
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sc">四川</option>
</select>
<select name="from1" id="s11" multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sc">四川</option>
</select>
<select name="from2" id="s2"> # 下拉菜單(一共在一個菜單內)
<optgroup label="北京"> # 下拉菜單分組子菜單
<option value="cp">昌平</option>
<option value="cy">朝陽</option>
<option value="hd">海淀</option>
<option value="ft">豐台</option>
</optgroup>
<optgroup label="上海">
<option value="pdxq">浦東新區</option>
<option value="mhq">閔行區</option>
<option value="hpq">黃浦區</option>
</optgroup>
<optgroup label="四川">
<option value="pzh">攀枝花</option>
<option value="zg">自貢</option>
<option value="my">綿陽</option>
</optgroup>
</select>
<p><textarea name="info" id="t1" cols="30" rows="10">
# 個人簡介，一個大文本
</textarea></p>
<p>頭像:
<input name="lp" type="file"> # 上傳圖片
</p>
<p><input type="submit" value="提交s9"></p> # submit為提交按鈕，value為顯示按鈕上的內容
<p><input type="button" value="button"></p> # 普通按鈕
<p><input type="reset" value="reset"></p> # 重置按鈕 清空內容
</form>
</body>
</html>
from django.conf.urls import url from django.shortcuts import HttpResponse def upload(request): print("request.GET:", request.GET) print("request.POST:", request.POST) if request.FILES: filename = request.FILES["file"].name with open(filename, 'wb') as f: for chunk in request.FILES['file'].chunks(): f.write(chunk) return HttpResponse('上傳成功') return HttpResponse("收到了！") urlpatterns = [ url(r'^upload/', upload), ] Django接收上傳文件代碼
1. form表單相關內容 form 與 from
前后端有數據交互的時候用form表單
form表單提交數據的幾個注意事項:
1.所有獲取用戶輸入的標簽都必須放在form表單里面
2. action控制着往哪兒提交
3. input\select\textarea 都需要有name屬性
4. 提交按鈕 <input type="submit">
input標簽
<input> 元素會根據不同的 type 屬性，變化為多種形態。
屬性說明:
- name：表單提交時的“鍵”，注意和id的區別
- value：表單提交時對應項的值
- type="button", "reset", "submit"時，為按鈕上顯示的文本年內容
- type="text","password","hidden"時，為輸入框的初始值
- type="checkbox", "radio", "file"，為輸入相關聯的值
- checked：radio和checkbox默認被選中的項
- readonly：text和password設置只讀
- disabled：所有input均適用
select標簽
屬性說明：
- multiple：布爾屬性，設置后為多選，否則默認單選
- disabled：禁用
- selected：默認選中該項
- value：定義提交時的選項值
label標簽
定義：<label> 標簽為 input 元素定義標注（標記）。
說明：
- label 元素不會向用戶呈現任何特殊效果。
- <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。
<form action=""> <label for="username">用戶名</label> <input type="text" id="username" name="username"> </form>
textarea標簽(多行文本)
<textarea name="memo" id="memo" cols="30" rows="10"> 默認內容 </textarea>
屬性說明：
- name：名稱
- rows：行數
- cols：列數
- disabled：禁用
小總結
input系列:
text 文本
value 設置默認值
placeholder 設置占位內容
password 密碼
radio 單選框
checkbox 多選框
date 日期 年月日
datetime 時間 年月日時分秒
file 文件
button 普通按鈕,多用JS給它綁定事件
reset 重置按鈕
submit 提交按鈕
textarea 大段文本(文本區域)
select 下拉菜單
option 具體的下拉選項
optgroup 分組的下拉框
-label="上海"
CSS篇
CSS介紹
CSS---->HTML骨架
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。
1. 重復的樣式
2. 文檔內容和樣式的解耦
CSS基本語法
每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之后用分號結束。
CSS注釋 /*注釋內容*/---->單行注釋 多行注釋直接用換行即可
CSS引入方式
行內樣式
直接寫在標簽里面 style="樣式1;樣式2;"
<p style="color: red">Hello world.</p>
內部樣式
在head中通過style標簽定義
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
外部樣式(一般常用)
把樣式單獨寫在css文件中,然后在html文件中通過link標簽導入
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
CSS選擇器
基本選擇器
元素選擇器(標簽名)
p {color: "red";}
ID選擇器(#id名)
#i1 {
background-color: red;
}
類選擇器(.類名)
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
注意：
樣式類名不要用數字開頭（有的瀏覽器不認）。
標簽中的class屬性如果有多個，要用空格分隔。
通用選擇器(*)
* {
color: white;
}
組合選擇器
后代選擇器
/*li內部的a標簽設置字體顏色*/
li a {
color: green;
}
兒子選擇器
/*選擇所有父級是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
毗鄰選擇器
/*選擇所有緊接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
弟弟選擇器
/*i1后面所有的兄弟p標簽*/
#i1~p {
border: 2px solid royalblue;
}
屬性選擇器
/*用於選取帶有指定屬性的元素。*/
p[title] {
color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
color: green;
}
/*找到所有title屬性以hello開頭的元素*/ [title^="hello"] { color: red; } /*找到所有title屬性以hello結尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title屬性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：*/ [title~="hello"] { color: green; } 不怎么常用的屬性選擇器
分組和嵌套
分組
當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
div, p {
color: red;
}
上面的代碼為div標簽和p標簽統一設置字體為紅色。
div,
p {
color: red;
}
嵌套
多種選擇器可以混合起來使用，比如：.c1類內部所有p標簽設置字體顏色為紅色。
.c1 p {
color: red;
}
選擇器的優先級
樣式文件優先級
1. 內聯樣式(直接在標簽里面寫style) 優先級最高
2. 選擇器都一樣的情況下,誰靠近標簽誰就生效
3. 選擇器不同時 計算權重來判斷
