[TOC] 前端 什麼是前端 任何與用戶直接打交道的操作界面 都可以稱之為前端 eg：電腦界面 手機界面 平板界面 什麼是後端 真正的幕後操作者 web服務的本質 請求 響應 瀏覽器輸入網址 回車發生了哪些事 1.朝著指定的伺服器地址發送請求 2.服務端接收請求 並處理 3.返回相應的響應 4.瀏覽 ...
目錄
前端
什麼是前端
任何與用戶直接打交道的操作界面 都可以稱之為前端
eg：電腦界面 手機界面 平板界面
什麼是後端
真正的幕後操作者
web服務的本質
請求 響應
瀏覽器輸入網址 回車發生了哪些事
1.朝著指定的伺服器地址發送請求
2.服務端接收請求 並處理
3.返回相應的響應
4.瀏覽器接收並渲染出好看的頁面 給用戶看
請求方式
1.get請求
朝伺服器要資源
eg:敲www.baidu.com
2.port請求
朝伺服器提交數據
eg:登錄功能
HTTP協議
超文本傳輸協議
規定了服務端與瀏覽器數據傳輸的數據格式
1.四大特性
1.基於TCP/IP作用與應用層之上的協議
2.基於請求響應
請求對應響應
3.無狀態
不保存客戶端狀態
無論來多少次 都當你如初見
cookie session
4.無連接
長連接 websocket 聊天室
2.數據格式
請求格式
請求首行（請求方式 協議版本）
請求頭（一大堆k:v鍵值對）
請求體（敏感信息 密碼 身份證號）
響應格式
響應首行（請求方式 協議版本）
響應頭（一大堆k:v鍵值對）
響應體（給用戶看的數據）
響應狀態碼
用數字來表示一串文字需要表達的意思
1XX：服務端已經成功接收到你的請求 正在處理 你可以繼續提交其他數據
2XX：服務端成功響應了相應的數據（200）
3XX：重定向
4XX：（404請求資源不存在） （403你當前不符合某一些條件 無法正常訪問）
5XX：伺服器內部錯誤（500）
HTML
超文本標記語言，是一種標識性的語言，包括一系列標簽。
文件的尾碼名
文件的尾碼名是給人看的，對於電腦來說，全都是二進位；之所以不同的尾碼名有不同的功能，是程式員人為定製的
HTML的註釋
==註釋是代碼之母==
<!--單行註釋-->
<!--
多行註釋1
多行註釋2
多行註釋3
-->
在搭建頁面的時候，通常會利用註釋來劃分區域
<!--導航條開始-->
<!--導航條結束-->
<!--側邊欄開始-->
<!--側邊欄結束-->HTML的文檔結構
<html>
<head></head> 不是給人看的 給瀏覽器看的
<body></body> body內的代碼才是給人看的
</html>
<h1>
hello world
</h1>
<a href="https://www.baidu.com">click me</a>
<img src=src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573566230133&di=590ab12707a1d494be7ec784801076d8&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201207%2F04%2F20120704211148_3UWwd.jpeg"/>標簽的分類1
1.雙標簽（h1,a）
2.自閉合標簽（img）
head內常用標簽
title 定義網頁標題
style 內部支持寫css代碼
link 引入外部css樣式文件
script 內部可以直接寫js代碼，也可以引入外部js文件
meta 定義網頁源信息
<meta name="keywords" content="meta總結，html meta,meta屬性，meta跳轉">
<meta name="description" content="老男孩python學院">瀏覽器上所看到的花里胡哨的頁面，背後都是HTML代碼而已
body內常用標簽
h1-h6 標題標簽
p 段落標簽 一個p就是一行內容
s 刪除線
b 加粗
u 下劃線
i 斜體
br 換行
hr 一條分割線body內特殊符號
空格
&； &
¥ ￥
> >
< <
© ©
® ® 標簽的分類2
1.塊級標簽
h1-h6、p、br、hr、div
獨占一行
- 塊級標簽內可以嵌套其他塊兒級的行內標簽
- 註意：
p標簽雖然是塊級標簽，但是他的內部不能嵌套任何塊兒級標簽，只能嵌套行內標簽(***)
2.行內標簽
s 、i、u、b、span
內部文本多大，就占多大
行內不能嵌套行內和塊級標簽
********************************************************
標簽通常應該有兩個屬性
id 就類似於身份證號，每一個標簽，都應該有id值，並且在同一個html文檔中，標簽的id不能重覆
class 類屬性，有點類似於面向對象的繼承，class = 'c1 c2 c3' 。這個標簽就會擁有c1 c2 c3的所有樣式
********************************************************body內重要的標簽
div 一塊區域，可以往這塊兒區域內填寫任何內容
span
div和span是前期構建網頁的基本骨架a 鏈接標簽
1.跳轉功能
href參數控制跳轉的地址
這個地址如果在你的機器上如果沒有被點擊過那麼預設是藍色
只要點過一次之後，之後顏色都是紫色
<!--<a href="https://www.sogo.com">點我點我</a>-->
a標簽預設是在當前視窗跳轉
你可以指定，新建視窗打開
target = "_self"
target = "_blank"2.錨點功能
給a標簽設置id值
然後再href中書寫對應的a標簽id值，點擊即可跳轉到對應的位置
<a href="" id>文章開頭</a>
<div style="background_color: red;height: 1000px"></div>
<div style="background_color: green;height: 1000px"></div>
<div style="background_color: orange;height: 1000px"></div>
<a href="" id>文章中部</a>
<div style="background_color: black;height: 1000px"></div>
<div style="background_color: green;height: 1000px"></div>
<div style="background_color: orange;height: 1000px"></div>
<a href="#a1">回到頂部</a>
<a href="#a2">回到中部</a>img 圖片標簽
src
1.圖片地址，網上的地址也可以是你的本地圖片地址
2.url(網址) 自動朝該網址發送get請求，獲取圖片資源
alt
當圖片載入不出來的時候，展示的提示信息
title
滑鼠懸浮上去展示的提示信息
width和height
這兩個參數，只需設置一個，就可以預設是等比例縮放
兩個全都調整的話，圖片就會失真
列表標簽
無序列表(***************)
ul
li
type參數
disc(實心圓點，預設值)
circle(空心圓圈)
square(實心方塊)
none(無樣式)有序列表(瞭解)
ol
li
type參數
1 數字列表，預設值
A 大寫字母
a 小寫字母
I 大寫羅馬
i 小寫羅馬標題列表(瞭解)
dl
dt 小標題
dd 小章節表格標簽
展示數據 一般都用到表格標簽
<table>
<thead>
<tr>
<th>username</th>
<th>password</th>
<th>hobby</th>
<th>is delete</th>
</tr>
</thead>
</table><tbody>
<tr>
<td>tank</td>
<td>886</td>
<td>love</td>
<td>DBJ</td>
</tr>
</tbody>
