:::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