# Web Intro
## 第4-0節社課
----
## 匿名發問Slido \#4445396
- 今天的內容有些來自[飛飛的書](https://www.books.com.tw/products/0010906898)
- 今天有一堆名詞解釋
- 可學到上學期最後一堂社課的網站怎麼寫(?
###### [.](https://drive.google.com/drive/folders/19Tr-k11Xvu0518C0P2Ssh96t3-wieYfD?usp=sharing)
---
## 網站/網頁
----
## 網頁瀏覽器
瀏覽網頁內容的軟體
如Chrome、Firefox、Edge、Safari等
----
## 網站伺服器
一台伺服器(電腦主機)存放了網站檔案，
並能夠接收瀏覽器發送的請求封包(request)
並做出相對應的回應(response)給瀏覽器
----
[Reference](https://ithelp.ithome.com.tw/m/articles/10289150)
----
## 網頁
- 靜態網頁: 僅前端元素，無後端互動
- 動態網頁: 接收請求後經後端程式碼與邏輯
進行資料庫的互動
----
### 靜態網頁
[Reference](http://www.tsweb.com.tw/T_JS_2/loadfile1-1.html)
----
### 動態網頁
[Reference](http://www.tsweb.com.tw/T_JS_2/loadfile1-1.html)
----
## 網頁程式語言
- 前端御三家: HTML、CSS、JavaScript
- 後端: PHP、Ruby、Java、Python...
----
### 前端御三家簡介
- HTML: 網頁的骨架，把網頁分成頭、身體、腳
- CSS: 網頁的衣服，用來美化網頁
- JS: 網頁的關節，使網頁能做出更多互動
----
----
### 後端語言使用率排行
----
## 前端語言實戰
----
### HTML
- HyperText Markup Language，超文本標記語言
- 副檔名.html
- 可用任何文字編輯器進行編輯
如: 記事本、Notepad++、VSCode、Vim
- 透過很多個tag描述網頁
----
### 基礎語法
```htmlmixed
<!DOCTYPE html> <!--宣告文件是HTML5檔案，必須在第一行-->
<html> <!--HTML的根元素，定義了整個HTML文件-->
<head> <!--放metadata的容器，可定義網頁的標題、字元集、style等-->
<title>網頁標題</title>
</head> <!--固定放在<html>跟<body>之間-->
<body> <!--網頁內容的主要部分-->
<h1>內文第一級字體(最大)</h1>
<h2>內文第二級字體</h2>
<h3>內文第三級字體</h3>
<h4>內文第四級字體</h4>
<h5>內文第五級字體</h5>
<h6>內文第六級字體(最小)</h6>
<p>段落</p> <!--段落間會換行、留邊距-->
<a href="https://www.google.com/">超連結</a>
<!--<a>建立的超連結不限於網址，包含email、網站其他頁面等-->
<!--href是一種標籤的屬性(attributes)，用來指定連結-->
<img src="https://i.imgur.com/syDibpr.png" width=256>
<!--在網頁中放入圖片，沒有結束tag，以下介紹一些屬性-->
<!--src: 指定圖片來源(網址或檔案路徑)-->
<!--width: 指定圖片寬度，單位px-->
<!--height: 指定圖片高度，單位px-->
<!--onload: 圖片載入成功時執行的JS-->
<!--onerror: 圖片載入失敗時執行的JS-->
</body>
</html>
```
----
### 加入CSS與JavaScript
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<title>網頁標題</title>
<style>
h1{
color: blue;
text-align: center;
}
#para1{
text-align: right;
}
.nav{
color: #FF00FF;
}
</style>
</head>
<body>
<p style="color:red;font-size:50px"> I am big red</p>
<h1>Test Element Selector</h1>
<h2 id="para1">Test id Selector</h2>
<h2 class-"nav">Test class Selector</h2>
<p id="demo"></p>
<script>document.getElementById('demo').innerHTML = Date()</script>
</body>
</html>
```
----
### CSS說明
- 19行: style屬性設定顏色red、大小50px
- 6~9行: 設定h1內的格式
- 10~12行: 建立id selector，設定字體靠右
- 13~15行: 建立class selector，設定顏色#FF00FF
----
### id selector v.s. class selector
1. id selector只能被使用一次
2. id selector可透過JS的getElementById()運用
----
### JavaScript說明
- 25行: <script> </script>
除了放在body內，也可放在head
通常在head當中定義函數或引入其他.js檔案
- 使用getElementById並且把內容改成當前日期
----
## 開發者工具
- 常見瀏覽器都有內建，協助開發者debug
- Chrome的開啟方法
1. F12
2. 右鍵=>檢查
3. Ctrl + Shift + i
4. 右上角 更多工具=>開發人員工具
----
### 功能列介紹
| 功能 | 說明 |
| -------- | -------- |
| Elements | 元素，可查看、更改HTML、CSS |
| Console | 控制，可查看、執行JavaScript |
| Sources | 可debug、更改、下斷點和儲存 JS |
| Network | 網路，可查看網路行為、封包內容 |
----
### 功能列介紹
| 功能 | 說明 |
| -------- | -------- |
| Performance | 性能，分析網站執行性能 優化速度 |
| Memory | 記憶體，分析目前記憶體執行狀況 |
| Application | 查看所有資訊ex. Cookie、Cache |
| Security | 查看網站是否安全與分析SSL憑證 |
| Lighthouse | 改善網站的品質，可為網站評分 |
----
## Console
---
## 網路
----
### World Wide Web(www)
- 由三個核心技術所構成
1. HTML
2. HTTP(超文本傳輸協定)
3. URL(統一資料定位符)
----
### 通訊協定
- 網路設備彼此溝通時的約定
- 必須採用相同的通訊協定，
網路設備才能夠互相交換資訊
----
## OSI七層模型
- 開放式系統互聯模型
(Open System Interconnection Model)
- 依照網路運作方式，分為七個層級
每級按照網路傳輸模式，定義所屬規範、標準
- **不是**一套標準規範，而是觀念描述
- 在發展網路功能及教育訓練上有很大的幫助
----
[Reference](https://vocus.cc/article/618c7853fd8978000108c4d5)
----
[Reference](http://oscarsun11080121.blogspot.com/2014/02/blog-post_9.html)
----
## TCP/IP
- TCP/IP Protocol Suite，通訊協定的通稱
- 利用**點對點連線機制**將傳輸資料的過程標準化
- 透過資訊封裝、定址、傳輸、路由
與目的地接收方式，將傳輸過程抽象成四階層
----
### TCP/IP 四層模型
- 又稱DoD四層模型，由美國國防部所制定
- 簡化版的OSI模型，分工較粗略(簡單有效率)，
不像OSI模型那麼精密與周延
----
[Reference](https://www.techbang.com/posts/15859-network-architecture-2-arpanet-history-and-introduction-to-mac-ip-dns-concepts-review)
----
## 網際網路協定 from [wiki](https://zh.wikipedia.org/zh-tw/%E4%BC%A0%E8%BE%93%E6%8E%A7%E5%88%B6%E5%8D%8F%E8%AE%AE)
----
### 傳輸層通訊協定 TCP v.s. UDP
----
[Reference](https://www.dpstele.com/snmp/transport-requirements-udp-tcp.php)
----
### TCP三方交握
- 保證點對點的可靠傳輸
- 三次握手，四次揮手
----
## DNS
- 網域名稱系統(Domain Name System)
將網域名稱和 IP 位址做對應的資料庫
- 電腦連到網站伺服器時是透過IP Address
ex. 172.217.160.100
純數字組成，對人類來說不方便記憶
我們通常用域名(Domain Name)找到網頁
ex. www.google.com
----
## URL
- 統一資源定位符，俗稱網址
[Reference](https://ithelp.ithome.com.tw/articles/10238860)
----
## HTTP
----
### HTTP Method
- HTTP1.1版定義了八種，以下僅列舉常見的
| Method | 說明 |
| -------- | -------- |
| GET | 向指定資源取得資料 |
| POST | 將要處理的資料提交給指定資源 |
| HEAD | 取得標頭 |
| PUT | 取代指定資料 |
| DELETE | 刪除指定資料 |
----
| 項目 | GET | POST |
| -------- | -------- | -------- |
| 資料傳遞方式 | 參數以Query String方式，由URL帶至Server端 | 將參數放至 Request 的 message body 中 |
| 參數長度限制 | 根據瀏覽器、Server 的不同會有所不同 | 無限制 |
| 資料種類 | ASCII | 無限制 |
| 安全性 | 低 | 高 |
----
### 請求封包(Request)
- 封包可以用F12或Burpsuite、Wireshark看
```
POST /gen_204?atyp=csi&ei=sqZIZMjtPJWIhwPTzrCoCQ&s=webhp&st=9742&fid=14&t=fi&zx=1682482885134&opi=89978449 HTTP/2
Host: www.google.com
Cookie: 1P_JAR=2023-04-26-04; AEC=AUEFqZcDXiscex4REUln7iQcuHqI3ws3GPoiFoZZ0ExXjuPB46qgjDQx51Q; NID=511=tZt5o5ymKV-Zu1ZWBnlH0zO84OvVpxDGHnxsfXQkMUodJ2_JbBSQB-T0Dvl6iJfup9r8pcu0KWV9GG6zK2NTn6oWEecRXGT0I-k6p_uztAN3GUU5iU1DBvNoVC6IaXV-SSXysYUGRiYqglD5tA26NoJAXYe06VE4UrgQp_1D-n0
Content-Length: 0
Sec-Ch-Ua: "Chromium";v="111", "Not(A:Brand";v="8"
Sec-Ch-Ua-Mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.5563.111 Safari/537.36
Sec-Ch-Ua-Arch: "x86"
Sec-Ch-Ua-Full-Version: "111.0.5563.111"
Sec-Ch-Ua-Platform-Version: "10.0.0"
Sec-Ch-Ua-Full-Version-List: "Chromium";v="111.0.5563.111", "Not(A:Brand";v="8.0.0.0"
Sec-Ch-Ua-Bitness: "64"
Sec-Ch-Ua-Model:
Sec-Ch-Ua-Wow64: ?0
Sec-Ch-Ua-Platform: "Windows"
Accept: */*
Origin: https://www.google.com
X-Client-Data: CITjygE=
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: empty
Referer: https://www.google.com/
Accept-Encoding: gzip, deflate
Accept-Language: zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7
```
----
### Request Header
| 名稱 | 說明 |
| -------- | -------- |
| Host | 請求的目標伺服器與port |
| Accept | 可以接受的回應內容類型格式 |
| Accept-Charset | 可接受的字元編碼集 |
| Accept-Encoding | 可接受的編碼方法 |
| Accept-Language | 可接受的自然語言方法 |
----
| 名稱 | 說明 |
| -------- | -------- |
| Cookie | 伺服器透過set-cookie儲存於瀏覽器中的cookie值 |
| If-Modified-Since | 上次請求的更改時間 |
| user-Agent | 瀏覽器版本和名稱 |
| Authorization | 用來進行身分驗證的Header |
| Referer | 記錄這個頁面的前一頁面網址 |
| Connection | 確認連線是否有保持 |
----
### HTTP Response Status Code
狗派->https://http.dog/ ; 貓派->https://http.cat/
| 類別 | 常見 |
| -------- | -------- |
| 1xx - 資訊回應 | 100 Continue |
| 2xx - 成功回應 | 200 OK |
| 3xx - 重新定向 | 302 Found |
| 4xx - 用戶端錯誤 | 403 Forbidden 404 Not Found |
| 5xx - 伺服器端錯誤 | 500 Internal Server Error |
----
### HTTPS
- 比HTTP多了**S**ecure
- SSL/TLS加密的連線
----
### Cookie & Session
- 記錄過去成功進行驗證的資訊(如登入記住帳號)
- 前者存在本地端，後者存在伺服器端
---
## 結語
- 如果對網頁設計有興趣可以嘗試自己寫/架網站
如果對網路有興趣可以去讀CCNA
- 希望你們有對這些每天都會接觸的東西
有更多了解和印象 (網路的水有點深(x
###### 題外話我找不到下堂課的講師qq 那週剛好遇到資安大會
###### 所以下次可能會打CTF吧窩不知道
# 段考加油(?
## 要來考幹喔w
----
###### tags: `資研`
{"metaMigratedAt":"2023-06-18T02:23:16.369Z","metaMigratedFrom":"YAML","title":"Web Intro","breaks":true,"contributors":"[{\"id\":\"836bb768-1057-4ecc-8cf8-05f7fd2fbbb7\",\"add\":8474,\"del\":502}]"}