:::info # Web I 講師：fallnight 時間：8/26 10:00~12:00 課程簡報: https://slides.com/fallnight/2025enlightened-webi/fullscreen ::: ## 網頁是什麼? - 網址 → 頁面 = 網頁 - 平時會瀏覽的YouTube、校網就是一個個的網頁 ### URL - 網址: 統一資料定位符 - 格式: - <font color="#fd4340">協定</font>://<font color="#F7A004">網域</font>:<font color="#FFD700">埠號</font>/<font color="#32cd32"> 檔案路徑 </font>?<font color="#449df9">參數</font>#<font color="#aa57fc">片段ID</font> ### HTTP / HTTPS (HyperText Transfer Protocol) 前端後端在發送請求(request)、回覆(response)時，所遵循的通訊規則 - 應用層協定 - 超文字傳輸通訊協定 (HTTP): - 以明文傳送資料 - 超文字安全傳輸通訊協定 (HTTPS): - HTTPS以SSL/TLS加密協定，讓資料傳輸多一層保護，比HTTP安全 ## GET / POST - GET: - 通常用於請求簡單的資訊，例如連結或圖片，以及查詢資源的信息 - 請求時資料會附在URL上，就像明信片上的地址 - 缺點: - 大家都看得到訊息內容 - 會受 URL 的最大長度限制 - POST: - 通常用於傳送登入的帳密、送出HTML表單 - 資料會寫在封包內部，就像裝進信封袋的信件 - 可傳遞的資訊較多，安全性相較 GET 較高 - 不是絕對安全，可透過封包攔截找到相關資訊 ### HTTP狀態碼 | HTTP status code | 狀態 | |:----------------:|:------------:| | 1XX | 資訊回應 | | 2XX | 成功回應 | | 3XX | 重新導向 | | 4XX | 客戶端錯誤 | | 5XX | 伺服器端錯誤 | ## HTML - 網頁的骨架 - 英文全名為: **H**yper**T**ext **M**arkup **L**anguage - 超文本標記語言 - 用來描述並定義網頁內容 ### 元素 Element 由以下組成 - 元素(element) - 內容(content) - 起始標籤(opening tag) - 結束標籤(closing tag) ![element 圖示](https://hackmd.io/_uploads/Byui9octxl.png) ### 不一樣的元素 - 空元素 只有一個標籤 沒有內容 具開始與結束的性質 - 塊級元素 顯示以新的一行開始 - 內聯元素 顯示時不會換行 ### 結構 - `<!DOCTYPE html>`：表示本頁面是由 HTML5 編成 - `<html>`：HTML文件會被包含在這個標籤之中 - `<head>`：裡面多為基礎設定，不會顯示在網頁中 - `<body>`：包含所有網頁瀏覽者看得到的內容 ### `<head>`常用標籤 | 標籤說明 | 標籤 | |----------------------------------------|------------| | 定義文檔標題 | `<title>` | | 定義連結的默認連結位址 | `<base>` | | 定義文檔與外部資源的關係 | `<link>` | | 描述網頁屬性 e.g.搜索關鍵字、網頁描述 | `<meta>` | | 定義客戶端腳本事件(Javascript) | `<script>` | | 定義HTML文檔的樣式文件(CSS) | `<style>` | ### `<body>`常用標籤 #### 標題: `<h1></h1>...<h6></h6>` #### 段落: `<p></p>` #### 圖片: `<img src="圖片路徑" alt="替代文字" width="圖片寬度" height="圖片高度">` #### 超連結： `<a href = "連結位址" target = "開啟方式" title = "提示文字">有超連結功能的文字或圖片</a>` #### 註釋： `<!--註釋內容-->` #### 有序清單: ```html <ol> <li>有序清單1</li> <li>有序清單2</li> <li>有序清單3</li> </ol> ``` 網頁顯示結果: <ol> <li>有序清單1</li> <li>有序清單2</li> <li>有序清單3</li> </ol> #### 無序清單: ```html <ul> <li>無序清單1</li> <li>無序清單2</li> <li>無序清單3</li> </ul> ``` 網頁顯示結果: <ul> <li>無序清單1</li> <li>無序清單2</li> <li>無序清單3</li> </ul> #### 表格: ```html <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> ``` ![表格的編寫邏輯](https://hackmd.io/_uploads/ByrV00lE6.png) 網頁顯示結果: <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> <br> ### 文本標籤 | 標籤作用 | 標籤 | | ---------------------- | ---------- | | 文字加粗 | `<b>` | | 定義重點文字 | `<em>` | | 斜體 | `<i>` | | 定義加重語氣 | `<strong>` | | 定義小號文字 | `<small>` | | 定義下標字 | `<sub>` | | 定義上標字 | `<sup>` | | 定義插入字(有底線) | `<ins>` | | 定義刪除字(字有刪除線) | `<del>` | ### Lab 01 ```html <!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="30%"> <h2>輔大資工三年級</h2> <br> <h1>Interest</h1> <ul> <li>遊戲 (原神啟動!</li> <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> ``` ## CSS - 網頁的外觀 - 英文全名: **C**ascading **S**tyle**S**heets - 階層樣式表 - 用來在HTML為各個標籤套上不同樣式 ### 引入方式 - inline style 行內樣式 ``` <h1 style="color: blue;"></h1> ``` - internal style 內部嵌入 ``` <head> <style> /*CSS內容*/ </style> <head> ``` - external style 外部引入 ``` <link rel="stylesheet" type="text/css" href="檔案位置"> ``` 應用優先層級(高~低) 行內樣式 > 內部嵌入 > 外部引入 ### 選擇器(selector) - 選擇特定的HTML標籤，統一附加樣式 - 以大括號包裹屬性，每寫完一行屬性要以`;`做結尾 ex: 把HTML裡全部的p標籤字體顏色都改成紅色 ``` p { color: red; } ``` - id: 只能選一個標籤做修改 - class: 可選擇多個標籤 #### 寫法範例 - 在 HTML 中的寫法: ```html <input id=inputname type="text"> <h1 class=title>我是h1</h1> <h2 class=title>我是h2</h2> <h3 class=title>我是h3</h3> ``` - 在 CSS 中的寫法: ``` css #inputname{ background-color: red; } .title{ color: blue; } ``` ### 背景 & 文字設定 | 說明 | CSS 語法 | |------------------|-------------------------------------------------| | 背景顏色 | background-color : black; | | 背景圖片 | background-image : url("圖片網址"); | | 背景圖像是否固定 | background-attachment: scroll; /*滾動*/<br>background-attachment: fixed; /*固定*/ | | 字體樣式 | font-family : sans-serif; | | 字體顏色 | color : white; | | 字體大小 | font-size : 20px; | ### 行距與字體距離設定 | 說明 | CSS 語法 | |------------------|--------------------------------------------------------------------------| | 設置字符間距 | letter-spacing: 2px; | | 設置行高 | line-height: 32px; | | 設置字間距 | word-spacing: 4px; | | 對齊方式 | text-align : right; /* 或是left, center */ | | 字體陰影效果 | text-shadow: 1px 1px black; | | 對字體添加修飾 | text-decoration: none; /*無修飾*/<br>text-decoration: overline; /*上線*/<br>text-decoration: underline; /*底線*/<br>text-decoration: line-through; /*刪除線*/ | ### Lab 02 ```html <!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="30%" id=pic> <h2>輔大資工三年級</h2> <br> <h1>Interest</h1> <ul > <li>遊戲 (原神啟動!</li> <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> ``` ## JavaScript - 讓網頁能動起來的肌肉 - JavaScript 跟 Java 不一樣 - 用來讓網頁有可以跟使用者互動的功能 ### 引用方式 - 在 HTML 中使用 `<script>` 標籤引入外部的 .js 檔 ``` html <script src="./js/XXX.js"></script> ``` - 用 `<script>` 標籤包裹撰寫 ``` html <script> // 你的JScode </script> ``` ### 輸出 ```javascript alert("Hello JS!") console.log("hello js!") ``` ### 宣告變數 ```javascript var x=0,y=1; ``` ### 運算子 - 四則運算 `+`,`-`,`*`,`/` - 取餘數 ``%`` - 次方 `**` - 比較 `>`,`<`,`>=`,`<=`,`==`,`!=` - 嚴格比較(比較值 + 型態) `===`, `!===` - 邏輯 `&&`,`||` * onevent * `onclick`:當滑鼠點擊時 * `onerror`:當出現error時(載入失敗) * `onload`:當載入成功時 ### DOM - **D**ocument **O**bject **M**odel (文件物件模型) - JavaScript 可藉由 DOM 來控制 HTML - 可以隨時用 JavaScript 去改變 HTML 的標籤、屬性等，與使用者做互動 常用語法: ```javascript document.getElementById("id-name"); document.getElementByClassName("class-name"); ``` ```javascript var test = document.getElementById("id-name"); // 用 test 去接物件 test.innerText = "I've been changed"; // 最常使用，獲取或設置元素內的文字 test.innerHTML = "<b>haha</b>"; // 獲取或設置元素的內容可以包含 HTML 標籤 ``` ### onevent #### onclick事件: 被點擊時會觸發function的動作 ```javascript <p>點選按鈕觸發函數。</p> <button onclick="myFunction()">點我</button> <p id="demo"></p> ``` ```javascript <script> function myFunction(){ document.getElementById("demo").innerHTML="Hello World"; } </script> ``` #### onerror事件: 若程式執行時出現錯誤就執行function動作 ```javascript <img src="image.gif" onerror="myFunction()"> ``` ```javascript <script> function myFunction() { alert("無法加載圖片。"); } </script> ``` #### onload事件: - 在頁面或圖片加載完成後立即執行function動作 - 通常用於 `<body>` 標籤 ```javascript <body onload="myFunction()"> <h1>Hello World!</h1> </body> ``` ```javascript <script> function myFunction(){ alert("頁面加載完成"); } </script> ``` ### Lab 03 ```html <!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(0px); } to{ transform: translateY(-20px); } } </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="30%" id=pic> <h2>輔大資工三年級</h2> <br> <h1>Interest</h1> <ul> <li>遊戲 (原神啟動!</li> <li>音樂</li> <li>追劇</li> <li>追星</li> </ul> <br> <h1>Who are u?</h1> <input id=inputname type="text"> <button onclick="sent()">Hi</button> <!--<input type="submit" onclick="sent()" value="Hi">--> <br> <label id=who>(你誰)</label> <label>, hello!</label> </body> </html> ``` --- ###### tags: `2025 NISRA Enlightened` <style> .navbar-brand::after { content: " × NISRA"; } </style>