update

public/tutorial/2/README.md

@@ -1,4 +1,4 @@
-# 盒模型（1）
+# 盒模型（1）DIV+CSS
 
 > [!NOTE]
 > 这是测试的版本
@@ -18,8 +18,10 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块
   <div>Web前端开发工程师</div>
   <div>岗位要求</div>
   <div>1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div>
-    <div>2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；</div>
+  <div>
-    <div>3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等； </div>
+    2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；
+  </div>
+  <div>3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；</div>
 </div>
 ```
 
@@ -33,9 +35,13 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块
 <div class="main">
   <div class="title">Web前端开发工程师</div>
   <div class="subtitle">岗位要求</div>
-    <div class="item">1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；</div>
+  <div class="item">
-    <div class="item">2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；</div>
+    1. 精通 Web 基础语言：HTML/CSS/JavaScript 及熟悉 W3C 网页标准；
-    <div class="item">3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等； </div>
+  </div>
+  <div class="item">
+    2. 熟悉 Web 数据传输：Ajax（XMLHttpRequest）、Fetch、XML、JSON、XHR 等；
+  </div>
+  <div class="item">3. 熟悉网络协议：TCP/IP、HTTP、HTTPS、WebSocket 等；</div>
 </div>
 ```
 
@@ -67,11 +73,15 @@ HTML 中有一个标签是用的最多的，叫做 `div`，可以表示各种块
 > 注意 class 类名要有意义，不要随便起名，不然数量多了之后容易混淆
 
 ## 任务
+
 ### HTML
+
 上网搜索 🔍 或询问 AI 🤖，找到【初级网络工程师】的岗位要求，通过 Div 嵌套，写上合适的 class 类名，完成 HTML 内容的排版。
 
 ### CSS
+
 自由调整合适的字体大小、行间距、字体颜色、字重、缩进等样式，美化排版内容。
 
 ### 例子
+
 [初级网络工程师岗位要求](/tutorial/2/demo.html)

public/tutorial/3/README.md

@@ -1,4 +1,4 @@
-# 盒模型（2）
+# 盒模型（2）margin+padding+border
 
 > [!NOTE]
 > 以下是 AI 生成的，不代表 xuyue 的观点
@@ -7,12 +7,12 @@
 
 在 HTML 和 CSS 中，每个元素都可以看作是一个矩形的盒子。这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒模型是掌握网页布局的关键。
 
-
 ![box](/tutorial/3/box.svg)
 
 ## 2. 盒模型的组成部分
 
 ### 2.1 内容（Content）
+
 内容区域是盒子的核心部分，显示元素的实际内容，如文本、图片等。内容的大小可以通过 `width` 和 `height` 属性来设置。
 
 ```html
@@ -28,6 +28,7 @@ div {
 ```
 
 ### 2.2 内边距（Padding）
+
 内边距是内容区域与边框之间的空间。它可以通过 `padding` 属性来设置。内边距会增加元素的总宽度和高度。
 
 ```css
@@ -56,6 +57,7 @@ div {
 ```
 
 ### 2.3 边框（Border）
+
 边框是围绕内容和内边距的线条。你可以通过 `border` 属性来设置边框的宽度、样式和颜色。
 
 ```css
@@ -83,6 +85,7 @@ div {
 ```
 
 ### 2.4 外边距（Margin）
+
 外边距是元素与其他元素之间的空间。它可以通过 `margin` 属性来设置。外边距不会影响元素的总宽度和高度，但会影响元素在页面中的位置。
 
 ```css
@@ -170,10 +173,12 @@ div {
 ### 任务要求
 
 #### 1. 基础盒子
+
 - 创建 6 个 `div` 元素，每个元素的 `width` 和 `height` 都为 `100px`。
 - 每个盒子的背景色可以不同，方便区分。
 
 #### 2. 使用 `padding`、`margin` 和 `border`
+
 - 每个盒子必须设置 `padding`、`margin` 和 `border`，且值不能为 `0`。
 - 通过调整这三个属性，让盒子按照以下规则排列：
   - 盒子之间不能有重叠。
@@ -182,15 +187,18 @@ div {
   - 边框必须清晰可见，且每个盒子的边框颜色可以不同。
 
 #### 3. 排列规则
+
 - 将 6 个盒子排列成一个 **2x3 的网格**。
 - 网格的行间距和列间距必须完全由 `margin` 控制。
 - 每个盒子的 `padding` 和 `border` 必须清晰可见。
 
 ### 4. 最终效果
+
 - 页面中应该有一个清晰的 2x3 网格，每个盒子之间有均匀的间距。
 - 每个盒子的内容区域、内边距和边框都应该清晰可见。
 
 ## 初始代码
+
 ```html
 <div class="container">
   <div class="box">1</div>
@@ -227,14 +235,17 @@ div {
 ### 任务提示
 
 1. **`padding`**
+
    - 控制内容与边框之间的距离。
    - 尝试为不同的盒子设置不同的 `padding` 值，观察内容区域的变化。
 
 2. **`border`**
+
    - 控制边框的宽度、样式和颜色。
    - 尝试为不同的盒子设置不同的边框样式（如 `dashed`、`dotted`）。
 
 3. **`margin`**
+
    - 控制盒子之间的间距。
    - 尝试为不同的盒子设置不同的 `margin` 值，观察盒子之间的间距变化。
 
@@ -245,6 +256,7 @@ div {
 ### 任务扩展（可选）
 
 1. **动态效果**
+
    - 使用 `:hover` 伪类，当鼠标悬停在盒子上时，改变盒子的 `padding`、`margin` 或 `border`。
    - 例如：
      ```css

public/tutorial/4/README.md

@@ -0,0 +1,19 @@
+## 盒模型（3）使用浏览器开发者工具调试HTML和CSS
+
+打开[测试网页](https://web.xuyue.cc/tutorial/2/demo.html)，点击 F12 或者 ctrl+shift+c 打开浏览器开发者工具，在这里可以看到前端的所有代码（HTML+CSS+JS）
+
+![1](./image.png)
+
+### 查看 HTML
+
+演示...
+
+### 查看 CSS
+
+演示...
+
+### 查看盒模型
+
+演示...
+
+（未完待续...）

public/tutorial/README.md

@@ -1,3 +1,4 @@
 1 标题和段落
 2 盒模型（1）
 3 盒模型（2）
+4 盒模型（3）