前端介紹+HTML
阿新 • • 發佈：2021-12-21
一、什麼是前端
"""
任何與使用者直接打交道的操作介面都可以稱之為前端 比如電腦介面、手機介面、平板介面
什麼是後端
後端類似於幕後操作者（功能實現的邏輯程式碼），不直接與使用者打交道
"""
二、為什麼學前端
"""
全棧開發，前後端都會
但是前端不會學的很詳細，只要求做到能夠看得懂基本的前端程式碼以及能夠搭建一些簡單的頁面即可
先打下前端的基礎，為後續可能需要拓展做準備
"""
三、前端學習歷程
# 一、基本語法 HTML:網頁的骨架、內容，沒有任何的樣式 CSS：網頁的外觀、樣式（給骨架新增各種樣式，變得好看） JS：控制網頁實現動態效果 # 二、前端框架 Bootstrap、jQuery、Vue 等 提前給你封裝好了很多操作，你只需要按照固定的語法句式即可
四、web服務本質及Http協議
軟體開發架構
cs 客戶端 服務端
bs 瀏覽器 服務端
ps：bs模式本質也是cs
1.網頁訪問過程
瀏覽器視窗輸入網址回車發生了幾件事：
""" 1. 瀏覽器朝服務端輸入網址請求（eg:請求百度首頁） 2. 服務端接受請求 3. 服務端返回相應的響應（eg:返回一個百度首頁） 4. 瀏覽器接受響應，根據特定的規則渲染頁面展示給使用者看 """ 瀏覽器可以充當很多服務端的客戶端 百度 騰訊視訊 優酷視訊 如何做到瀏覽器能夠跟多個不同的服務端之間進行資料互動？ 1.瀏覽器很牛逼 能夠自動識別不同服務端做不同處理 2.制定一個統一的標準。（如果你想要讓你寫的服務端能夠跟瀏覽器之間做正常的資料互動，那麼你就必須遵循這個標準）
2.HTTP協議（必須記住）
"""
HTTP 超文字傳輸協議 用來規定服務端和瀏覽者之間的資料互動格式
該協議你可以不遵循，但是你寫的服務端就不能被瀏覽器正常訪問，你就自己跟自己玩，你自己寫客戶端，使用者想要使用，就下載你專門的app即可
"""
四大特性
1. 基於TCP/IP的協議 作用於應用層之上的協議 2. 被動響應 基於請求，才響應；不請求，則不會響應 3. 短連線 請求響應後，就斷開連結 延伸出：長連結（雙方建立連結後，就不會斷開） eg：聊天室（websocket） 4. 無狀態 對於事務處理沒有記憶功能，不會儲存使用者的資訊 延伸出：可以記住使用者狀態的技術 eg：cookie、session、token
請求資料格式
請求首行 （包含標識HTTP協議版本、當前請求方式）
請求頭 （一大堆K,V鍵值對）
# 空行 （一定要有一個空行:/r/n)
請求體 （並不是所有請求方式都有請求體，eg：get 無；post 有 存放的是post請求提交的敏感資料）
響應資料格式
響應首行 （包含標識HTTP協議版本、響應狀態碼）
響應頭 （一大堆K,V鍵值對）
# 空行 （一定要有一個空行:/r/n)
響應體 （返回給瀏覽器展示給使用者看的資料）
請求方式
1. get請求
超服務端要資料
eg：輸入網址獲取對應的內容
2. post請求
超服務端提交資料
eg：使用者登入，輸入使用者名稱和密碼之後，提交到服務端後端做身份校驗
響應狀態碼
用一串簡單的數字來表示一些複雜的狀態或描述性資訊
eg：
1xx >>> 服務端已經成功接受到了你的資料正在處理，你可以繼續提交額外的資料
2xx >>> 服務端成功響應了你想要的資料 （200 OK 請求成功）
3xx >>> 重定向(自動跳轉到其他連結請求的頁面 eg:當你在訪問一個需要登入之後才能看的頁面，你會發現會自動跳轉到登入頁面)
4xx >>> 請求錯誤
404： 請求資源不存在
403： 當前請求不合法或者不符合訪問資源的條件
5xx >>> 伺服器內部錯誤（500 伺服器出錯）
URL
統一資源定位符 （俗稱：網址）
3.HTML簡介
超文字標記語言
HTML就是書寫網頁的一套標準，我們瀏覽器看到的所有網站頁面，內部其實都是HTML程式碼。
註釋: 註釋是程式碼之母
<!-- 單行註釋-->
<!--
多行註釋1
多行註釋2
多行註釋3
-->
由於HTML程式碼非常的雜亂無章並且很多，所以我們我們習慣於用註釋來劃定區域方便後續的查詢
eg：
<!-- 導航條開始-->
導航條所有的html程式碼
<!-- 導航條結束-->
ps:檔案的字尾名其實給使用者看的，只不過對應不同的檔案字尾名有不同的軟體來處理並新增很多功能
注意：
1. HTML程式碼是沒有格式的，可以全部寫在一行都沒有問題，只不過我們習慣後了縮排來表示程式碼
2. 兩種開啟HTML檔案的方式：
1.找到檔案所在的位置右鍵選擇瀏覽器開啟；
2.在pycharm內部，集成了自動呼叫瀏覽器的功能，直接點選即可（前提是你的電腦上安裝了對應的瀏覽器） 直接全部使用谷歌瀏覽器
3. 在pycharm中 書寫HTML程式碼的時候，你只需要寫標籤名，然後tab就能自動補全
HTML文件結構
<!DOCTYPE html> 標籤
<html>
<head> </head> :head標籤不是給使用者看的，而是定義一些配置主要給瀏覽器看的
<body> </body> :body標籤 寫什麼瀏覽器就渲染什麼，使用者就能看到什麼
</html>
ps: <!DOCTYPE html> 標籤
<!DOCTYPE> 宣告必須是 HTML 文件的第一行，位於 <html> 標籤之前。
<!DOCTYPE> 宣告不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
標籤具有的兩個重要屬性
1.id值
定義標籤的唯一ID，HTML文件樹中唯一
2.class
為html元素定義一個或多個類名（classname）(CSS樣式類名) （該值有點類似於面向物件裡面的繼承，一個標籤可以繼承多個class值）
3.style
規定元素的行內樣式（CSS樣式）
ps: 標籤既可以有預設的屬性，也可以自定義屬性
<p id="d1" class="c1" usename="jason" password="123"></p>
標籤的分類1
1. 雙標籤 （有開始和結尾的雙標籤）
eg:<div>和</div> 第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線
2. 單標籤（自閉和 標籤）
eg:<br/>
head內的常用標籤
1. <title>Title </title> ：網頁標題
2. <style> h1 {color: greenyellow;} </style> ：內部用來書寫css程式碼
3.<link rel="stylesheet" href="mycss.css"> ：引入外部的css檔案或網站圖示
4.<script> alert(123) </script> ： 內部用來書寫js程式碼
<script src="myjs.js"> </script> ： 或引用外部的js程式碼檔案
5.<Meta> 標籤介紹：（瞭解）
元素可提供有關頁面的元資訊（mata-information）,針對搜尋引擎和更新頻度的描述和關鍵詞。
標籤位於文件的頭部，不包含任何內容。
提供的資訊是使用者不可見的。
meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的引數值，這些不同的引數值就實現了不同的網頁功能。
1.http-equiv屬性：相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個引數的變數值。
<!--指定文件的編碼型別(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒後跳轉到對應的網址，注意引號(瞭解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告訴IE以最高階模式渲染文件(瞭解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的。
就是給你html加上各種關鍵詞資訊，方便搜尋引擎（百度等）搜尋到 （這叫SEO搜尋引擎優化）
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
網頁的描述資訊，會在搜尋頁面的右下角簡介中展示
<meta name="description" content="老男孩教育Python學院">
<!--例：淘寶的頁面中-->
<meta name="keyword" content="淘寶,掏寶,網上購物,C2C,線上交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣資訊,網店,一口價,拍賣,網上開店,網路購物,打折,免費開店,網購,頻道,店鋪">
<meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺，提供各類服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨後付款)等安全交易保障服務，並由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！">
body內的常用標籤
基本標籤
<h1>標題標籤 </h1> 1-6級標題
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除線</s>
<p>段落標籤</p>
<hr> 水平分割線
<br> 換行標籤
標籤的分類2
# 1.塊級標籤：獨佔一行
eg: h1~h6 p div
a.塊級標籤可以修改長度
b.塊級標籤內部可以巢狀任意的塊級標籤和行內標籤
但p標籤 雖然是塊級標籤，但是隻能巢狀行內標籤，不能巢狀塊級標籤 （HTML書寫規範）
如果你套了，問題也不大 因為瀏覽器會自動幫你解開（瀏覽器是直接面向用戶的，不會輕易的報錯，哪有有報錯使用者也基本感覺不出來）
# 2.行內標籤(內聯標籤)：自身文字多大就佔多大
eg：i u s b span
a.行內標籤不可以修改長度 修改了也不會變化
b.行內標籤不能巢狀塊級標籤，可以巢狀行內標籤（但沒什麼意義）
特殊符號
>>> 空格
> >>> 大於號 '>'
< >>> 小於號 '<'
& >>> 連線符 '&'
¥ >>> 人民幣符 '¥'
© >>> 版權'©' (英文Copyright（版權）的簡寫，代表作者版權所有宣告)
® >>> 註冊商標'®'
常用標籤
div 屬於塊級標籤
span 屬於行內標籤
上述的兩個標籤是在構造頁面初期最常使用的，頁面的佈局一般先用div 和span 佔位之後再去調整樣式，尤其是div使用非常的頻繁
div 你可以把它理解成 一塊區域，也就意味著用div來提前規定所有的區域，之後往該區域內部填寫內容即可
span 給普通的文字佔位
img 標籤
# 圖片標籤
<img src="" alt="" title='新垣結衣'>
屬性：
src=''
1.圖片的路徑，可以是本地的也可以是網上的
2.URL 自動朝該url傳送get請求獲取資料
alt='這是我的前女友' : 當圖片載入不出來的時候，給圖片的描述資訊
title='新垣結衣' ： 當滑鼠懸浮到圖片上之後，自動展示的提示資訊
height='800px' : 修改圖片的高度 px畫素單位
width='' : 修改圖片的寬度
若只修改高度或者寬度，另一個會根據原圖等比例調整；若都修改了，沒有考慮比例性的問題，圖片就會失真
a標籤
# 超連結標籤
所謂的超連結是指從一個網頁指向一個目標的連線關係，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個檔案，甚至是一個應用程式。
<a href=""></a>
"""
當a標籤制定的網址從來沒有被點選過，那麼a標籤的字型顏色是藍色，若點選過後 變成紫色 （瀏覽器給你記憶了）
"""
屬性：
href
1. 放URL，使用者點選就會跳轉到該URL頁面
2. 放其他標籤的id值，點選即可跳轉到對應的標籤位置 格式：href='# id值'
target=
1. 預設a標籤是在當前頁面完成跳轉 》》》 '_self'
2. 修改為新建視窗頁面跳轉 》》》 '_blank'
# a標籤的錨點功能
""" eg: 點選一個文字標題，頁面自動跳轉到標題對應的內容區域（目錄到正文內容） """
<a href="" id="d1">頂部</a>
<h1 id="d3">hello word!</h1>
<div style="height: 1000px; background-color: red"></div>
<a href="" id="d2">中間</a>
<div style="height: 1000px; background-color: greenyellow"></div>
<a href="#d3">回到h1</a>
<a href="#d2">回到中間</a>
列表標籤
1.無序列表（較多）
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li>
</ul>
# 雖然ul標籤很醜，但是在頁面佈局的時候 只要是排版一致的幾行資料基本上用都是 ul標籤
type屬性：
disc（實心圓點，預設值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）
2.有序列表（瞭解）
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
type屬性：
1 數字列表，預設值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
start=""： 定義起始位
3.標題列表（瞭解）
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
表格標籤
jason 123 read
egon 123 dbj
tank 123 hecha
...
<table> </table> 標籤
<table>
<thead>
<tr> 一個tr就表示一行
<th>username</th> 加粗文字
<td>username</td> 正常文字
</tr>
</thead> 表頭(欄位資訊)
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>read</td>
</tr>
</tbody> 表單(資料資訊)
</table>
<table border="1"> 加 表格外邊框
<td colspan="2">egon</td> 水平方向佔多行 列合併
<td rowspan="2">DBJ</td> 垂直方向佔多行 行合併
# 表格標籤不一定都要講thead 和 tbody 都寫出來，可以只有表單 tbody
# 原生的表格標籤很醜 但是後續我們一般都是使用框架封裝好的 很好看
屬性:
border: 表格邊框.
cellpadding: 內邊距 （文字距離內框線的距離）
cellspacing: 外邊距 （內框線和外框線的距離）
width: 畫素 百分比.（最好通過css來設定長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）
表單標籤（重要）
"""
能夠獲取前端使用者資料(使用者輸入的、使用者選擇、使用者上傳...)基於網路傳送給後端伺服器
"""
# 寫一個註冊功能
<form action=""></form> 在該form標籤內部書寫的獲取使用者的資料都會被form標籤提交到後端
action屬性:控制資料提交的後端路徑(給哪個服務端提交資料)
1.什麼都不寫 預設就是朝當前頁面所在的url提交資料
2.寫全路徑:https://www.baidu.com 朝百度服務端提交
3.只寫路徑字尾action='/index/' 自動識別出當前服務端的ip和port拼接到前面
eg:host:port/index/
# 1.label標籤
<label> 標籤為 input 元素定義標註（標記）。
<label> 標籤不會向用戶呈現任何特殊效果。
<label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。
# 2.input標籤 就類似於前端的變形金剛 通過type屬性變形
type屬性
text:普通文字
password:密文
date:日期
submit:用來觸發form表單提交資料的動作按鈕
button:就是一個普普通通的按鈕 本身沒有任何的功能 但是它是最有用的，學完js之後可以給它自定義各種功能
reset:重置內容的按鈕
radio:單選框
預設選中，要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
當標籤的屬性名和屬性值一樣的時候可以簡寫
<input type="radio" name="gender" checked>女
checkbox:多選 # check的意思是 打鉤
<input type="checkbox" checked>DBJ
file:獲取檔案 也可以一次性獲取多個
<input type="file" multiple>
hidden:隱藏當前input框
釣魚網站 設定一些輸入框的預設值（nama/vaule)，再把輸入框隱藏，則提交資料時，就篡改了你的資料
其他屬性：
name：表單提交時的“鍵”，注意和id的區別
value：表單提交時對應項的值
type="button", "reset", "submit"時，為按鈕上顯示的文字內容
type="text","password","hidden"時，為輸入框的初始值
type="checkbox", "radio", "file"，為輸入相關聯的值
checked：radio和checkbox中為預設被選中的項
readonly：只讀 （該輸入框既不能輸入，但向後端提交顯示的資料 text和password設定只讀）
disabled：禁用 （該輸入框既不能輸入，也不會向後端提交資料 所有input均適用）
placeholder：背景佔位提示符 （在輸入框中，背景顯示的提示資訊）
#input標籤常與label標籤聯合使用
# 第一種 直接講input框寫在label內部 （建議這種，結果清晰）
<label for="d1">
username:<input type="text" id="d1">
</label>
#第二種 通過id連結即可 無需巢狀
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label關聯也沒有問題
"""
label 和 input都是行內標籤
"""
# 3.select標籤 預設是單選 可以加mutiple引數變多選 預設選中selected # select的意思是 選擇
<select name="" id="" multiple>
<option value="" selected>新垣結衣</option> # option：選項
<option value="" selected>斯佳麗</option>
<option value="">明老師</option>
</select>
# 4.textarea標籤 獲取大段文字
<textarea name="" id="" cols="30" rows="10"></textarea>
# 能夠觸發form表單提交資料的按鈕有哪些(一定要記住)
1、<input type="submit" value="註冊">
2、<button>點我</button>
# 所有獲取使用者輸入的標籤 都應該有name屬性
name就類似於字典的key
使用者的資料就類似於字典的value
# 需要使用者選擇的標籤 你需要自己加上value值
radio
checkbox
option
ps:如果你給獲取使用者輸入的標籤加了value值 那麼就類似於預設值
驗證form表單提交資料
# 接下來的flask框架程式碼無需掌握 看一下效果即可
pip3 install FLASK
# form表單預設提交資料的方式 是get請求 資料是直接放在url後面的
http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
# 你可以通過method指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post">
# 針對使用者選擇的標籤(radio/checkbox/select) 使用者不需要輸入內容 但是你需要提前給這些標籤新增內容value值
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" checked value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="basketball">籃球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">雙色球
</p>
<p>province：
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
</select>
</p>
"""
form表單提交檔案需要注意：
屬性設定
1.method必須是post
2.enctype="multipart/form-data"
enctype類似於資料提交的編碼格式
預設是form-urlencoded 只能夠提交普通的文字資料
form-data 就可以支援提交檔案資料
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
"""下面的程式碼無需掌握 你只需要關心form表單即可"""
from flask import Flask, request
app = Flask(__name__)
# 當前url既可以支援get請求也可以支援post請求 如果不寫預設只能支援get請求
@app.route('/index/',methods=['GET','POST'])
# route：路線的意思，第一個引數就是ip+埠，之後的路徑。一般是檢視名，特別注意 前後都有'/'
def index():
print(request.form) # 獲取form表單提交過來的非檔案資料
# ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
print(request.files) # 獲取檔案資料,是字典型別
file_obj = request.files.get('myfile.png')
file_obj.save(file_obj.name)
return 'OK'
app.run()
# 針對使用者輸入的標籤。如果你加了value 那就是預設值
<label for="d1">username:<input type="text" id="d1" name="username" value="預設值"></label>
disable 禁用
readonly只讀