前端開發(一)
阿新 • • 發佈：2022-04-22
前端開發(一)
前端簡介
# 1.什麼是前端 什麼是後端 前端 任何與使用者直接打交道的介面都可以稱之為前端 eg:B/S,C/S架構的客戶端和瀏覽器，使用者直接可以操作到的 後端 不直接與使用者打交道的用於執行真正業務邏輯的程式碼 eg:服務端，使用者操作不到的 # 2.前端的學習路徑 知識脈絡: HTML CSS JavaScript jQuery(框架) Bootstrap(框架) 只要學習前端看到要學'前端三劍客'>>>:HTML CSS JavaScript 比喻說明: HTML:網頁的骨架 類似毛坯房，決定了房子大致樣子 CSS:網頁的樣式 硬裝和軟裝，決定房子風格 JavaScript:網頁的動態效果 智慧裝置，讓你房子更加智慧
HTTP簡介
# 可以充當客戶端的有哪些? 1.自己寫的python程式碼(TCP客戶端) 2.別人寫的瀏覽器 '''cs架構與bs架構:bs本質也是cs''' # 問題 我們自己寫的TCP服務端與瀏覽器之間通訊了 但是瀏覽器不識別服務端資料 # 推導 不同的服務端資料的組織策略千差萬別 但是瀏覽器卻需要做到能夠統一處理 最佳的解決措施是統一規定一個標準>>>:HTTP協議 # HTTP協議 規定了服務端與瀏覽器之間的資料互動格式及其他事項 """ 如果服務端遵循HTTP協議 就可以被瀏覽器正常訪問並展示內容 如果服務端不遵循HTTP協議 瀏覽器就不會正常訪問和展示 但是不影響服務端 如果這個應用特別火爆 那麼完全可以讓使用者下載專屬的客戶端(app) """
HTTP協議
# 1.四大特性 1.基於請求、響應 服務端永遠不會主動給客戶端發訊息 必須是客戶端先請求服務端被動響應 2.基於TCP/IP作用於應用層之上的協議 應用層協議:HTTP HTTPS FTP ... 3.無狀態 服務端不儲存客戶端狀態(縱使見她千百遍 我都當她如初見) 4.短連線 不保持客戶端與服務端之間的連結導通 補充:websocket(長連線) 主要用於加好友聊天等業務 # 2.資料格式 請求格式:客戶端給服務端傳送訊息應該遵循的資料格式 1.請求首行(請求方法 協議版本) 2.請求頭(一大堆k:v鍵值對) 3.(換行不能省略) 4.請求體(攜帶敏感資料:密碼 身份照號...) 不是一直都有 響應格式:服務端給客戶端傳送訊息應該遵循的資料格式 1.響應首行(響應狀態碼 協議版本) 2.響應頭(一大堆k:v鍵值對) 3.(換行不能省略) 4.響應體(給瀏覽器展示給使用者看的頁面內容) # 3.響應狀態碼 用數字來表示一串中文意思(簡化理解) 1XX:服務端成功接收到了你的資料正在處理 你可以等待或者繼續傳送 2XX:200 OK 表示請求成功 服務端給出了響應 3XX:301\302 表示重定向(想訪問A頁面但是自動跳轉到了B頁面) 4XX:403請求不合法(許可權不夠) 404請求資源不存在 5XX:都是服務端錯誤 與客戶端無關(程式碼bug、機房炸了...) 在工作中還會自定義狀態碼(因為預設的不夠) 自定義狀態碼一般都是從10000開始 # 以後我們進公司寫後端也需要給前端提供一個手冊 eg:聚合資料
HTML簡介
<h1>hello big baby</h1>
<a href="https://www.sogo.com">click me</a>
<img src="111.jpg"/>
# 上述語法就是HTML 用於構建網頁的骨架(所有的網頁都是由HTML組成)
1.存放HTML程式碼的檔案字尾名一般都是.html
2.HTML:超文字標記語言
它沒有任何的邏輯 固定搭配 """所見即所得"""
3.HTML文件結構
<html>
<head>給瀏覽器看的資料</head>
<body>給使用者看的資料</body>
</html>
4.HTML標籤的分類
1.雙標籤:有頭有尾 內容寫在中間
<h1></h1> <html></html>
2.自閉合標籤:單標籤
<img/> 一般有特殊功能
5.HTML註釋語法
<!--單行註釋-->
<!--
多行註釋
-->
'''html由於標籤非常的多 所以可以通過註釋區分頁面區域'''
補充
1.如何開啟html標籤
1.查詢並右鍵選擇開啟方式
2.pycharm快捷方式(重要)
html檔案內容區右上方瀏覽器圖示
2.html標籤其實沒有縮排的概念
之所以縮排是因為我們習慣了 更加美觀
3.在pycharm中的html檔案內
編寫標籤只需要寫表名名稱即可 按tab鍵自動補全
4.在pycharm中的html檔案內
註釋的快捷鍵也是ctrl+?
head內常見標籤
# head標籤內編寫的標籤一般都是給瀏覽器看的
title標籤 控制網頁小標題
style標籤 內部支援編寫css程式碼
link標籤 引入外部css檔案
script標籤 內部支援編寫js程式碼 也可以通過src屬性引入外部js檔案
meta標籤 功能非常多
keywords:搜尋引擎查詢關鍵字
description:用於展示頁面搜尋結果的文字描述
"""
正常的業務邏輯 HTML CSS JS都會分不同的檔案儲存 用於解耦合
"""
body內基本標籤
"""相同的樣式可能存在多種標籤 區別在於語義不一樣(後面再說)"""
1.標題系列
h1~h6(1到6級標題)
2.字體系列
<i>斜體</i>
<b>加粗</b>
<u>下劃線</u>
<s>刪除線</s>
3.文字段落
<p></p>
4.其他
hr 水平分割線
br 換行符
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frist HTML</title>
</head>
<body>
<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
<p>我是正文內容</p>
<i>我是斜體</i>
<b>我是加粗</b>
<hr> <!--分隔線-->
<u>我是下劃線</u>
<br> <!--換行符-->
<s>我是刪除線</s>
</body>
</html>
效果展示
body內特殊符號
空格
> 大於號
< 小於號
& &符號
¥ 羊角符
© 版權
® 商標
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>此處空格》 《此處空格</p>
<p>大於號:></p>
<p>小於號:<</p>
<p>&符:&</p>
<p>羊角符:¥</p>
<p>版權符:©</p>
<p>商標:®</p>
</body>
</html>
效果展示
body內常見標籤
"""
標籤的類別
塊兒級標籤:h1~h6 p div
預設獨佔瀏覽器一行內
行內標籤:s i u b span
自身內部文字多大就佔多大
標籤之間支援巢狀(最好是佈局類相關標籤參與)
塊兒級標籤可以巢狀任意標籤
不屬於佈局標籤的塊兒級標籤不建議巢狀塊兒級標籤
行內標籤只能巢狀行內標籤
"""
1.佈局標籤
div
span
# 頁面的編寫首先就是先用佈局標籤佔位 之後填充內容即可
ps:課下隨便找幾個網站檢視一些div的使用
2.圖片標籤
img
src 圖片路徑
title 滑鼠懸浮自動展示提示資訊
alt 當圖片無法正常展示自動提示的資訊
height 自定義圖片高度
width 自定義圖片寬度
# height和width調整一個另外一個自適應調節 單位是px(畫素)
3.連結標籤
a
href 點選跳轉到位置
可以寫網址
<a href='網址'></a>
也可以寫標籤id值
<a href='頁面上某個標籤id值'></a>
target 控制是否當前頁跳轉
預設_self當前頁
設定_blank新建頁
程式碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--建立佈局塊，高100畫素，寬100畫素，背景紅色-->
<div style="width: 100px;height: 100px;background: red"></div>
<span>你好啊</span>
<!--新增圖片，高500畫素，寬度自適應，滑鼠懸浮顯示粥粥，找不到圖片顯示圖片飛走了-->
<img src="微信圖片_20220411163447.jpg" style="height: 500px;" title="粥粥" alt="圖片飛走了">
<!--超連結，點選跳轉第一個網頁-->
<a href="frist.html" target="_blank">點選跳轉第一個網頁</a>
</body>
</html>
效果展示
標籤的兩大重要引數
1.id
類似於身份證號 同一個html頁面上標籤的id值不允許重複
用於精確查詢某個標籤(因為一個html頁面上相同標籤名的標籤太多)
2.class
類似於面向物件知識 可以將多個標籤歸為一類 分類查詢(範圍查詢一次性多個)
列表標籤
# 無序列表
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
"""
無序列表是使用頻率最高的列表標籤
頁面上只有是有規則排列的橫向或者豎向內容 幾乎使用的都是無序列表
"""
程式碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1班</li>
<li>2班</li>
<li>3班</li>
<li>4班</li>
</ul>
</body>
</html>
效果展示
表格標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>劉知兵</td>
<td>1500</td>
<td>男</td>
</tr>
<tr>
<td>張窟窿</td>
<td>1500</td>
<td>男</td>
</tr>
<tr>
<td>關傲天</td>
<td>1500</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
效果展示