From 2f80aa91cbae4bb94f847f9240491bce4a69475b Mon Sep 17 00:00:00 2001
From: yumaojun03 <719118794@qq.com>
Date: Sun, 22 Dec 2024 16:34:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85browser=20=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 skills/web/browser/README.md      |   5 ++
 skills/web/browser/stroage.drawio |  90 ++++++++++++++++++++++++++
 skills/web/css/README.md          |   3 +
 skills/web/html/README.md         |   3 +
 skills/web/html/index.html        | 101 ++++++++++++++++++++++++++++++
 5 files changed, 202 insertions(+)
 create mode 100644 skills/web/browser/README.md
 create mode 100644 skills/web/browser/stroage.drawio
 create mode 100644 skills/web/css/README.md
 create mode 100644 skills/web/html/README.md
 create mode 100644 skills/web/html/index.html

diff --git a/skills/web/browser/README.md b/skills/web/browser/README.md
new file mode 100644
index 0000000..8e8b1d7
--- /dev/null
+++ b/skills/web/browser/README.md
@@ -0,0 +1,5 @@
+# 浏览器
+
+https://gitee.com/infraboard/go-course/blob/master/day19/browser.md
+
+storage: https://gitee.com/infraboard/go-course/blob/master/day20/vue-store.md#%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8
\ No newline at end of file
diff --git a/skills/web/browser/stroage.drawio b/skills/web/browser/stroage.drawio
new file mode 100644
index 0000000..4511fc8
--- /dev/null
+++ b/skills/web/browser/stroage.drawio
@@ -0,0 +1,90 @@
+<mxfile host="65bd71144e">
+    <diagram id="0KVY4yAcVLzqzr5E1klz" name="第 1 页">
+        <mxGraphModel dx="893" dy="570" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="5" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="60" y="40" width="690" height="360" as="geometry"/>
+                </mxCell>
+                <mxCell id="7" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.333;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="2" target="6">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="38" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="2" target="17">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="2" value="&lt;br&gt;session 标签页面" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="120" y="150" width="160" height="110" as="geometry"/>
+                </mxCell>
+                <mxCell id="36" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="3" target="34">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="39" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="3" target="17">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="session 标签页面" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="304" y="150" width="160" height="110" as="geometry"/>
+                </mxCell>
+                <mxCell id="37" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="4" target="35">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="40" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="4" target="17">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="session 标签页面" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="480" y="150" width="160" height="110" as="geometry"/>
+                </mxCell>
+                <mxCell id="6" value="session&lt;br&gt;storage" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="1">
+                    <mxGeometry x="180" y="320" width="60" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="10" value="窗口" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="70" y="40" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="17" value="local&lt;br&gt;storage" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="1">
+                    <mxGeometry x="354" y="50" width="60" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="19" value="x" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="590" y="150" width="50" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="26" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="24" target="25">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="27" value="补充一次额外的数据" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="26">
+                    <mxGeometry x="0.1339" y="2" relative="1" as="geometry">
+                        <mxPoint x="-11" y="-13" as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="24" value="Window" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="130" y="910" width="160" height="110" as="geometry"/>
+                </mxCell>
+                <mxCell id="25" value="API Server" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="610" y="910" width="120" height="110" as="geometry"/>
+                </mxCell>
+                <mxCell id="29" style="edgeStyle=orthogonalEdgeStyle;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;exitPerimeter=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="28" target="24">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="28" value="cookie" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="1">
+                    <mxGeometry x="410" y="1050" width="60" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="30" value="只要是访问服务端就发" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+                    <mxGeometry x="390" y="970" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="31" value="http client" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="220" y="990" width="70" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="32" value="x" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="230" y="150" width="50" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="33" value="x" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="410" y="150" width="50" height="40" as="geometry"/>
+                </mxCell>
+                <mxCell id="34" value="session&lt;br&gt;storage" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="1">
+                    <mxGeometry x="354" y="310" width="60" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="35" value="session&lt;br&gt;storage" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.database;whiteSpace=wrap;" vertex="1" parent="1">
+                    <mxGeometry x="530" y="310" width="60" height="60" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>
\ No newline at end of file
diff --git a/skills/web/css/README.md b/skills/web/css/README.md
new file mode 100644
index 0000000..3347c44
--- /dev/null
+++ b/skills/web/css/README.md
@@ -0,0 +1,3 @@
+# CSS 入门
+
+https://gitee.com/infraboard/go-course/blob/master/day19/css.md
\ No newline at end of file
diff --git a/skills/web/html/README.md b/skills/web/html/README.md
new file mode 100644
index 0000000..76e1ca9
--- /dev/null
+++ b/skills/web/html/README.md
@@ -0,0 +1,3 @@
+# HTML
+
+https://gitee.com/infraboard/go-course/blob/master/day19/html.md
diff --git a/skills/web/html/index.html b/skills/web/html/index.html
new file mode 100644
index 0000000..12f772e
--- /dev/null
+++ b/skills/web/html/index.html
@@ -0,0 +1,101 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>H1</h1>
+    <h2>H2</h2>
+    <h3>H3</h3>
+    <p>这是一个<br> 段落</p>
+    <hr>
+    
+    <!-- POST /  body urlEncode data -->
+    <form action="https://www.baidu.com/test" method="post">
+        <!-- 文本输入框 -->
+        <label for="name">用户名:</label>
+        <input type="text" id="name" name="name" required>
+        <br>
+    
+        <!-- 密码输入框 -->
+        <label for="password">密码:</label>
+        <input type="password" id="password" name="password" required>
+    
+        <br>
+    
+        <!-- 单选按钮 -->
+        <label>性别:</label>
+        <input type="radio" id="male" name="gender" value="male" checked>
+        <label for="male">男</label>
+        <input type="radio" id="female" name="gender" value="female">
+        <label for="female">女</label>
+    
+        <br>
+    
+        <!-- 复选框 -->
+        <input type="checkbox" id="subscribe" name="subscribe" checked>
+        <label for="subscribe">订阅推送信息</label>
+        <input type="checkbox" id="subscribe" name="subscribe" checked>
+        <label for="subscribe">订阅推送信息2</label>
+        <input type="checkbox" id="subscribe" name="subscribe" checked>
+        <label for="subscribe">订阅推送信息3</label>
+    
+        <br>
+    
+        <!-- 下拉列表 -->
+        <label for="country">国家:</label>
+        <select id="country" name="country">
+            <option value="cn">CN</option>
+            <option value="usa">USA</option>
+            <option value="uk">UK</option>
+        </select>
+    
+        <br>
+    
+        <!-- 提交按钮 -->
+        <input type="submit" value="提交">
+    </form>
+
+    <iframe style="width: 100%;height: 200px;"  src="https://www.mcube.top/docs/framework/">
+        <p>您的浏览器不支持  iframe 标签。</p>
+      </iframe>
+
+      <hr>
+      <table style="margin-top: 12px;" border="1">
+        <tr>
+          <th>Month</th>
+          <th>Savings</th>
+        </tr>
+        <tr>
+          <td>January</td>
+          <td>$100</td>
+        </tr>
+        <tr>
+          <td>February</td>
+          <td>$80</td>
+        </tr>
+        <tr>
+            <td>February</td>
+            <td>$80</td>
+          </tr>
+      </table>
+    
+      <hr>
+      <div style="width: 200px;height: 200px;background-color: aqua;">
+      </div>
+      <hr>
+      <div style="width: 200px;height: 200px;background-color: aqua;">
+    </div>
+    <hr>
+    <div style="width: 200px;height: 200px;background-color: blueviolet;">
+    </div>
+    <hr>
+    <span style="background-color: aqua;"><span>test1</span><span>test2</span></span>
+    <span id="my_test_id" style="background-color: aqua;">test</span>
+    <span style="background-color: aqua;">test</span>
+</body>
+<script>
+    document.getElementById("my_test_id").style.backgroundColor = 'blueviolet'
+</script>
+</html>
\ No newline at end of file