Web技術與HTTP協議

域名

一、域名的概念

• • ‌核心作用‌：
• • 作為網站的“門牌號”，簡化使用者對網路資源的訪問。
• • 透過DNS（域名系統）將域名解析為對應的IP地址，實現網路通訊。

二、域名的結構

1. 1. ‌**頂級域（TLD, Top-Level Domain）**‌：
• • 最右側部分，如 .com、.org、.cn。
• • 分為兩類：
• • ‌**通用頂級域（gTLD）**‌：如 .com（商業）、.org（非營利）、.net（網路服務）。
• • ‌**國家和地區頂級域（ccTLD）**‌：如 .cn（中國）、.us（美國）、.jp（日本）。
2. 2. ‌**二級域（SLD, Second-Level Domain）**‌：
• • 緊鄰頂級域左側，如 example 在 example.com 中。
• • 使用者可自定義（需註冊）。
3. 3. ‌**子域（Subdomain）**‌：
• • 二級域下的分支，如 mail.example.com 中的 mail。
• • 常用於劃分網站功能（如 blog.example.com）。

三、域名的型別

1. 按層級分類

• • ‌**頂級域（TLD）**‌：
• • ‌傳統gTLD‌：.com、.org、.edu（教育機構）等。
• • ‌新gTLD‌：2012年後開放的如 .app、.shop、.ai（安圭拉島或人工智慧領域）。
• • ‌ccTLD‌：基於國家/地區的域，如 .de（德國）、.uk（英國）。
• • ‌二級域‌：如 .co.uk（英國商業）、.com.cn（中國商業）。

2. 按用途分類

• • ‌通用型‌：廣泛使用的 .com、.net。
• • ‌行業型‌：.edu（教育）、.gov（政府）、.hospital（醫療）。
• • ‌地理型‌：.nyc（紐約市）、.paris（巴黎）。
• • ‌品牌型‌：企業自定義的頂級域，如 .google、.apple。

3. 特殊型別

• • ‌**國際化域名（IDN）**‌：支援非拉丁字元（如中文、阿拉伯語），如 中國移動.中國。
• • ‌保留域名‌：如 localhost（本地測試）、example.com（示例域名）。

四、域名的註冊與管理

1. 1. ‌註冊流程‌：
• • 透過域名註冊商（如 GoDaddy、阿里雲）查詢併購買可用域名。
• • 需提供所有者資訊（需實名認證），按年付費續費。
2. 2. ‌管理機構‌：
• • ‌ICANN‌（網際網路名稱與數字地址分配機構）：監管全球域名系統。
• • ‌國家機構‌：如中國的CNNIC管理 .cn 域名。
3. 3. ‌隱私保護‌：
• • 註冊時可開啟“WHOIS隱私保護”，隱藏個人資訊。

網頁與HTML

一、網頁的概念

• • ‌核心特點‌：
• • 透過URL（統一資源定位符）唯一標識，例如 https://www.example.com/page.html。
• • 支援跨平臺訪問（PC、手機、平板等）。
• • 可以是靜態（內容固定）或動態（內容由伺服器即時生成）。

二、HTML 的基礎知識

1. ‌HTML 的核心作用‌

• • 描述網頁內容的‌結構‌（標題、段落、列表等）。
• • 嵌入多媒體（圖片、音訊、影片）和超連結。
• • 與CSS（樣式）和JavaScript（互動）配合，構建完整的前端頁面。

2. ‌HTML 文件的基本結構‌

3. ‌HTML 標籤分類‌

• • ‌語義化標籤‌（HTML5新增）：
• • <header>：頁首；
• • <nav>：導航欄；
• • <section>：頁面區塊；
• • <article>：獨立內容（如部落格文章）；
• • <footer>：頁尾。
• • ‌內容標籤‌：
• • <h1>~`

  `：標題；

• • <p>：段落；
• • <ul>/<ol>：無序/有序列表；
• • <a href="...">：超連結；
• • <img>：圖片；
• • <table>：表格。
• • ‌功能標籤‌：
• • <form>：表單；
• • <input>：輸入框；
• • <video>/<audio>：影片/音訊；
• • <div>/<span>：通用容器（需結合CSS使用）。

4. ‌HTML 語法規則‌

• • 標籤由尖括號包圍，如 <tag>。
• • 大多數標籤成對出現（開始標籤+結束標籤），如 <p>內容</p>。
• • 某些標籤為自閉合（無結束標籤），如 <img src="...">。
• • 標籤可包含屬性，如 <a href="https://example.com" target="_blank">連結</a>。

三、靜態網頁 vs. 動態網頁

四、HTML5 的新特性

1. 1. ‌語義化標籤‌：
• • 新增 <article>, <section>, <nav> 等標籤，提升程式碼可讀性和SEO最佳化。
2. 2. ‌多媒體支援‌：
• • 原生支援 <video> 和 <audio> 標籤，無需Flash外掛。
3. 3. ‌圖形與動畫‌：
• • <canvas> 標籤實現繪圖和遊戲開發。
4. 4. ‌表單增強‌：
• • 新增輸入型別（如 email, date, range）和屬性（如 placeholder, required）。
5. 5. ‌本地儲存‌：
• • localStorage 和 sessionStorage 替代Cookie，提升資料儲存能力。

HTTP協議

一、HTTP 協議的定義與核心特性

1. ‌核心特性‌

• • ‌無狀態‌：每次請求獨立，伺服器不保留客戶端的歷史互動資訊（依賴 Cookie/Session 維持狀態）14。
• • ‌無連線‌：早期 HTTP/1.0 每次請求需重新建立 TCP 連線，HTTP/1.1 後支援持久連線（Persistent Connection）34。
• • ‌明文傳輸‌：預設不加密資料（HTTPS 透過 TLS/SSL 加密解決）56。
• • ‌靈活性‌：支援傳輸任意型別資料（透過 Content-Type 標記），如文字、圖片、影片等26。

二、HTTP 協議的工作流程

1. 1. ‌客戶端發起請求‌：瀏覽器透過 URL 生成 HTTP 請求報文67。
2. 2. ‌建立 TCP 連線‌：透過 ‌三次握手‌ 建立客戶端與伺服器的 TCP 連線（HTTP/1.1 預設複用連線）47。
3. 3. ‌伺服器處理請求‌：解析請求內容，執行資料庫查詢或檔案操作67。
4. 4. ‌返回響應‌：伺服器生成包含狀態碼和資源的 HTTP 響應報文46。
5. 5. ‌關閉連線‌：透過 ‌四次揮手‌ 釋放 TCP 連線（非持久連線場景）47。

三、HTTP 請求與響應結構

1. ‌HTTP 請求報文‌

• • ‌常用方法‌：
• • GET：獲取資源（冪等）28。
• • POST：提交資料（非冪等，如使用者註冊）8。
• • PUT/DELETE：更新/刪除資源（RESTful API 常用）8。

2. ‌HTTP 響應報文‌

• • ‌狀態碼分類‌：
• • 1xx：資訊類（如 101 Switching Protocols）6。
• • 2xx：成功（如 200 OK、201 Created）46。
• • 3xx：重定向（如 301 Moved Permanently）6。
• • 4xx：客戶端錯誤（如 404 Not Found）46。
• • 5xx：伺服器錯誤（如 500 Internal Server Error）46。

四、HTTP 協議的版本演變

五、HTTP 的安全性擴充套件：HTTPS

1. 1. ‌加密機制‌：透過 TLS/SSL 協議對 HTTP 內容加密，防止竊聽和篡改56。
2. 2. ‌身份驗證‌：伺服器需提供數字證書（由 CA 頒發），驗證其真實性5。
3. 3. ‌預設埠‌：使用 443 埠（HTTP 預設 80）5。