前端-HTML
阿新 • • 發佈：2021-06-17
前端概念
前端定義
-
與使用者直接互動的操作介面
-
電腦介面、手機介面、平板介面
後端定義：類似於服務端後臺處理邏輯，不直接和使用者打交道
前端組成
- HTML：網頁骨架，沒有任何樣式 內容
- CSS：給網頁骨架新增各種樣式，美觀介面 外觀
- JS：控制網頁的動態效果 動作
軟體開發架構
- cs 客戶端 服務端
- bs 瀏覽器 服務端 本質也是cs
瀏覽器視窗輸入網址回車
-
瀏覽器向服務端傳送請求
-
服務端接收請求(eg:請求百度首頁)
-
服務端返回相應的響應(eg:返回一個百度首頁)
-
瀏覽器接收響應,根據特定規則渲染頁面展示給使用者看
Q：如何實現瀏覽器跟多個不同的服務端之間進行資料交換？
A：制定一個統一標準，HTTP協議
HTTP協議
-
超文字傳輸協議,用來規定服務端和瀏覽器(客戶端)之間的資料互動格式
服務端遵循HTTP協議，實現與瀏覽器(客戶端)進行資料交換
四大特性
- 基於請求響應
- 基於TCP/IP,作用於應用層之上的協議
- 無狀態
- 不儲存使用者的資訊
- HTTP協議是無狀態的,後續出現了一些專門用來記錄使用者狀態的技術
- 無/短連結
- 請求來一次，響應回一次，互動之後沒有任何連結和聯絡
請求方式
-
get請求
-
朝服務端請求資料 (可以攜帶引數的，只是引數不是放在請求體裡面的,放在url連結中)
-
輸入網址獲取對應的內容
-
-
post請求
-
朝服務端提交資料
-
使用者登陸 輸入使用者名稱和密碼之後,提交到服務端後端做身份校驗
-
請求資料格式
- 請求首行(標識HTTP協議版本，當前請求方式)
- 請求頭 (K,V鍵值對)
- (\r\n 不能省略)
- 請求體 (get沒有 post有 存放的是post請求提交的隱私資料)
# HTTP請求資料格式 請求首行 b'GET / HTTP/1.1\r\n 請求頭 Host: 127.0.0.1:8081\r\n Connection: keep-alive\r\n sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"\r\n sec-ch-ua-mobile: ?0\r\n Upgrade-Insecure-Requests: 1\r\n User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36\r\n Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n Sec-Fetch-Site: none\r\n Sec-Fetch-Mode: navigate\r\nSec-Fetch-User: ?1\r\n Sec-Fetch-Dest: document\r\n Accept-Encoding: gzip, deflate, br\r\n Accept-Language: zh-CN,zh;q=0.9\r\n Cookie: csrftoken=RioGIvwt2RVpX0EeByOQcqSvIUQua7LiJYjN0jthxpukbRdBPNVh9yr9JRoPa7wk\r\n \r\n 請求體 '
響應資料格式
- 響應首行(標識HTTP協議版本，響應狀態碼)
- 響應頭 (K,V鍵值對)
- (\r\n 不能省略)
- 響應體 (返回給瀏覽器展示給使用者看的資料)
響應狀態碼
- 用一串簡單的數字表示一些複雜的狀或者描述性資訊
- 1XX: 服務端已經成功接收到資料，可以繼續提交額外的資料
- 2XX: 服務端成功響應了請求的資料(200 OK請求成功)
- 3XX：重定向(當訪問一個需要登陸之後才能訪問的頁面，會發現自動跳轉到登陸頁面)
- 4XX：請求錯誤
- 403:當前請求不合法或者不符合訪問資源的條件
- 404:請求資源不存在
- 5XX：伺服器內部錯誤(500)
import socket
'''
# link.html
<h1>hello baidu</h1>
<a href="https:www.baidu.com"> click me go to baidu</a>
'''
server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
conn, addr = server.accept()
data = conn.recv(1024)
print(data)
# 響應首行(標識HTTP協議版本，響應狀態碼)
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
# conn.send(b'hello web\n')
conn.send(b'<h1>hello python</h1>\n')
with open('my_html/link.html', 'rb') as f:
conn.send(f.read())
conn.close()
HTML
簡介
- 超文字標記語言
- 遵循HTML語法，使瀏覽器能夠渲染出網頁介面
註釋
<!--單行註釋-->
<!--
多行註釋1
多行註釋2
多行註釋3
-->
文件結構
<!DOCTYPE html>
<html lang="en">
head內部的標籤:定義瀏覽器配置資訊
<head>
</head>
body內部的標籤:瀏覽器渲染主要內容
<body>
</body>
</html>
標籤書寫
- id值
- 類似於標籤的身份證號，在同一個html頁面上的id值不能重複
- class值
- 類似於面向物件的繼承，一個標籤可以繼承多個class值
- 自定義屬性
<p id="p1" class="p1" username="jason" password="123456"></p>
head內標籤
- title
<head>
<title>填寫網頁標題</title>
</head>
- style
<head>
<style>
<!-- 填寫CSS程式碼-->
h1{
color:gold;
}
</style>
</head>
- link
<head>
<!-- 引入外部css檔案-->
<link rel="stylesheet" href="mycss.css">
</head>
- script
<head>
<!-- 書寫js程式碼-->
<script>
alert('hello')
</script>
<!-- 引入外部js檔案-->
<script src="myjs.js"></script>
</head>
- meta
<head>
<!-- 2秒後跳轉到對應網址-->
<meta http-equiv="refresh" content="2, URL=http://www.baidu.com">
<!--網頁推薦 當使用瀏覽器搜尋時,只要輸入了keywords後面制定當關鍵字，網頁都有可能被搜尋出來-->
<meta name="keywords" content="meta總結">
<!--網頁描述資訊-->
<meta name="description" content="hello html">
</head>
body內標籤
標籤分類
- 塊級標籤
- 獨佔一行
- h標籤 p標籤 div標籤
- 行內標籤
- 自身文字多大就佔用多大內容空間
- i、u、s、b、span標籤
基本標籤
- h
<body>
<h1>標題標籤1</h1>
<h2>標題標籤2</h2>
<h3>標題標籤3</h3>
<h4>標題標籤4</h4>
<h5>標題標籤5</h5>
</body>
- p
- 只能巢狀行內標籤，不能巢狀塊級標籤，就是嵌套了，瀏覽器渲染時會自行解開
<body>
<p>段落標籤1</p>
<p>段落標籤2</p>
<p>段落標籤3</p>
<p>段落標籤4</p>
</body>
常用標籤
- div
- 劃分區域
- 可以巢狀任意的塊級標籤和行內標籤
<body>
<div>
<p></p>
<span></span>
</div>
</body>
- span
- 普通文字
<body>
<span>hello web</span>
</body>
- img
- 圖片標籤
<body>
<img src="圖片地址" alt="圖片載入不出來時的提示資訊" title="當滑鼠懸浮到圖片之上時的提示資訊" height="800px" width="800px">
</body>
- a
<body>
<a href="連結網址">連結提示資訊(eg:點我跳轉)</a>
</body>
<body>
<a href="連結網址" target="_blank">連結提示資訊(eg:點我跳轉)</a>
<a href="連結網址" target="_self">連結提示資訊(eg:點我跳轉)</a>
</body>
錨點功能
<body>
<a href="" id="d1">頂部</a>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中間</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">回到頂部</a>
<a href="#d2">回到中間</a>
</body>
-
列表標籤
-
無序列表
ul>li*3 + Tab 實心圓點 <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> 空心圓點 <body> <ul type="circle"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> 實心鉅形 <body> <ul type="square"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> 頁面佈局 排版一致的幾行資料基本使用 -
有序列表
<body> <ol type="" start=""> <li>1</li> <li>2</li> <li>3</li> </ol> </body> -
標題列表
<body> <dl> <dt>標題1</dt> <dd>內容1</dd> <dt>標題2</dt> <dd>內容2</dd> </dl> </body>
-
-
表格標籤
<body>
<table border="1">
<thead>
<tr>
<th>username</th>
<th>password</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123456</td>
<td>run</td>
</tr>
<tr>
<td>jack</td>
<td>123456</td>
<td>ball</td>
</tr>
</tbody>
</table>
</body>
<td colspan="2">jack</td>
<td rowspan="2">123456</td>
- form表單
- 獲取前端使用者輸入的內容基於網路傳送給後端伺服器
action
1.不寫，預設朝當前頁面所在的url提交資料
2.寫全路徑：https:www.baidu.com 朝百度服務端提交資料
3.寫路徑字尾：action=‘/index’ 自動識別當前服務端的ip和埠拼接到前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>註冊頁面</h1>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="d1">
username:<input type="text" id="d1" name="username">
</label>
</p>
<p>
<label for="d1">
password:<input type="password" id="d2" name="password">
</label>
</p>
<p>
<label for="d1">
brithday:<input type="date" id="d3">
</label>
</p>
<p>gender:
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</p>
<p>province1:
<select name="province2" >
<option value="zhuhai">珠海</option>
<option value="shengzhen">深圳</option>
</select>
</p>
<p>province2:
<select name="province2" >
<optgroup label="珠海">
<option value="doumeng">斗門</option>
<option value="xiangzhou">香洲</option>
<option value="gongbei">拱北</option>
</optgroup>
<optgroup label="深圳">
<option value="longhua">龍華</option>
<option value="baoan">寶安</option>
<option value="futian">福田</option>
</optgroup>
</select>
</p>
<p>
<input type="file" multiple name="myfile">
</p>
<p>自我介紹
<textarea name="info" id="" cols="30" rows="10" maxlength="20"></textarea>
</p>
<input type="submit" value="註冊">
<input type="button" value="按鈕">
<input type="reset" value="重置">
<button>click</button>
</form>
</body>
</html>
- form表單提交資料
from flask import Flask, request
app = Flask(__name__)
@app.route('/index/', methods=['GET', 'POST'])
def index():
print(request.form)
print(request.files)
file_obj = request.files.get('myfile')
print(file_obj.name)
file_obj.save(file_obj.name)
return 'OK'
app.run()
其他標籤
<body>
<b>加粗</b>
<i>斜體</i>
<br><!-- 換行-->
<u>下劃線</u>
<s>刪除線</s>
<hr> <!-- 橫線分隔-->
</body>
特殊符號
空格
> >
< <
& &
¥ ¥
© ©
® ®