前端學習(1)
阿新 • • 發佈：2020-03-28
一 首先需要寫個Socket伺服器
import socket
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('192.168.1.5',8888))
sock.listen(5)
while True:
connection, address = sock.accept()
connection.recv(1024)
connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))
with open('helloworld.html','rb') as f:
data = f.read()
connection.sendall(data)
connection.close()
if __name__ == '__main__':
main()建立HTML檔案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
這樣把Server run起來，就可以在瀏覽器中輸入IP+埠號訪問了。
二 HTML語句
前端三劍客：HTML、js、css
1. 什麼是標籤？
a. 是由一對尖括號包裹起來的單詞，e.g: <html> 注意：不能以數字開頭；
b. 不區分大小寫，推薦使用小寫；
c. 標籤有兩個部分，開始標籤<h1>，結束標籤</h1>，兩個標籤之間的部分叫做標籤體；
d. 有些標籤只有一個，<br/><hr/>，叫做自閉和標籤，功能比較簡單；
e. 標籤不可以交叉巢狀；<h1><h2></h1></h2>
2. <!DOCTYPE html>標籤
使瀏覽器以標準模式渲染頁面。
3. <meta>標籤
<meta name="keywords" content="前端學習"> #搜尋的關鍵字 <meta name="description content="Damon的前端學習"> #對於頁面的描述
<meta http-equiv="Refresh" content="2;URL=htps://www.baidu.com"> #兩秒鐘夠重新整理頁面，跳轉到URL頁面中
<meta http-equiv="content-Type, charset=UTFB"> #網頁的編碼格式
<mata http-equiv="X-UA-Compatible content="IE=EmulateIE7"> #相容IE7瀏覽器
4. <body>標籤
<hn>: n的取值範圍是1-6；標籤體的字型大小，逐漸減小，是用來表示標題的； <p>: 段落標籤，包裹的內容被換行，與上行內容間有隔行； <b><strong>: 加粗標籤； <strike>: 在文字上加上一條中線；(不推薦使用) <em>: 文字變成斜體； <sup>和<sub>: 上角標和下角標； <br>: 換行； <hr>: 水平線； <div>: 什麼功能都沒有；用的非常多，主要是和CSS一起使用； <span>:
特殊符號： 空格
<小於 >大於 " © ® 網上有HTML特殊符號對照表
塊級標籤：網頁上的一塊區域都屬於這個標籤；<p><h1><table><ol><ul><form><div>都屬於塊級標籤。
內聯標籤：根據你的文字或者圖片的真是大小來分配區域。<a><input><img><sub><sup><textarea><span>
5. <img>圖片標籤
src: 圖片的路徑； alt: 圖片沒有載入成功的提示 title: 滑鼠懸浮在圖片上時的提示資訊； width：控制圖片的寬度； heigth: 控制圖片的高；
6. <a> 超連結標籤
href:要連線的資源路徑 例如： <a href="https://www.baidu.com">百度</a> 用於本頁面跳轉：href="#id" id是跳轉目的地標籤的id值 target: 在新的視窗開啟超連結。target="_blank"
7.列表標籤
<ul> 無序列表
<li></li>
</ul>
<ol> 有序列表
<li></li>
</ol>
<dl>
<dt></dt> 列表標題
<dd></dd> 列表項
8.form標籤
表單用於向伺服器傳輸資料。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吳靜</title>
</head>
<body>
<h1>hello world</h1>
<img src="1.jpg" title = "美女" alt="Error">
<form action="127.0.0.1:8880/damon/" method="get" enctype="multipart/form-data"> {#method中還有post方法，都是用來傳輸資料的方法#}
<p><input type="text" name="username"></p> {#文字輸入#}
<p><input type="password" name="password"></p> {#文字輸入#}
<p><input type="button" value="press"></p> {#配合js使用，用來觸發事件#}
<p><input type="checkbox" name="hobby" value="1"></p> {#複選框#}
<p><input type="checkbox" name="hobby" value="2"></p> {#複選框#}
<p><input type="radio" name="sex" value="0"></p> {#互斥選框#}
<p><input type="radio" name="sex" value="1"> </p>{#互斥選框#}
<p><input type="file"></p> {#上傳檔案#}
<p><input type="reset" value="reset"></p> {#把輸入的資料清空#}
<p><input type="file" name="test"></p> {#提交檔案(和上面的enctype一起使用, method="post"),需要後端的支援來接收檔案。#}
<p><select name="city" multiple="multiple" size="2"> {#multiple用於多選 size用來最多顯示兩個#}
<optgroup label="中國">
<option value="beijing">北京</option>
<option value="tianjin">天津</option>
<option value="shanghai">上海</option>
</optgroup>
</select></p>
<p><textarea rows="6", cols="5">自我介紹</textarea></p> {#6行5列#}
<label for="test">姓名</label>
<input id="test" type="text"> {#lable標籤對下面的input標籤進行關聯， for與id必須是一樣的#}
<p><input type="submit" value="submit"></p> {#提交資料#}
</form>
</body>
</html>
get方法：提交的鍵值對在位址列url後面， 安全性較低，對提交內容長度有限制；預設值是get
post方法：提交的的鍵值對，安全性較高，對提交內容的長度理論上無限制；
input中的name作為傳入後端資料字典的鍵，value作為