一、基礎特性與規范

1. 技術定位：HTML 是前端技術棧的核心標記語言，用于構建網頁的結構。
2. 嵌套規則：標簽嵌套必須遵循層級關系，不能交叉（如正確：<div><p></p></div>；錯誤：<div><p></div></p>）。
3. 大小寫特性：HTML 標簽大小寫無關（如 <div> 與 <DIV> 效果一致），但推薦使用小寫以符合規范。
4. 路徑與協議規則：
   • 引用外部資源（如其他網站的圖片、腳本）時，必須加上協議（如 http:// 或 https://）。
   • 網站內部資源使用相對路徑時，無需加協議（如 ./images/logo.png 表示當前目錄下的資源）。
5. 特殊符號與換行：
   • 文字中若需顯示 % 符號，直接書寫即可；若需換行，需使用 <br> 標簽（如 第一行<br>第二行）。
6. 注釋語法：使用 <!-- 注釋內容 --> 進行注釋，注釋內容不會在頁面中顯示。

二、頁面元素與布局

1. 超鏈接：
   • 文字超鏈接：<a href="目標地址">鏈接文字</a>
   • 圖片超鏈接：<a href="目標地址"><img src="圖片路徑"></a>
2. 路徑表示：../ 表示回退到上一級目錄（如 ../css/style.css 表示上一級目錄中 css 文件夾下的 style.css）。
3. Div 布局：使用 <div align="center">內容</div> 可使 div 內的內容居中顯示（注：現代布局更推薦使用 CSS 替代 align 屬性）。
4. 表格元素：
   • <table>：定義表格
   • <tr>：定義表格行
   • <th>：定義表頭單元格（默認加粗居中）
   • <td>：定義表格數據單元格
   • 示例：

     <table><tr><th>表頭1</th><th>表頭2</th></tr><tr><td>數據1</td><td>數據2</td></tr>
     </table>
     

5. 邊框：通過 border 屬性為元素添加邊框（如 <table border="1"> 表示表格添加 1px 邊框）。

三、交互與表單

1. 表單基礎：<form action="處理數據的后端地址"> 用于定義表單，action 屬性指定表單數據提交的目標地址。
2. Input 輸入控件（通過 name 屬性定義變量名，用于后端接收數據）：
   • text：明碼文本輸入（如 <input type="text" name="username">）
   • password：掩碼密碼輸入（輸入內容顯示為圓點或星號，如 <input type="password" name="pwd">）
   • submit：提交按鈕（點擊提交表單，如 <input type="submit" value="登錄">）
   • radio：單選按鈕（name 相同的 radio 為一組，只能選一個，如：

     <input type="radio" name="gender" value="male">男
     <input type="radio" name="gender" value="female">女
     

   • checkbox：復選框（可多選，如 <input type="checkbox" name="hobby" value="reading">閱讀）
3. 下拉菜單：
   • <select name="變量名"> 定義下拉列表，name 為后端接收的變量名
   • <option value="提交值">顯示文本</option> 定義下拉選項，提交到后端的數據是 value 屬性的值（而非顯示文本）
   • 示例：

     <select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option>
     </select>
     

     若選擇“北京”，后端接收的 city 變量值為 beijing。

四、網絡通信基礎流程（以瀏覽器訪問網頁為例）

1. DNS 解析（域名 → IP）

   • 作用：將域名（如 www.example.com ）轉換為IP 地址，讓網絡找到目標主機。
   • 關鍵：域名是 IP 的“別名”，方便記憶；本機回環地址可用 localhost 或 127.0.0.1 指代。

2. TCP 連接建立

   • 依賴：IP（定位主機） + 端口（定位主機內的應用），端口占 2 字節（范圍 0 - 65535 ）。
   • 常見端口：
     • 熟知端口（可省略顯式指定）：如 HTTP 的 80 端口、HTTPS 的 443 端口。
     • 應用端口：自定義服務端口（如 8080、3000 等）。
   • 流程：通過三次握手建立 TCP 連接，為 HTTP 通信提供可靠傳輸通道。

3. HTTP 請求 - 響應

   • 協議定位：HTTP 是應用層協議，規范客戶端（瀏覽器）與服務器的通信規則，采用客戶端 - 服務器模型。
   • 無狀態性：每次請求獨立，服務器不主動保留客戶端狀態（需 Cookie、Session 等機制補充）。
   • 請求流程：
     • 請求報文：
       • 結構：請求行（方法 + URL + 版本，如 GET /index.html HTTP/1.1 ） + 消息頭（多行鍵值對，如 User-Agent 、Cookie ） + 空行 + 請求體（POST 等方法用，放表單數據等）。
       • 方法：GET（獲取資源，參數放 URL，體為空）、POST（提交數據，參數放體，更安全）。
     • 響應報文：
       • 結構：狀態行（版本 + 狀態碼 + 描述，如 HTTP/1.1 200 OK ） + 消息頭（如 Content-Type 、Content-Length ） + 空行 + 響應體（返回的 HTML、JSON 等內容）。
     • 連接優化：Keep-Alive 模式下，TCP 連接可復用，減少重復建立連接的開銷。

4. 頁面渲染與連接關閉

   • 瀏覽器行為：收到響應體（HTML 等）后，邊解析邊執行渲染，加載 CSS、JS、圖片等資源。
   • 連接關閉：通過四次揮手關閉 TCP 連接（或因 Keep-Alive 保持，等待超時后關閉 ）。

五、配套技術與工具

1. Web 服務器與配置

   • 核心：Web 服務器（如 Tomcat、Nginx ）通過配置文件（如 Tomcat 的 web.xml 、Nginx 的 .conf 文件 ）定義服務規則。
   • 作用：配置文件告訴 Web 服務器如何處理請求（如路由規則、資源映射、安全策略 ）。

2. 網絡安全與管理

   • 漏洞掃描：通過工具（如 Nmap、OpenVAS ）探測網絡服務、應用的漏洞，提前發現風險。
   • CISP（注冊信息安全專業人員）：聚焦信息安全領域的認證，涉及網絡安全架構、風險評估、合規等知識，用于指導企業/個人保障網絡通信與系統安全。

六、知識關聯圖（簡化版）