課程介紹
1.前端：寫網(wǎng)頁（7天思灰，掌握）
2.后臺(tái)：Flask祷舀。Django本涕。tornado（17天重點(diǎn)學(xué)會(huì)）
3.前端頁面：電商首頁搭建
4.搭建電商項(xiàng)目操漠，OA系統(tǒng)
5.就業(yè)崗位：后臺(tái)開發(fā)工程師收津，全棧開發(fā)工程師
網(wǎng)頁開發(fā)
- 環(huán)境準(zhǔn)備
- 瀏覽器：谷歌
- 編輯器
- pycharm
HTML
html（hyper text mark-up language）：超文本標(biāo)記語言
超文本：基本特征可以連接到其他的網(wǎng)頁
標(biāo)記：<特點(diǎn)的字符>
注意：html語言是做網(wǎng)站開發(fā)的語言（與python等價(jià)）
HTML語言的書寫格式
html語言：由內(nèi)容和標(biāo)簽組成
內(nèi)容：頁面上顯示的數(shù)據(jù)
標(biāo)簽：也叫標(biāo)記
? 單標(biāo)簽：<特定字符> < br > < hr>
? 雙標(biāo)簽：< 特定字符>內(nèi)容< /特定字符>
標(biāo)簽屬性：屬性名稱=值
第一個(gè)html
頁面結(jié)構(gòu)
<!--注釋-->
<!DOCTYPE html>
<!--html標(biāo)簽，雙標(biāo)簽浊伙，是最大的標(biāo)簽所有標(biāo)簽都在這個(gè)
標(biāo)簽里也稱之為跟標(biāo)簽
lang=“en”：可以刪除撞秋，主要是針對(duì)瀏覽器內(nèi)部語言進(jìn)行輔助
不影響開發(fā)
-->
<html lang="en">
<!--head：頭標(biāo)簽，主要存放設(shè)置信息吧黄，例如頁面編碼模式部服，引入js文件，css文件-->
<head>
<!--meta：設(shè)置頁面的編碼格式 utf-8-->
<meta charset="UTF-8">
<!--title：標(biāo)題標(biāo)簽-->
<title>我的第一個(gè)頁面</title>
</head>
<!--bady：身體標(biāo)簽拗慨，主體標(biāo)簽都要寫到baby標(biāo)簽里-->
<body>
hello,world
</body>
</html>
頁面規(guī)范
后綴名：.html
瀏覽器解析頁面
-
html標(biāo)簽不區(qū)分大小寫廓八，建議小寫
<h1>我是標(biāo)簽1</h1> <H1>我還是標(biāo)簽1</H1> 雙標(biāo)簽必須有閉合標(biāo)簽/
-
標(biāo)簽屬性值要加引號(hào)
<!--align="center" 表示居中--> <h1 align="center">我是標(biāo)簽1</h1>
常用標(biāo)簽
標(biāo)題標(biāo)簽
h1~h6
<!--tab 補(bǔ)全標(biāo)簽
ctrl+d 復(fù)制一行-->
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
特點(diǎn)：
- 默認(rèn)有字體式樣（字體粗細(xì)大蟹盥）
- 獨(dú)占一行
應(yīng)用場(chǎng)景：新聞標(biāo)題
查看代碼f12到elements在到最左邊
[圖片上傳失敗...(image-ff792a-1596804543185)]
段落標(biāo)簽
[圖片上傳失敗...(image-24e338-1596804543185)]
< p>內(nèi)容< p>
有間隔，自動(dòng)換行
實(shí)體字符
空格  剧蹂；
小于號(hào)< < ;
-
大于號(hào)> > ;
應(yīng)用場(chǎng)景 層級(jí)關(guān)系
換行標(biāo)簽
< br >
水平線標(biāo)簽
< hr > 一般使用div設(shè)置邊框會(huì)比hr適用的地方更多
文本修飾標(biāo)簽
i声功，em：傾斜標(biāo)簽
b，strong ：加粗
u 表示下劃線
del 表示刪除線
<body>
<!--傾斜i或者em-->
<em>中公教育</em> > <i>u就業(yè)</i>
<!--加粗 b strong-->
<b>中公教育</b> > <strong>u就業(yè)</strong>
<!--添加下劃線 u-->
<u>中公教育</u> > <u>u就業(yè)</u>
<!--刪除線 del-->
<del>中公教育</del> > <u>u就業(yè)</u>
</body>
div標(biāo)簽和span標(biāo)簽
- 沒有任何的樣式
- div 獨(dú)占一行宠叼，span寬度與內(nèi)容多少有關(guān)
- div用于大的頁面布局
- span用于小的內(nèi)容修改
- 應(yīng)用場(chǎng)景：頁面的布局
之前的布局：table
<body>
hello
<!--div獨(dú)占一行-->
<div>
hello
</div>
<!--span：寬度跟內(nèi)容多少有關(guān)-->
<span>
hello
</span>
hello
</body>
<div>
<div>我是圖片</div>
<div>￥299.0</div>
<div>UR2020秋季新品女裝清熟<span style="color: brown">方領(lǐng)</span>修身針織<span style="color: brown">連衣裙</span></div>
</div>
[圖片上傳失敗...(image-351db5-1596804543185)]
- 注意：幾乎所有標(biāo)簽都有style屬性
圖片標(biāo)簽
img 圖片標(biāo)簽
scr 加載路徑
alt 圖片的描述信息先巴，圖片加載失敗后的顯示內(nèi)容
title 標(biāo)題，但鼠標(biāo)懸停在圖片上顯示的內(nèi)容
width 圖片寬度
height 圖片的高度
<body>
<!--img 圖片標(biāo)簽
scr 加載路徑
alt 圖片的描述信息冒冬，圖片加載失敗后的顯示內(nèi)容
title 標(biāo)題伸蚯，但鼠標(biāo)懸停在圖片上顯示的內(nèi)容
width 圖片寬度
height 圖片的高度
-->
<img src="../image/1.jpg" alt="lsp" title="lsp" width="125px" height="200px">
</body>
超鏈接標(biāo)簽
- < a > 超鏈接標(biāo)簽
- href 跳轉(zhuǎn)的目標(biāo)路徑
- target="_blank" 從新的頁面打開
<body>
<!--a 超鏈接標(biāo)簽
href 跳轉(zhuǎn)的目標(biāo)路徑
target="_blank" 從新的頁面打開-->
<a target="_blank">哈哈哈哈點(diǎn)我一下你就知道</a>
<a href="demo9div.html" target="_blank">demo9</a>
</body>
錨點(diǎn)定位
- 實(shí)現(xiàn)錨點(diǎn)定位功能：
- 1.給目標(biāo)元素添加id屬性
- 2.在a標(biāo)簽的href 中使用“#id值”的方式進(jìn)行定位
拓展：幾乎所有的標(biāo)簽都有id style 屬性
- 實(shí)現(xiàn)跳轉(zhuǎn)到頂部
- 頂部設(shè)置一個(gè)新空的div添加id值
- 底部添加跳轉(zhuǎn)< a >href #id值
<body>
<!--
實(shí)現(xiàn)錨點(diǎn)定位功能：
1.給目標(biāo)元素添加id屬性
2.在a標(biāo)簽的href 中使用“#id值”的方式進(jìn)行定位
拓展：幾乎所有的標(biāo)簽都有id style 屬性-->
<div id="item4"></div>
<a href="#item1">到一層</a>
<a href="#item2">到二層</a>
<a href="#item3">到三層</a>
<div id="item1" style="height: 1000px;background-color:red">一層樓</div>
<div id="item2" style="height: 1000px;background-color:blue">二層樓</div>
<div id="item3" style="height: 1000px;background-color:green">三層樓</div>
</body>
<a href="#item4">頂層</a>
- 從其他頁面定位到頁面摸個(gè)位置
- herf 路徑#id值
<body>
<a href="demo12%20錨點(diǎn)定位.html#item2">跳轉(zhuǎn)2層</a>
</body>
列表標(biāo)簽
-
無序列表
- ul 無序列表標(biāo)簽 li 列表行標(biāo)簽
- type 指定顯示效果：默認(rèn) 實(shí)心圓形
circe 空心圓形
square 方塊 - 應(yīng)用場(chǎng)景：新聞頁面
<body> <!--ul 無序列表標(biāo)簽 li 列表行標(biāo)簽 type 指定顯示效果： 默認(rèn) 實(shí)心圓形 circe 空心圓形 square 方塊--> <ul type="circle"> <li>pthon</li> <li>ui</li> <li>大前端</li> <li>java</li> </ul> -
有序列表
- ol 有序列表
- type 序列的編號(hào)
<body> <!--ol 有序列表 type 序列的編號(hào)--> <ol type="I"> <li>湖人</li> <li>快船</li> <li>爵士</li> <li>騎士</li> </ol> </body>應(yīng)用場(chǎng)景：熱詞榜單，排名等
-
自定義列表
- dl 自定義列表
dt 表頭
dd 行
- dl 自定義列表
<body>
<dl>
<dt>python學(xué)科</dt>
<dd>python基礎(chǔ)</dd>
<dd>數(shù)據(jù)庫</dd>
<dd>linux</dd>
<dd>pythonweb</dd>
<dt>java學(xué)科</dt>
<dd>java基礎(chǔ)</dd>
<dd>ssm</dd>
<dd>javaee</dd>
</dl>
<dl>
<dt>python</dt>
<dd>
<ul>
<li>環(huán)境安裝</li>
<li>基本語法
<ol>
<li>分支結(jié)構(gòu)</li>
<li>循環(huán)結(jié)構(gòu)</li>
<li>函數(shù)</li>
</ol>
</li>
<li>數(shù)據(jù)結(jié)構(gòu)
<ol>
<li>數(shù)字類型</li>
<li>字符串類型</li>
<li>列表類型</li>
<li>字典類型</li>
</ol>
</li>
</ul>
</dd>
</dl>
<dl>
<dt>pythonweb</dt>
<dd>
<ul>
<li>前端頁面開發(fā)</li>
<li>后臺(tái)開發(fā)</li>
</ul>
</dd>
</dl>
<img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200730161741001.png" alt="image-20200730161741001" style="zoom:100%;" />
列表的可嵌套
表格標(biāo)簽
- table 表格標(biāo)簽
tr 行標(biāo)簽
td 列標(biāo)簽 - caption 設(shè)置標(biāo)題
<!--
table 表格標(biāo)簽
tr 行標(biāo)簽
td 列標(biāo)簽
caption 設(shè)置標(biāo)題
boder 邊框線的大小
cellpadding 內(nèi)容到邊框的距離
cellspacing 每個(gè)邊框之間的距離
width 寬度
height 高度
-->
<table border="1px" cellpadding="1px" cellspacing="0px" width="200px" height="100px">
<caption>python班信息表</caption>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>專業(yè)</td>
</tr>
<tr>
<td>張三</td>
<td>20</td>
<td>男</td>
<td>python</td>
</tr>
</table>
-
table 標(biāo)簽的屬性
- boder 邊框線的大小
- cellpadding 內(nèi)容到邊框的距離
- cellspacing 每個(gè)邊框之間的距離
- width 寬度
- height 高度
-
tr 屬性
align：內(nèi)容的水平對(duì)齊 left center right
-
valign：內(nèi)容的豎直方向?qū)R top middle bottom
<table border="1px" cellpadding="1px" cellspacing="0px" width="200px" height="120px"> <caption>信息表</caption> <tr align="center" valign="top"> <td>姓名</td> <td>年齡</td> <td>性別</td> <td>專業(yè)</td> </tr> <tr align="center" valign="bottom"> <td>張三</td> <td>20</td> <td>男</td> <td>python</td> </tr> </table>
-
td 屬性
- align：內(nèi)容的水平對(duì)齊 left center right
- valign：內(nèi)容的豎直方向?qū)R top middle bottom
-
tr td 合并
- colspan 跨列合并
- rowspan 跨行合并
表單
- form 表單標(biāo)簽 沒有樣式用于提交
- action 提交路徑
- method 提交方式 get 和post
注意：以下所有聲明 type屬性的都是input標(biāo)簽中的type選項(xiàng)
- type=“text” 表示將input解析成文本框
placeholder 設(shè)置提示語
readonly 設(shè)置只讀方式
name 給input標(biāo)簽起一個(gè)名字 作用用于文本框輸入值的提交
value 給文本框這是值简烤，當(dāng)數(shù)據(jù)回顯時(shí)候使用
注意：提交時(shí)信息以鍵值對(duì)的形式提交 name屬性的值=value屬性的值
username=zs
url（網(wǎng)址）=
網(wǎng)絡(luò)協(xié)議
域名
參數(shù) - type="password" 密碼框 多個(gè)鍵值對(duì)之間用&連接
- type="radio" 單選按鈕剂邮，name值相同才能單選
checked 設(shè)置默認(rèn)選擇狀態(tài) - type=“checkbox” 多選框
- 上傳文件：三要素
1.method=“post”
2.enctype=“multipart/form-data”
3.type=“file” - 隱藏域，在也頁面上不顯示
當(dāng)某些內(nèi)容必須要提交到后臺(tái)并且不能讓用戶看到
type=“hidden - select 下拉選項(xiàng) option 表示選項(xiàng)的內(nèi)容
- type="button" 按鈕
- type="reset" 重置按鈕
- button：寫在表單中有提交作用横侦，不在表單中就是普通按鈕
- textarea 定義文本域標(biāo)簽
placeholder="請(qǐng)自我介紹..."提示文字 - type="submit" 具有提交功能的按鈕
<body>
<!--表單
書寫格式form 挥萌，沒有樣式用于提交
action 提交路徑
method 提交方式 get 和post
-->
<form action="https://www.baidu.com" >
<p>
<!-- type=“text” 表示將input解析成文本框
placeholder 設(shè)置提示語
readonly 設(shè)置只讀方式
name 給input標(biāo)簽起一個(gè)名字 作用用于文本框輸入值的提交
value 給文本框這是值，當(dāng)數(shù)據(jù)回顯時(shí)候使用
注意：提交時(shí)信息以鍵值對(duì)的形式提交 name屬性的值=value屬性的值
username=zs
url（網(wǎng)址）=
網(wǎng)絡(luò)協(xié)議
域名
參數(shù)-->
用戶名：<input type="text" placeholder="請(qǐng)?jiān)O(shè)置用戶名" name="username" value="">
</p>
<p>
<!-- type="password" 密碼框
多個(gè)鍵值對(duì)之間用&連接
form 表單默認(rèn)的提交方式是get
特點(diǎn)：將提交內(nèi)容一鍵值對(duì)的方式拼接到url上
因此用get方式提交是不安全的-->
密碼：<input type="password" name="pwd" value="">
</p>
<p>
<!-- type="radio" 單選按鈕枉侧，name值相同才能單選
checked 設(shè)置默認(rèn)選擇狀態(tài)-->
性別：<label for="nan">
<input id="nan" type="radio" name="gender" value="man" checked>男
</label>
<label for="nv">
<input id="nv" type="radio" name="gender" value="woman">女
</label>
</p>
<p>
<!--type=“checkbox” 多選框 -->
愛好：<input type="checkbox" name="hobby" value="somking">抽煙
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="tt">燙頭
</p>
<p>
<!--上傳文件：三要素
1.method=“post”
2.enctype=“multipart/form-data”
3.type=“file”-->
頭像：<input type="file">
</p>
<p>
<!--隱藏域引瀑，在也頁面上不顯示
當(dāng)某些內(nèi)容必須要提交到后臺(tái)并且不能讓用戶看到
type=“hidden”
-->
<input type="hidden" name="time" value="12:00">
</p>
<p>
<!--select 下拉選項(xiàng)-->
你喜歡的城市：
<select name="city">
<option value="1">--請(qǐng)選擇城市--</option>
<option value="gz">廣州</option>
<option value="fs">佛山</option>
<option value="zj">湛江</option>
<option value="sz">深圳</option>
</select>
</p>
<p>
<!-- type="button" 按鈕
disabled 設(shè)置按鈕禁用-->
<input type="button" value="蕪湖" disabled onclick="alert('我是彈框');">
</p>
<p>
<!--type="reset" 重置按鈕-->
<input type="reset">
</p>
<p>
<!--button：寫在表單中有提交作用，不在表單中就是普通按鈕-->
<button>我是表單中的按鈕榨馁，有提交作用</button>
</p>
自我介紹：<br>
<!--textarea 定義文本域標(biāo)簽
placeholder="請(qǐng)自我介紹..."提示文字
-->
<textarea name="" id="" cols="30" rows="10" placeholder="請(qǐng)自我介紹..."></textarea>
<p>
<!--type="submit" 具有提交功能的按鈕 -->
<input type="submit" value="提交" style="width: 200px;height: 30px">
</p>
</form>
<button>表單外的按鈕</button>
</body>
標(biāo)簽分類
- 單標(biāo)簽
- hr憨栽、br、img翼虫、input徒像、meta。DOCTYPE
- 單標(biāo)簽不需要寫內(nèi)容
- 雙標(biāo)簽
- html蛙讥、head、bady灭衷、title次慢、h、p翔曲、div迫像、span、b瞳遍、serong闻妓、u、i掠械、em由缆、del注祖、table、tr均唉、td是晨、caption、li舔箭、
- 雙標(biāo)簽一般可以寫內(nèi)容
