补充css

补充async await
2025-07-20 17:26:00 +08:00 · 2025-07-20 14:48:17 +08:00
7 changed files with 277 additions and 0 deletions
--- a/skills/html/README.md
+++ b/skills/html/README.md
@ -0,0 +1,3 @@
+# HTML
+
+vscode 插件: open in browser
--- a/skills/html/images/1.jpeg
+++ b/skills/html/images/1.jpeg
--- a/skills/html/images/2.jpeg
+++ b/skills/html/images/2.jpeg
--- a/skills/html/index.css
+++ b/skills/html/index.css
@ -0,0 +1,39 @@
+/* p {
+  color: blue;
+} */
+
+/* . class */
+.red {
+  color: red;
+}
+
+/* # 表示这是一个id选择器 */
+#input01 {
+    width: 400px;
+}
+
+/* ul>li:first-child {
+  font-weight: 600;
+} */
+
+
+ul li:hover {
+  color: red;  
+  font-size: 20px;
+  font-weight: 600;
+}
+
+img {
+  width: 220px;
+  height: 220px;
+  object-fit: cover;  /* 裁剪成正方形 */
+  border-radius: 4px; /* 可选：圆角 */
+  margin: 10px;
+}
+
+.img-warppter {
+    height: 300px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
--- a/skills/html/index.html
+++ b/skills/html/index.html
@ -0,0 +1,109 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="./index.css" />
+    <!-- <style>
+        p {
+            color: blue;
+        }
+    </style> -->
+  </head>
+  <body>
+    <h1 id="title01">HTML 语法介绍</h1>
+    <p class="red">段落</p>
+    <p>段落</p>
+    <span class="red">文字A</span>
+    <br />
+    <span class="red">文字B</span>
+    <br />
+    <form action="demo_form.php" method="get">
+      First name: <input id="input01" type="text" name="fname" /><br />
+      Last name: <input type="text" name="lname" /><br />
+      <input type="submit" value="提交" />
+    </form>
+
+    <iframe
+      src="https://www.baidu.com"
+      style="width: 800px; height: 400"
+    ></iframe>
+
+    <table 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>
+    </table>
+
+    <div style="width: 400px; height: 400; background-color: aqua">
+      <table 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>
+      </table>
+      <br />
+      <p>这是一个段落</p>
+    </div>
+    <hr />
+    <div style="width: 400px; height: 400; background-color: aqua">
+      <table 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>
+      </table>
+      <br />
+      <p>这是一个段落</p>
+    </div>
+
+    <span>span1</span>
+    <span>span2</span>
+
+    <br />
+    <ul id="list_menu" class="ul_class">
+      <li id="coffee">Coffee</li>
+      <li>Tea</li>
+      <li>Milk</li>
+      <div>
+        <li>绿茶</li>
+        <li>红茶</li>
+      </div>
+    </ul>
+
+    <div class="img-warppter">
+      <img src="./images/1.jpeg"  alt="" />
+      <img src="./images/2.jpeg" alt="" />
+      <img src="./images/1.jpeg" alt="" />
+    </div>
+
+    <script>
+      document.getElementById("title01").style.color = "red";
+    </script>
+  </body>
+</html>
--- a/skills/javascript/async.drawio
+++ b/skills/javascript/async.drawio
@ -0,0 +1,57 @@
+<mxfile host="65bd71144e">
+    <diagram id="0WS3t2Fnvb50-m555Ywn" name="第 1 页">
+        <mxGraphModel dx="1176" dy="389" 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="2" value="事件触发器" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="180" y="70" width="40" height="410" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="fna" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="240" y="90" width="120" height="50" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="fnb" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="360" y="120" width="120" height="50" as="geometry"/>
+                </mxCell>
+                <mxCell id="5" value="fnc" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="480" y="140" width="120" height="50" as="geometry"/>
+                </mxCell>
+                <mxCell id="6" value="fnd" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="600" y="160" width="120" height="50" as="geometry"/>
+                </mxCell>
+                <mxCell id="7" value="async fna" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="280" y="270" width="120" height="50" as="geometry"/>
+                </mxCell>
+                <mxCell id="8" value="async fnb" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="280" y="350" width="120" height="50" as="geometry"/>
+                </mxCell>
+                <mxCell id="9" value="async fnc" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="280" y="430" width="120" height="50" as="geometry"/>
+                </mxCell>
+                <mxCell id="10" value="async fnd" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="280" y="510" width="120" height="50" as="geometry"/>
+                </mxCell>
+                <mxCell id="13" style="edgeStyle=none;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="11" target="7">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="16" value="await" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="13">
+                    <mxGeometry x="0.3011" y="1" relative="1" as="geometry">
+                        <mxPoint as="offset"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="15" style="edgeStyle=none;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=1;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="11" target="8">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="11" value="excutor(&lt;div&gt;aysnc executor&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;event pool)&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="591" y="270" width="120" height="290" as="geometry"/>
+                </mxCell>
+                <mxCell id="12" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.017;entryY=0.31;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="7" target="11">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="14" style="edgeStyle=none;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=-0.025;entryY=0.652;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="8" target="11">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>
--- a/skills/javascript/promise.js
+++ b/skills/javascript/promise.js
@ -0,0 +1,69 @@
+function testApiCall(success, failed) {
+    var timeOut = Math.random() * 2;
+    console.log('set timeout to: ' + timeOut + ' seconds.');
+    setTimeout(function () {
+        if (timeOut < 1) {
+            console.log('call resolve()...');
+            success('200 OK');
+        }
+        else {
+            console.log('call reject()...');
+            failed('timeout in ' + timeOut + ' seconds.');
+        }
+    }, timeOut * 1000);
+}
+
+// 通过回调实现的异步方案
+// fna()
+// fnb()
+// fnc()
+console.log('start ...')
+testApiCall(
+    // success callback
+    (data) => {
+        console.log(data)
+    },
+    // failed callback
+    (error) => {
+        console.log(error)
+    }
+)
+console.log('end ...')
+
+// fna(fnb_sucess(fnc_success(fnd_success)), fnb_error(fnc_error(fnd_error)))
+
+// promise 封装技术, 他让异步成为一种标准, 使用promise的标准方式来处理异常
+// promise 像一个接口，他约束了 excutor对象的 实现方式
+var p1 = new Promise(testApiCall)
+// p1.then((data) => {
+//     console.log(data)
+//     //  p2.then().catch().finally()
+// }).catch((error) => {
+//     console.log(error)
+// }).finally(() => {
+//     console.log('finnal')
+// })
+
+
+// 异步等待
+// 以同步编程的方式，来实现异步代码
+var async_await = async () => {
+    try {
+        const resp = await p1
+        console.log(resp)
+
+        // const res2 = await p2
+        // console.log(resp2)
+
+        // const res3 = await p3
+        // console.log(resp2)
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+async_await()
+
+
+
+
Author	SHA1	Message	Date
yumaojun03	15f32e0e30	补充css	2025-07-20 17:26:00 +08:00
yumaojun03	066b9f7ad2	补充async await	2025-07-20 14:48:17 +08:00