Deploying to gh-pages from @ ZiuChen/ZiuChen.github.io@fb10a9013b 🚀

2025-12-18 17:04:16 +08:00 · 2023-04-18 07:34:45 +00:00
parent ff73eed270
commit cfc55ab6cd
110 changed files with 754 additions and 200 deletions
--- a/note/CSS.html
+++ b/note/CSS.html
@@ -10,7 +10,7 @@
    <link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/assets/chunks/framework.a304f0f7.js">
  <link rel="modulepreload" href="/assets/chunks/theme.f2bdac91.js">
-  <link rel="modulepreload" href="/assets/note_CSS.md.8f85e473.lean.js">
+  <link rel="modulepreload" href="/assets/note_CSS.md.b812814c.lean.js">
  <link rel="icon" href="/logo.png">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
@@ -416,8 +416,8 @@
 <span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">source</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./assets/video.webm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
 <span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">video</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="audio标签" tabindex="-1">audio标签 <a class="header-anchor" href="#audio标签" aria-label="Permalink to &quot;audio标签&quot;"></a></h3><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">audio</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./assets/music.mp4</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">controls</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">audio</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="input元素" tabindex="-1">input元素 <a class="header-anchor" href="#input元素" aria-label="Permalink to &quot;input元素&quot;"></a></h3><h4 id="扩展属性" tabindex="-1">扩展属性 <a class="header-anchor" href="#扩展属性" aria-label="Permalink to &quot;扩展属性&quot;"></a></h4><ul><li><code>placeholder</code> 占位文本</li><li><code>multiple</code> 多选标签</li><li><code>autofocus</code> 自动聚焦输入框</li></ul><h4 id="扩展type属性的值" tabindex="-1">扩展type属性的值 <a class="header-anchor" href="#扩展type属性的值" aria-label="Permalink to &quot;扩展type属性的值&quot;"></a></h4><ul><li><code>date</code></li><li><code>time</code></li><li><code>number</code></li><li><code>tel</code></li><li><code>color</code></li><li><code>email</code></li><li>···</li></ul><h3 id="全局新增属性-data" tabindex="-1">全局新增属性 data-* <a class="header-anchor" href="#全局新增属性-data" aria-label="Permalink to &quot;全局新增属性 data-*&quot;"></a></h3><p>在HTML5中，新增了一种全局属性的格式<code>data-*</code> 用于自定义数据属性</p><ul><li>data设置的属性可以在JavaScript的DOM操作中通过<code>dataset</code>轻松获取到</li><li>通常用于HTML和JavaScript数据之间的传递</li><li>在小程序中，就是通过<code>data-*</code>来传递数据的</li></ul><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">age</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">18</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">data-name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ziu</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">data-age</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">18</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> el </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.item</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
 <span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dataset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">age) </span><span style="color:#676E95;font-style:italic;">// 18</span></span>
-<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dataset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name) </span><span style="color:#676E95;font-style:italic;">// &#39;ziu&#39;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-25140dfd data-v-b9eb50cb><!--[--><!--]--><div class="edit-info" data-v-b9eb50cb><!----><div class="last-updated" data-v-b9eb50cb><p class="VPLastUpdated" data-v-b9eb50cb data-v-f683efee>Updated Date: <time datetime="2023-04-17T13:08:39.000Z" data-v-f683efee></time></p></div></div><div class="prev-next" data-v-b9eb50cb><div class="pager" data-v-b9eb50cb><a class="pager-link prev" href="/note/JavaScript.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Previous page</span><span class="title" data-v-b9eb50cb>JavaScript基础</span></a></div><div class="has-prev pager" data-v-b9eb50cb><a class="pager-link next" href="/note/JavaScriptEnhanced.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Next page</span><span class="title" data-v-b9eb50cb>JavaScript进阶</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-6305e88a data-v-58542612><div class="container" data-v-58542612><p class="message" data-v-58542612>Released under the MIT License.</p><p class="copyright" data-v-58542612>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"note_ssr.md\":\"3673ad3f\",\"article_从0实现一个年度报告.md\":\"09293691\",\"project_clipboardmanager_guide_index.md\":\"dffef057\",\"project_clipboardmanager_index.md\":\"bf20f10b\",\"project_clipboardmanager_log_index.md\":\"e2d01b2f\",\"project_clipboardmanager_statement_index.md\":\"2dbc8124\",\"project_clipboardmanager_vip_index.md\":\"1effd507\",\"project_markdown_index.md\":\"03660535\",\"project_markdown_log_index.md\":\"6b4bf027\",\"project_markdown_shortcut_index.md\":\"e6a513a7\",\"project_smartwordbreak_index.md\":\"24f7c555\",\"project_smartwordbreak_log_index.md\":\"4fc03f08\",\"project_smartwordbreak_statement_index.md\":\"d4c512df\",\"self_index.md\":\"ad21477f\",\"works_contribution.md\":\"964e1c6a\",\"works_opensource.md\":\"b84317a6\",\"article_【字节跳动】前端面试题总结.md\":\"c6320546\",\"article_【快手】深入理解前端面试题.md\":\"4839d66f\",\"article_【用友金融】前端面试题总结.md\":\"9bd66327\",\"article_一文读懂事件冒泡与事件捕获.md\":\"b1315fcd\",\"article_一文读懂伪类与伪元素.md\":\"42217fce\",\"article_一文读懂函数中this指向问题.md\":\"adfc02bb\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"9476e735\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"34c30241\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"c7f94f9c\",\"article_深入javascript数据类型.md\":\"e7c3ddde\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"df9d58aa\",\"article_深入理解浏览器缓存机制.md\":\"43b18c14\",\"article_深入理解浏览器运行原理.md\":\"6a50392d\",\"index.md\":\"c0a055f1\",\"note_css.md\":\"8f85e473\",\"note_front-end engineering.md\":\"5b775f51\",\"note_javascript.md\":\"1bb5ba23\",\"article_深入理解proxy与reflect.md\":\"e3c214a8\",\"note_react.md\":\"07c484ec\",\"note_javascriptenhanced.md\":\"26cd6ded\"}")
+<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dataset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name) </span><span style="color:#676E95;font-style:italic;">// &#39;ziu&#39;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-25140dfd data-v-b9eb50cb><!--[--><!--]--><div class="edit-info" data-v-b9eb50cb><!----><div class="last-updated" data-v-b9eb50cb><p class="VPLastUpdated" data-v-b9eb50cb data-v-f683efee>Updated Date: <time datetime="2023-04-18T07:33:42.000Z" data-v-f683efee></time></p></div></div><div class="prev-next" data-v-b9eb50cb><div class="pager" data-v-b9eb50cb><a class="pager-link prev" href="/note/JavaScript.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Previous page</span><span class="title" data-v-b9eb50cb>JavaScript基础</span></a></div><div class="has-prev pager" data-v-b9eb50cb><a class="pager-link next" href="/note/JavaScriptEnhanced.html" data-v-b9eb50cb><span class="desc" data-v-b9eb50cb>Next page</span><span class="title" data-v-b9eb50cb>JavaScript进阶</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-6305e88a data-v-58542612><div class="container" data-v-58542612><p class="message" data-v-58542612>Released under the MIT License.</p><p class="copyright" data-v-58542612>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"note_react.md\":\"04226749\",\"project_markdown_log_index.md\":\"2284bc16\",\"project_clipboardmanager_guide_index.md\":\"f1aeebef\",\"project_clipboardmanager_index.md\":\"9e09ee74\",\"project_clipboardmanager_log_index.md\":\"a2142177\",\"project_clipboardmanager_statement_index.md\":\"355fa709\",\"project_clipboardmanager_vip_index.md\":\"c5ec67e1\",\"project_markdown_index.md\":\"d4eb6bfa\",\"works_opensource.md\":\"51d81110\",\"note_ssr.md\":\"5212044d\",\"project_markdown_shortcut_index.md\":\"17afcc6f\",\"project_smartwordbreak_index.md\":\"bd36df73\",\"project_smartwordbreak_log_index.md\":\"ac879d31\",\"self_index.md\":\"c3aaa77d\",\"works_contribution.md\":\"dbf65d23\",\"project_smartwordbreak_statement_index.md\":\"b45816c5\",\"article_一文读懂事件冒泡与事件捕获.md\":\"87f219e9\",\"article_一文读懂伪类与伪元素.md\":\"29eecad6\",\"article_一文读懂函数中this指向问题.md\":\"719f0989\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"7e2a01fc\",\"article_深入javascript数据类型.md\":\"3f7e0228\",\"article_【字节跳动】前端面试题总结.md\":\"4e4d25ce\",\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"91a8e4c5\",\"article_【快手】深入理解前端面试题.md\":\"459a6dbf\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"8614fbd1\",\"article_深入理解浏览器缓存机制.md\":\"91245634\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"230ed40e\",\"article_深入理解proxy与reflect.md\":\"ed83fd56\",\"note_javascript.md\":\"d96caca6\",\"index.md\":\"ee396f48\",\"article_从0实现一个年度报告.md\":\"191bdec9\",\"article_【用友金融】前端面试题总结.md\":\"cabfce3d\",\"note_front-end engineering.md\":\"5953f55f\",\"article_深入理解浏览器运行原理.md\":\"09de2f5c\",\"note_css.md\":\"b812814c\",\"note_javascriptenhanced.md\":\"a0b83b09\"}")
 __VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZiuChen\",\"description\":\"Unlimited Progress.\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"我的项目\",\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"学习笔记\",\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"}]},{\"text\":\"个人介绍\",\"link\":\"/self/\"}],\"sidebar\":[{\"text\":\"我的项目\",\"collapsible\":true,\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"collapsible\":true,\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"文章归档\",\"collapsible\":true,\"items\":[{\"text\":\"【2023】青训营 - 前端练习题汇总解析\",\"link\":\"/article/【2023】青训营 - 前端练习题汇总解析\"},{\"text\":\"【字节跳动】前端面试题总结\",\"link\":\"/article/【字节跳动】前端面试题总结\"},{\"text\":\"【快手】深入理解前端面试题\",\"link\":\"/article/【快手】深入理解前端面试题\"},{\"text\":\"【用友金融】前端面试题总结\",\"link\":\"/article/【用友金融】前端面试题总结\"},{\"text\":\"一文读懂事件冒泡与事件捕获\",\"link\":\"/article/一文读懂事件冒泡与事件捕获\"},{\"text\":\"一文读懂伪类与伪元素\",\"link\":\"/article/一文读懂伪类与伪元素\"},{\"text\":\"一文读懂函数中this指向问题\",\"link\":\"/article/一文读懂函数中this指向问题\"},{\"text\":\"从0实现一个年度报告\",\"link\":\"/article/从0实现一个年度报告\"},{\"text\":\"彻底搞懂对象的数据属性描述符、存储属性描述符\",\"link\":\"/article/彻底搞懂对象的数据属性描述符、存储属性描述符\"},{\"text\":\"浅析defineProperty与Proxy实现的双向绑定\",\"link\":\"/article/浅析defineProperty与Proxy实现的双向绑定\"},{\"text\":\"深入JavaScript数据类型\",\"link\":\"/article/深入JavaScript数据类型\"},{\"text\":\"深入Vue3源码，看看Vue.use后究竟发生了什么？\",\"link\":\"/article/深入Vue3源码，看看Vue.use后究竟发生了什么？\"},{\"text\":\"深入理解Proxy与Reflect\",\"link\":\"/article/深入理解Proxy与Reflect\"},{\"text\":\"深入理解浏览器缓存机制\",\"link\":\"/article/深入理解浏览器缓存机制\"},{\"text\":\"深入理解浏览器运行原理\",\"link\":\"/article/深入理解浏览器运行原理\"}]},{\"text\":\"学习笔记\",\"collapsible\":true,\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/ZiuChen\"},{\"icon\":{\"svg\":\"<svg width=\\\"36\\\" height=\\\"28\\\" viewBox=\\\"0 0 36 28\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z\\\" fill=\\\"#1E80FF\\\"/></svg>\"},\"link\":\"https://juejin.cn/user/1887205216238477\"}],\"editLink\":{\"pattern\":\"https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2019-present Ziu Chen\"},\"lastUpdatedText\":\"Updated Date\",\"algolia\":{\"apiKey\":\"b4fd296ea5e467b3ac4a582160ff3122\",\"indexName\":\"ziuchenio\",\"appId\":\"LFZ2CPWWUG\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>