---
title: '2023 NISRA社課 WEB I'
disqus: hackmd
---
2023 NISRA社課 WEB I
===
## Table of Contents
# -----社課提供共筆-----
# Web I
## WWW
**W**orld **W**ide **W**eb
* 全球資訊網
## 如何看到網頁
- URL 在哪裡
- HTML 長甚麼樣
- HTTP 如何傳輸
### Web如何運作
### URL
統一資料定位符
`協定://網域:埠號/檔案路徑?參數#片段ID`
ex. `https://nisra.net:420/tmp/test.php?q=1#1`
### HTTP/HTTPS
HyperText Transfer Protocol
- 傳輸超媒體文件
- 應用層協定
- 明文傳遞訊息
- HTTPS: 加密傳遞訊息
### 常用的資料請求方式: GET & POST
- GET: 參數在請求網址內
- 格式：網址?參數名稱1=參數內容1&參數名稱2=參數內容2
- POST: 參數在請求封包內
- 封包攔截可查詢到相關資訊
- 相較 GET 已經無法直接用URL取得隱私資料
### HTTP狀態碼
- 1xx 訊息提示
- 2xx 請求成功
- 3xx 重新導向
- 4xx 用戶端錯誤
- 5xx 伺服器錯誤
### cookies
- 記錄使用者狀態資料
- 儲存在用戶端
- 用來解決HTTP協定的網頁互動問題
* 記憶體 Cookie
* 非持久性，瀏覽器關了就沒了
* 硬碟 Cookie
* 持久性，瀏覽器關掉不會消失
### robots.txt
- 放在網路根目錄 (`/robots.txt`) 下的機器人指令
- 管理機器人活動
- 限制網站爬取
- **非強制**
```
User-agent:
Disallow: *
```
### 前端&後端
#### 前端
- 介面
- HTML CSS Javascript
#### 後端
- 資料庫
- PHP Python
## 網頁三兄弟
圖解三兄弟
- HTML 定義有哪些元素
- CSS 定義元素長甚麼樣
- JS 定義元素的行為
### 元素 Element
- 空元素
只有一個標籤
沒有內容
具開始與結束的性質
- 塊級元素
顯示以新的一行開始
- 內聯元素
顯示時不會換行
### 結構
- `<!DOCTYPE html>`：表示本頁面是由 HTML5 編成
- `<html>`：HTML文件會被包含在這個標籤之中
- `<head>`：裡面多為基礎設定，不會顯示在網頁中
- `<body>`：包含所有網頁瀏覽者看得到的內容
### `<head>`常用標籤
- `<title>` 定義文檔標題
- `<base>` 定義連結的默認連結位址
- `<link>` 定義文檔與外部資源的關係
- `<meta>` 描述網頁屬性 e.g.搜索關鍵字、網頁描述
- `<script>` 定義客戶端腳本事件(Javascript)
- `<style>` 定義HTML文檔的樣式文件(CSS)
### `<body>`常用標籤
- 標題: `<h1></h1>...<h6></h6>`
- 段落: `<p></p>`
- 圖片: `<img src="圖片路徑" alt="替代文字" width="圖片寬度" height="圖片高度">`
- 超連結：
`<a href = "連結位址" target = "開啟方式" title = "提示文字">有超連結功能的文字或圖片</a>`
- 註釋：`<!--註釋內容-->`
- 有序清單:
```xml=
<ol>
<li>有序清單1</li>
<li>有序清單2</li>
<li>有序清單3</li>
</ol>
```
網頁顯示結果:
- 無序清單:
``` xml=
<ul>
<li>無序清單1</li>
<li>無序清單2</li>
<li>無序清單3</li>
</ul>
```
網頁顯示結果:
- 表格:
```xml=
<table>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
```
網頁顯示結果:
### 文本標籤
- `<b>` 文字加粗
- `<em>` 定義重點文字
- `<i>` 斜體
- `<strong>` 定義加重語氣
- `<small>` 定義小號文字
- `<sub>` 定義下標字
- `<sup>` 定義上標字
- `<ins>` 定義插入字(有底線)
- `<del>` 定義刪除字(字有刪除線)
### CSS
- **C**ascading **S**tyle **S**heets
- 階層樣式表
- 一種風格頁面語言
### 引入方式
- inline style 內聯樣式
```
<h1 style="color: blue;"></h1>
```
- internal style 內部樣式表
```
<head>
<style>
/*CSS內容*/
</style>
<head>
```
- external style 外部樣式表
```
<link rel="stylesheet" type="text/css" href="檔案位置">
```
### 寫法
- 屬性 + 聲明
### Selector
- id選擇器
```
1.將標有特定id的HTML元素指定特定的樣式
2.寫法為#選擇器名稱，在html中以"id"表示
```
- class選擇器
```
定義一組的元素樣式，可在多個元素中使用
在html以"class"表示，CSS文檔中以"."小數點表示
```
### 常用屬性
- 背景
1. 背景顏色
e.g. background-color:black;
2. 背景圖片
e.g. `background-image:url("圖片位址");`
- 文本
1. 顏色
e.g. `color:white;`
2. 字體
e.g.font-family:sans-serif
3. 字體大小
e.g. font-size:20px;
4. 對齊方式
e.g. text-align:right;
### JavaScript
- 直譯式程式語言
- 可以直接嵌入HTML中
- 讓網頁與使用者互動
- 動態型別
- Javascript 自己會決定變數的型態
### 寫在哪
- 1.寫在HTML裡
```
<html>
<head>
<script>
//你的JScode
<script>
</head>
<body>
</body>
</html>
```
- 2.外部檔案引入
```
<head>
<script src="./js/XXX.js"></script>
</head>
```
### 運算子
- 四則運算 `+`,`-`,`*`,`/`
- 取餘數 ``%``
- 次方 `**`
- 比較 `>`,`<`,`>=`,`<=`,`==`,`!=`
- 嚴格比較(比較值 + 型態) `===`, `!===`
- 邏輯 `&&`,`||`
* onevent
* `onclick`:當滑鼠點擊時
* `onerror`:當出現error時(載入失敗)
* `onload`:當載入成功時
### DOM
- **D**ocument **O**bject **M**odel
- 一種讓文件以樹狀結構表式的模型
- 瀏覽器會將HTML解析為DOM樣式
## Lab
HTML
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "main_0x2.css">
<script src = "hello_0x2.js"></script>
<title>101</title>
</head>
<body>
<div class = "card">
<h1>101</h1>
<div style = "height: 150px;">
<img id = "pic" src="https://i.pinimg.com/originals/99/bb/33/99bb33d0439bc0cf3808fb41b61fdc8a.png">
</div>
<p>輔大資工大二</p>
<h2>Interest</h2>
<ul>
<li>畫畫</li>
<li>看漫畫</li>
<li>看小說</li>
<li>手作</li>
</ul>
<h2>Who are u?</h2>
<input id = "Name" type = "text" placeholder = "Name">
<input type = "submit" value = "Hi!" onclick = "showHello()">
</div>
<div id = "hello" style = "visibility: hidden;">
<p>Hello, <span id = "unknow"></span>.</p>
</div>
</body>
</html>
```
CSS
```css=
.card {
background-color: rgb(235, 225, 211);
height: 500px;
width: 300px;
margin: auto;
position: relative;
text-align: center;
}
.card ul {
margin: 0 25%;
}
.card li {
text-align: left;
}
#pic{
width: 150px;
height: 150px;
border-radius: 100px;
position: absolute; /*絕對定位*/
left: 25%;
animation-name: MovePic; /*動畫名稱*/
animation-duration: 3s; /*動畫時間*/
animation-delay: 0s; /*動畫延遲時間*/
animation-iteration-count: infinite; /*動畫重複次數，infinite 無限重複*/
}
@keyframes MovePic{ /*@keyframe 自訂動畫名稱、屬性變化*/
from{
transform:rotate(0deg);
/*transfom讓元素可以被平移、旋轉、縮放和傾斜*/
/*rotate() 旋轉*/
/*deg 旋轉角度*/
}
to{
transform:rotate(360deg);
}
}
```
JS
```javascript=
function showHello () {
var name = document.getElementById ("Name");
document.getElementById("hello").style.visibility = "visible";
document.getElementById("unknow").innerText = name.value;
}
```
###### tags: `ClassNotes` `NISRA` `112` `2023`
Sign in with Wallet
Connect another wallet