下面是小凰凰的簡介，看下吧！
💗人生態度：珍惜時間，渴望學習，熱愛音樂，把握命運，享受生活
💗學習技能：網絡 -> 雲計算運維 -> python全棧( 當前正在學習中)
💗您的點贊、收藏、關注是對博主創作的最大鼓勵，在此謝過！
有相關技能問題可以寫在下方評論區，我們一起學習，一起進步。
後期會不斷更新python全棧學習筆記，秉着質量博文爲原則，寫好每一篇博文。
文章目錄
一、前端
1、什麼是前端
任何與用戶直接打交道的操作界面都可以稱之爲前端
比如:電腦界面 手機界面 平板界面
什麼是後端？
後端類似於幕後操作者(一堆讓人頭皮發麻的代碼)
不直接跟用戶打交道
2、前端學習歷程
1. HTML:網頁的骨架 沒有任何的樣式
2. CSS:給骨架添加各種樣式 變得好看
3. Java Script:控制網頁的動態效果
4. 前端框架:BOOTSTRAP、JQuery、Vue
提前給你封裝好了很多操作 你只需要按照固定的語法調用即可
一、HTML介紹
1、Web服務本質
瀏覽器中敲入回車發生了幾件事？
1. 瀏覽器朝服務端發送請求
2. 服務端接收請求
3. 服務端返回相應的請求
4. 瀏覽器接收響應，根據特定的規則渲染頁面展示給用戶看
詳細過程：
瀏覽器發請求 -->DNS域名解析（獲取目標ip+port）–>TCP三次握手建立連接–>基於 HTTP協議發起get請求 --> 服務端接收並處理請求 --> 服務端返回請求的數據 --> 瀏覽器得到數據後渲染頁面
DNS域名解析流程：先查找瀏覽器緩存,若沒有,再向操作系統的hosts文件查找，若沒有，再向本地域名服務器進行遞歸查找，若沒有，再去根服務器迭代查詢
2、HTTP協議
（1）什麼是HTTP協議？
HTTP協議是超文本傳輸協議
規定了瀏覽器與服務端之間消息傳輸的數據格式
（2）四大特性
1.基於請求響應
2.基於TCP/IP之上的作用於應用層的協議
3.無狀態（服務端不保存用戶的狀態，也就相當於客戶端訪問之後沒有記錄）
eg:一個人來了一千次 你都記不住 每次都當他如初見
由於HTTP協議是無狀態的 所以後續出現了一些專門用來記錄用戶狀態的技術
cookie、session、token...
4.無連接（請求來一次我響應一次 之後立馬斷開連接 兩者之間就不再有任何關係了）
長鏈接:雙方建立連接之後默認不斷開 websocket(後面講項目的時候會講)
（3）請求數據格式
1.請求首行(標識HTTP協議版本,當前請求方式)
2.請求頭（許多k,v鍵值對）
3.換行符（/r /n,此處應空着）
4.請求體（攜帶一些敏感信息，如密碼）
（4）響應數據格式
1.響應首行
2.響應頭
3.換行符（/r/n，此處應空着）
4.響應體(返回給瀏覽器頁面的數據 通常響應體都是html頁面)
（5）響應狀態碼
用一串簡單的數字來表示一些複雜的狀態或者提示信息
1XX:服務端已經成功接收了你的數據正在處理 你可以繼續提交額外的數據
2XX:服務端成功響應 你想要的數據(請求成功200)
3XX:重定向(當你在訪問一個需要登錄之後才能訪問的頁面 你會發現窗口會自動調到登錄頁面 301 302)
4XX:請求錯誤(請求資源不存在404,請求不合法不符合內部規定會權限不夠403)
5XX:服務器內部錯誤(500)
（6）請求方式
1.get請求
朝服務端要資源（比如瀏覽器窗口輸入www.baidu.com）
2.post請求
朝服務端提交數據（比如用戶登錄 提交用戶名和密碼）
URL:統一資源定位符（也就是網址）
3、HTML是什麼？
HTML是一種超文本標記語言，是一種用於創建網頁的標記語言
網頁能正常顯示出來，必須遵循html標記語法，所以瀏覽器顯示出來的頁面，內部都是html代碼
它不是一種編程語言，HTML使用標籤來描述網頁
4、HTML註釋
註釋是代碼之母
<!--單行註釋-->
<!--
多行註釋
多行註釋
-->
一般情況下html的註釋都會按照下面這個方式來寫
<!--導航條樣式開始-->
<!--導航條樣式結束-->
5、HTML文檔結構
<html>
<head></head>:head內的標籤不是給用戶看的 而是定義一些配置主要是給瀏覽器看的
<body></body>:body內的標籤 寫什麼瀏覽器就渲染什麼 用戶就能看到什麼
</html>
<!--注意:
1. HTML代碼是沒有格式的，可以全部寫在一行都沒有問題，只不過我們習慣了縮進來表示代碼
在書寫HTML代碼的時候
2. 你只需要寫標籤名 然後tab就能自動補全
-->
最基本的html文檔
<!DOCTYPE html>
<html lang="en"> <!--en會告訴瀏覽器內容爲英文,中文爲zh,若沒有lang則瀏覽器會根據內容自己解析>
<head>
<meta charset="UTF-8"> <!--meta 爲body裏內容的編碼的方式-->
<title>Title</title> <!--網頁的標題-->
</head>
<body>
</body>
</html>
<!DOCTYPE html> 聲明爲HTML文檔。
<html>、</html> 是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
<head>、</head> 定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。
<title>、</title> 定義了網頁標題，在瀏覽器標題欄顯示。
<body>、</body> 之間的文本是可見的網頁主體內容。
注意：對於中文網頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現亂碼。有些瀏覽器會設置 GBK 爲默認編碼，則你需要設置爲 <meta charset="gbk">
6、模擬瀏覽器給socket服務端請求數據
# index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>吳晉丞先生，您好!</h1>
</body>
</html>
import socket
server = socket.socket()
server.bind(('127.0.0.1',8082))
server.listen(5)
while True:
conn,addr = server.accept()
msg = conn.recv(1024)
print(msg)
conn.send(b'HTTP/1.1 200 ok\r\n\r\n') # http的傳輸數據的格式，相當於報頭，這個必須要有，在請求首行裏面
with open('index.html','rb') as read_f:
msg = read_f.read()
conn.send(msg)
conn.close()
二、HTML常用標籤
1、標籤分類
1. 雙標籤(例如：<h1></h1> <a></a>)
2. 單標籤(自閉和標籤 例如：<img/>)
3. 塊級標籤(獨佔瀏覽器一行,例如：<div> <p> <h>)
塊兒級標籤可以修改長寬
塊兒級標籤內部可以嵌套任意的塊級標籤
但是p標籤雖然是塊兒級標籤 ,但是他不能夠嵌套其他塊兒級標籤,包括自身
所以：只要是塊兒級標籤 都可以嵌套行內標籤
p標籤只能嵌套行內 其他塊兒級可以嵌套任意的塊兒級標籤
4. 行內標籤(自身文本多大就佔多大，例如：<span> <b> <s> <i> <u>)
# 其中div和span通常都是用來構建網頁佈局的
2、head常用標籤
<title></title>:顯示網頁標題
-------------------------------------------------------
<style>
h1 {
color: greenyellow;
}
</style> 內部用來書寫css代碼或引用css代碼文件
-------------------------------------------------------
<script>
alert(123)
</script> 內部用來書寫js代碼或引用js代碼文件
-------------------------------------------------------
<link/>:專門用來引入外部的css文件或網站圖標
css文件：<link rel="stylesheet" type="text/css" href="style.css"></link>
網站圖標：<link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">
（1）Meta標籤介紹
<meta>元素可提供有關頁面的元信息（meta-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的。
meta標籤的組成：
meta標籤共有兩個屬性，它們分別'http-equiv 屬性'和'name 屬性'，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
（2） meta標籤的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=edge,告訴IE以最高級模式渲染文檔(瞭解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1"> <!--chrome=1,強制 IE 使用 Chrome Frame 渲染(需要安裝有Google Chrome Frame)-->
（3） meta標籤的name屬性
主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
# 定義搜索引擎搜索到本網站的關鍵字
<meta name="description" content="老男孩教育Python學院">
下面圖中紅框框部分的內容，就是寫在description的content中的
3、body常用標籤
<b>加粗</b> <!--bold 加粗-->
<i>斜體</i> <!--italic 斜體-->
<u>下劃線</u> <!--underline 下劃線-->
<s>刪除</s> <!--strikethough 刪除線-->
<p>段落標籤</p>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<!--換行--><br>
<!--水平線--><hr>
（1）特殊字符
空格:
>: >
<: <
<=: ≤
>=: ≥
&: &
¥: ¥
版權: ©
註冊: ®
注意：上面大家發現，大於、小於、大於等於、小於等於都有相應的特殊表示，但是等於沒有，這是爲了不與標籤符號<>衝突，height = 800px，這個=不就是等於的意思！=號不會衝突！
（2）分塊標籤
div 塊級標籤
span 行內標籤
p 段落標籤
上述的兩個標籤是在構造頁面初期最常使用的, 主要通過CSS樣式爲其賦予不同的表現。
# 頁面的佈局一般先用div和span佔位之後再去調整樣式
尤其是div使用非常的頻繁
div你可以把它看成是一塊區域 也就意味着用div來提前規定所有的區域，之後往該區域內部填寫內容即可
而普通的文本用span標籤
上圖是小米的官網，一個紅框框就是一個div標籤，一個綠框框就是一個span標籤，可能有沒畫完的，明白就行了！
因此可以得到，關於標籤嵌套：
通常,塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
'塊標籤中的有個特例，p標籤不能包含塊級標籤，p標籤也不能包含p標籤。'
（3）img標籤
# 圖片標籤
<img src="" alt="">
#【屬性】
src=" 圖片路徑"
1.圖片的路徑 可以是本地的也可以是網上的
2.url:自動朝該url發送get請求獲取數據
(什麼是URL？URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。)
alt="圖片描述信息"
當圖片加載不出來的時候 給圖片的描述性信息
title="鼠標懸浮停留時，自動提示信息"
當鼠標懸浮到圖片上之後 自動展示的提示信息
height="800px"
width=""
'高度和寬度當你只修改一個的時候 另外一個參數會等比例縮放'
如果你修改了兩個參數 並且沒有考慮比例的問題 那麼圖片就會失真
（4）a標籤
超鏈接標籤: 所謂的超鏈接是指從一個網頁指向一個目標的連接關係，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。
1. 鏈接標籤
<a href=" " target=" " ></a>
"""
當a標籤指定的網址從來沒有被點擊過 那麼a標籤的字體顏色是藍色
如果點擊過了就會是紫色（瀏覽器給你記憶了）
"""
2.【屬性】
(1) href=" "
1.放url，用戶點擊就會跳轉到該url頁面
2.放其他標籤的id值 點擊即可跳轉到對應的標籤位置
(2) target=" "
默認a標籤是在當前頁面完成跳轉 target="_self"
新建頁面跳轉 target="_blank"
# 每一個標籤都應該有三個比較重要的屬性
1.id值 該值就類似於人的身份證號 在用一個html文檔id應該保證唯一不重複
2.class值 該值就類似於面向對象裏面的繼承 可以寫多個
3.style(不是必備) 支持在標籤內直接寫css代碼 屬於行內樣式 優先級最高,'一般css都不用這個！'
<!-- a標籤的錨點功能——使用 id 屬性 和 href 屬性-->
eg:點擊一個文本標題 頁面自動跳轉到標題對應的內容區域
<a href="" id="d1">頂部</a>
<h1 id="d111">hello world</h1>
<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>
<a href="#d111">回到中間</a>
# 標籤既可以有默認的屬性，也可以有自定義的屬性
<p id="d1" class="c1" username="jason" password="123"></p>