寫在前面——前端要學什麼
- HTML 內容（標籤）
- CSS 外觀（選擇器，屬性）
- JavaScript 動作（基礎語法，BOM&DOM）
一、什麼是前端
任何直接能夠跟用戶打交道的交互界面都可以稱之爲前端。
我們之前有聊到軟件開發架構：C/S架構和B/S架構。今天主要嘮嘮B/S架構中B-Browser（瀏覽器）。
1.1瀏覽器輸入網址發生的事
- 輸入網址（URL）
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。 - 朝網頁服務器發送請求
- 服務器接收請求並查詢瀏覽器想要的數據返回給瀏覽器
- 瀏覽器拿到數據展示頁面
1.2Python簡易服務器端
from socket import *
HOST = '127.0.0.1'
PORT = 8080
BUFSIZE = 1024
ADDR = (HOST,PORT)
server = socket(AF_INET,SOCK_STREAM) # 括號內如果不填，就默認是這兩個參數
server.bind(ADDR)
server.listen(5)
while True:
conn,addr = server.accept()
while True:
try:
data = conn.recv(BUFSIZE)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n') # HTTP協議 相互交流格式必須統一
# conn.send(b'Hello World!') # 瀏覽器連接時發送消息Hello World
with open('F:\PythonMaze\web front-end\Day48\my_first_html_file.html','rb')as f:
for line in f:
conn.send(line)
conn.close()
except BaseException as e:
print(e)
break
1.3HTTP協議：超文本傳輸協議
客戶端服務端在數據交互的時候都必須遵循這套協議，文件的後綴是給人看的，因爲文件的傳輸都是二進制。
二、HTML
超文本標記語言，不是編程語言
2.1 文檔結構
<html>
<head>
<!--用戶看不到，主要給瀏覽器和搜索引擎看，單行註釋-->
</head>
<body>
<!--用戶能夠看見
的內容都在這,多行註釋-->
</body>
2.2 html打開方式
方式一：找到文件選擇瀏覽器打開
方式二：pycharm自動打開
2.3 標籤
2.3.1 head內標籤
<title>頁面標題</title>
<style>層疊樣式</style>
<script>JavaScript代碼</script>
<link 引入css文件 文件名裏的%是空格>
<meta 定義網頁原信息>
keyword：關鍵詞 提高被搜索的優先度
description：描述網頁
2.3.2 body內標籤
（1）基本標籤
<h1>
標題標籤，從1到6，字體越來越小
</h1>
<p>
段落標籤
</p>
<s>棄用符號</s>
<u>下劃線</u>
<i>斜體</i>
<b>加粗</b>
<br> 換行
<hr> 分割線
（2）特殊符號
< 小於號
> 大於號
¥ 人民幣符號
© 版權
® 商標
空格
& &符號
（3）常用標籤
<div>
頁面佈局
</div>
<span>頁面佈局</span>
<a href="http://www.google.com" target="_self">message</a> <!--_self是本標籤跳轉，_blank新開一個標籤-->
<a href ="" id = 'a1'>Top</a>
<a href ="#a1">Bottom</a> <!-- 錨點功能，跳轉到錨點處-->
所有的HTML標籤都應該有一個id屬性，用來區分，爲後續的DOM操作提供基礎，同一份HTML的id不能重複，不寫id屬性也是可以的
<img src ='圖片地址' alt='圖片加載失敗顯示的信息' title='鼠標懸停顯示的信息' widtn ='寬度更改長度按比例一起改動' >
（4）列表標籤
<ul type='disc(default)/circle/square/none'>
<li>i am disorder</li>
</ul>
<ol type='序號樣式'>
<li>i am order</li>
</ol>
<dl>
<dt>title 1</dt>
<dd>content 1</dd>
<dt>title 2</dt>
<dd>content 2</dd>
</dl>
（5）表格標籤
<table>
<thead> <!--表格頭-->
<tr> <!--一行-->
<th>name</th>
<th>age</th>
<th>body</th>
</tr>
</thead>
<tbody>
<tr>
<td>moon</td>
<td>18</td>
<td>basketball</td> <!---->
</tr>
<tr>
<td>hysen</td>
<td>25</td>
<td>code</td>
</tr>
</tbody>
</table>
border調整列表的邊框
cellspacing 調單元格與外邊框之間的距離
cellpadding 調單元格
rowspan = 佔行數 垂直方向合併
colspan = 佔列數 水平方向合併
2.3.3 標籤分類
第一種：
雙標籤：有頭有尾
自閉合標籤
第二種：
塊級標籤
- 獨佔一行
- 能夠嵌套塊級標籤和行內標籤，但p標籤除外
- 能設置長寬
行內標籤：
- 自身內容有多大佔多大
- 不能設置長寬
2.4 form表單：前後端數據交互
功能：獲取用戶輸入（手動輸入/選擇/默認值），並將獲取到的用戶信息發送到後端
<form action=''>
<p>username : <input type='text'></p>
<p>password : <input type='password'></p>
<p>birthday : <input type='date'></p>
<p>gender :
<input type='radio' name='gender'> ：male
<input type='radio' name='gender' checked = 'checked'> ：female <!-- 名字和屬性相同可只寫一個-->
</p>
<p>
hobbies:
<input type='checkbox' checked>唱
<input type='checkbox' checked>跳
<input type='checkbox' checked>rap
<input type='checkbox' checked>籃球
</p>
<p>
province單選:<!--province默認單選:-->
<select name="province" id="">
<option value='beijing'>北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
</p>
<p>province多選:
<select name="" id="" multiple>
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
</p>
<p>province下拉菜單中分組:
<select name="" id="">
<optgroup label="北京">
<option value="">朝陽區</option>
<option value="">海淀區</option>
<option value="">昌平區</option>
</optgroup>
<optgroup label="上海">
<option value="">浦東新區</option>
<option value="">靜安區</option>
<option value="">徐彙區</option>
</optgroup>
<optgroup label="深圳">
<option value="">南山區</option>
<option value="">寶安區</option>
<option value="">福田區</option>
</optgroup>
</select>
<p>info:
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>file:
<input type="file" name="file">
</p>
<input type="submit" value="註冊">
<input type="button" value="普通按鈕">
<input type="reset" value="重置">
<button>button按鈕</button>
</form>
form表單
功能:獲取用戶輸入(手動輸入/選擇/默認值)，並將獲取到的用戶信息發送給後端。
form表單中只有input的type類型爲submit纔會觸發提交信息的動作。
如果不想通過input標籤來觸發提交動作 那麼可以直接寫一個button按鈕。
input
通過控制type的類型從而實現不同的獲取用戶輸入的標籤樣式
- text 普通文本
- password 密文
- date 日曆
- radio 單選框
- checkbox 多選框
- file 獲取文件
- submit 觸發提交數據的行爲
- button 普通的按鈕
- reset 重置form表單內容
select
- 選擇框 默認是單選的 可以通過multiple參數將單選變爲多選
- 一個option就是一個選項
textarea
- 獲取用戶大段文本值