---
# System prepended metadata

title: Web I by fallnight
tags: [2024 NISRA Enlightened]

---

:::info
# Web I
講師：fallnight
時間：8/27 10:00~12:00
課程簡報: [簡報](https://drive.google.com/file/d/1Iju5p4DFS1yptUCAK1M2xuxZGUNeRwMO/view?usp=drive_link)
:::
秋夜

## 網頁是什麼？
網址 -> 頁面 = 網頁


## URL, Uniform Resource Locator

`協定類型`://`伺服器位置`:`埠號`/`檔案路徑`/`檔名`?`參數`#`區段ID`

[RFC 3986](https://datatracker.ietf.org/doc/html/rfc3986#section-3)

- HTTP: 80
- HTTPS: 443

## 網頁架構

![image](https://hackmd.io/_uploads/Syp3whqo0.png)



## HTTP & HTTPS

[HTTP](https://datatracker.ietf.org/doc/html/rfc2616)：以明文

[HTTPS](https://datatracker.ietf.org/doc/html/rfc2818)：加密過

### method
- GET
    - 直接用參數丟回後台
    - 會受 URL 最大長度限制
- POST
    - 把資料寫在封包裏 (像裝信封袋)
    - 可以傳送更多資料
    - 不是絕對安全
        - 可以透過工具攔截封包

### Response
- 1xx：資訊回應
- 2xx：成功
- 3xx：重新導向
- 4xx：客戶端錯誤
- 5xx：server 端錯誤

## HTML、CSS、JS

### HTML

- 網頁骨架
- **H**yper **T**ext **M**arkup **L**anguage
- 由元素構成，一個起始標籤、一個結尾標籤，有時候會合在一起 `<img src="">`
    - ![](https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png)

```html!
<!DOCTYPE html>
<html lang="en">
    
<!-- 設定網頁基本資訊 -->
<head>
    
    <!-- 編碼 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 標題 -->
    <title>我是標題</title>
</head>
    
<!-- 主要內容 -->
<body>
    <h1>
        我是網頁內容，自帶粗體大字
    </h1>
</body>
</html>
```

### 標籤

* 標題：`<h1></h1>`~`<h6></h6>`
* 段落：`<p></p>`
* 換行：`<br>`
* 輸入框：`<input type="text">`
* 按鈕：`<button></button>`
* 圖片：`<img src="">`
* 連結：`<a href="">`
* 清單

### 標籤屬性

- `class`
- `id`
- ...

### 表單

```html!
<form action="loginHandler.php" method="get">
    <input type="text" name="" id=""><br>
    <input type="password" name="" id=""><br>
    <input type="submit" value="送出">
</form>
```

###  lab 0x1
```htmlembedded!
<!DOCTYPE html>
<html lang="zh-Hant-TW">
	<head>
		<meta charset="utf-8">
		<title>TRY!!</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" >
	</head>
	<body>
		<h1>fallnight</h1>
		<img src="https://i.imgur.com/bp1EmIa.jpg" width="10%" height="10%">
		<h2>輔大資工二年級</h2>
		<br>
		<h1>Interest</h1>
		<ul>
			<li>遊戲 (原神啟動!</li>
			<li>音樂</li>
			<li>追劇</li>
		</ul>
		<br>
		<h1>Who are u?</h1>
		<input type="text">
		<button>Hi</button>
		<br>
		<div>
			<label>(你誰)</label>
			<label>, hello!</label>
		</div>
	</body>
</html>
```

###  lab 0x2
```htmlembedded!
<!DOCTYPE html>
<html lang="zh-Hant-TW">
	<head>
		<meta charset="utf-8">
		<title>TRY!!</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" >
		<style>
			h1{
				color: pink;
				text-shadow: 3px 3px gray;
			}
			h2{
				text-shadow: 3px 3px gray;
			}
			#pic{ 
			    animation-name: MovePic;
			    animation-duration: 1.5s; 
			    animation-delay: 0.2s; 
			    animation-iteration-count: infinite; 
			}

			@keyframes MovePic{ 
			    from{
			        transform: translateY(20px);
			    }
			    50%{
			        transform: translateY(-10px);
			    }
			    to{
			        transform: translateY(20px);
			    }
			}
		</style>
	</head>
	<body style="background-color: powderblue;">
		<h1>fallnight</h1>
		<img src="https://i.imgur.com/bp1EmIa.jpg" width="10%" height="10%" id=pic>
		<h2>輔大資工二年級</h2>
		<br>
		<h1>Interest</h1>
		<ul >
			<li>遊戲 (原神啟動!</li>
			<li>音樂</li>
			<li>追劇</li>
		</ul>
		<br>
		<h1>Who are u?</h1>
		<input type="text">
		<button>Hi</button>
		<br>
		<div>
			<label>(你誰)</label>
			<label>, hello!</label>
		</div>
	</body>
</html>
```

###  lab 0x3
```htmlembedded!
<!DOCTYPE html>
<html lang="zh-Hant-TW">
	<head>
		<meta charset="utf-8">
		<title>TRY!!</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" >
		<style>
			h1{
				color: pink;
				text-shadow: 3px 3px gray;
			}
			h2{
				text-shadow: 3px 3px gray;
			}
			#pic{ 
			    animation-name: MovePic;
			    animation-duration: 1.5s; 
			    animation-delay: 0.2s; 
			    animation-iteration-count: infinite; 
			}

			@keyframes MovePic{ 
			    from{
			        transform: translateY(10px);
			    }
			    50%{
			        transform: translateY(-10px);
			    }
			    to{
			        transform: translateY(10px);
			    }
			}
		</style>
		<script>
			function sent(){
				var name = document.getElementById("inputname").value;
				document.getElementById("who").innerText = name;
			}
		</script>
	</head>
	<body style="background-color: powderblue;">
		<h1>fallnight</h1>
		<img src="https://i.imgur.com/bp1EmIa.jpg" width="10%" height="10%" id=pic>
		<h2>輔大資工二年級</h2>
		<br>
		<h1>Interest</h1>
		<ul>
			<li>遊戲 (原神啟動!</li>
			<li>音樂</li>
			<li>追劇</li>
		</ul>
		<br>
		<h1>Who are u?</h1>
		<input id=inputname type="text">
		<!--<input type="submit" onclick="sent()">-->
		<button onclick="sent()">Hi</button>
		<br>
		<div>
			<label id=who>(你誰)</label>
			<label>, hello!</label>
		</div>
	</body>
</html>
```

## Cookie & Session

Cookie 會存在瀏覽器裡面，可以修改，而且是明文傳輸。

Session 會生一個 ID 放在 Cookie 存進瀏覽器，後續溝通可以用使用者傳的 ID 在伺服器裡面找資料。

## robots.txt

告訴程式什麼可以爬，什麼不行。
- `User-agent`：對那些搜尋引擎生效，`*` 是代表全部的。
- `Disallow`：指定不可以爬的目錄。

## Click Jacking