<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>码子的博客小站</title><description>这里是码子的小窝</description><link>https://mazlin.top/</link><language>zh_CN</language><item><title>欢迎来到码子的博客小站</title><link>https://mazlin.top/posts/%E6%AC%A2%E8%BF%8E%E9%A1%B5/</link><guid isPermaLink="true">https://mazlin.top/posts/%E6%AC%A2%E8%BF%8E%E9%A1%B5/</guid><description>这是一个简单的欢迎页</description><pubDate>Fri, 22 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;欢迎来到码子的小站&lt;/h1&gt;
&lt;p&gt;码子会不定时的在这里发布个人成长历程（可以当个小故事看看）、日常碎碎念、好用的网站资源等等。&lt;/p&gt;
&lt;p&gt;也许，未来会作为你了解我的渠道，或者只是来找找资源。不管怎样，码子的小站永远欢迎大家(♡&amp;gt;𖥦&amp;lt;)/♥&lt;/p&gt;
&lt;p&gt;与此同时，这个小站也将成为我未来站点的集合站（如果有的话）&lt;/p&gt;
&lt;p&gt;附：
这是我的api小站：&lt;a href=&quot;http://211.154.18.253:10271/&quot;&gt;码子的api小站&lt;/a&gt;&lt;/p&gt;
</content:encoded></item><item><title>CSS学习笔记</title><link>https://mazlin.top/posts/html%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/css%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</link><guid isPermaLink="true">https://mazlin.top/posts/html%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/css%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</guid><description>CSS学习笔记</description><pubDate>Wed, 27 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;序&lt;/h1&gt;
&lt;p&gt;也是来到了CSS章节&lt;/p&gt;
&lt;p&gt;本篇将语法和CSS选择器放到了一篇里&lt;/p&gt;
&lt;h1&gt;CSS语法&lt;/h1&gt;
&lt;p&gt;CSS分为三种：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;内联样式&lt;/li&gt;
&lt;li&gt;内部样式&lt;/li&gt;
&lt;li&gt;外联样式&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;其与c++等语言中变量的作用域很相似
一般内联样式是作为标签属性出现的，例如：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;p style=&quot;color: blue;&quot;&amp;gt;aaa&amp;lt;/p&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;一般标签都会有一个style属性。内联样式的优先级是最高的，它会覆盖其余两种CSS样式&lt;/p&gt;
&lt;p&gt;内部样式写在&lt;code&gt;head&lt;/code&gt;标签内，其使用&lt;code&gt;styel&lt;/code&gt;标签包裹&lt;/p&gt;
&lt;p&gt;而外部样式写在外部的&lt;code&gt;.CSS&lt;/code&gt;文件中，并在&lt;code&gt;head&lt;/code&gt;中使用&lt;code&gt;link&lt;/code&gt;进行应用&lt;/p&gt;
&lt;p&gt;示例：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
    &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
    &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;

    &amp;lt;!--👇这个就是外部的文件进行引用--&amp;gt;
    &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;./CSS/styel.css&quot;&amp;gt;

    &amp;lt;!--👇内部样式写在style标签中--&amp;gt;
    &amp;lt;style&amp;gt;
        p{
            color: rgb(224, 154, 33);
            font-size: 16px;
        }
    &amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    &amp;lt;p&amp;gt;这是一个应用的CSS的p标签。其使用内部样式&amp;lt;br&amp;gt;
    内部样式：写在head标签里的方式&amp;lt;/p&amp;gt;
    
    &amp;lt;h1 style=&quot;color: blue;&quot;&amp;gt;这是一个h1标签，使用内联样式&amp;lt;br&amp;gt;
    内联样式：以标签的属性呈现的&amp;lt;/h1&amp;gt;

    &amp;lt;h2&amp;gt;这是一个应用外部样式的h2标签&amp;lt;/h2&amp;gt;
    &amp;lt;p&amp;gt;使用外部样式需要使用link标签进行引用&amp;lt;/p&amp;gt;

    &amp;lt;p style=&quot;color: black;&quot;&amp;gt;内联样式&amp;gt;内部样式&amp;gt;外部样式&amp;lt;br&amp;gt;
    使用时大的会覆盖小的&amp;lt;br&amp;gt;
    类似于C++中变量的有效范围&amp;lt;/p&amp;gt;

&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;/*这是CSS文件的内容，在html中使用link进行引用*/
h2{
    color: blueviolet;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;实际效果是这样的：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./CSS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;h1&gt;CSS选择器&lt;/h1&gt;
&lt;p&gt;CSS选择器有很多:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;元素选择器&lt;/li&gt;
&lt;li&gt;类选择器&lt;/li&gt;
&lt;li&gt;ID选择器&lt;/li&gt;
&lt;li&gt;通用选择器&lt;/li&gt;
&lt;li&gt;子元素选择器&lt;/li&gt;
&lt;li&gt;后代选择器（包含选择器）&lt;/li&gt;
&lt;li&gt;并集选择器（兄弟选择器）&lt;/li&gt;
&lt;li&gt;伪类选择器&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;上文使用的一直是元素选择器&lt;/p&gt;
&lt;p&gt;示例代码：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
    &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
    &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;

    &amp;lt;style&amp;gt;
        h1{
            color: burlywood;
        }
        .aaa{
            color: aqua;
        }
        #bbb{
            color: blue;
        }

        *{
            font-family: &apos;KaiTi&apos;;
            font-weight: bolder;
        }
        /*子元素选择器*/
        .father &amp;gt; .son1{
            background-color: rgb(233, 112, 85);
        }
        /*后元素选择器*/
        .father p{
            color: rgb(51, 98, 3);
        }

        /*相邻元素选择器*/
        h3 + p{
            color: rgb(4, 4, 250);
        }

        #ccc:hover{
            background-color: rgb(99, 99, 241);
        }

    &amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    &amp;lt;h1&amp;gt;这是一个元素选择器&amp;lt;/h1&amp;gt;

    &amp;lt;h2 class=&quot;aaa&quot;&amp;gt;这是类选择器，使用.&amp;lt;/h2&amp;gt;
    &amp;lt;h2&amp;gt;这是类选择器的对比&amp;lt;/h2&amp;gt;
    &amp;lt;h2 id=&quot;bbb&quot;&amp;gt;这是id选择器,使用#&amp;lt;br&amp;gt;
    id选择器&amp;gt;类选择器&amp;lt;/h2&amp;gt;

        &amp;lt;p&amp;gt;*为通用选择器，一般为全选，&amp;lt;/p&amp;gt;

    &amp;lt;div class=&quot;father&quot;&amp;gt;

        &amp;lt;p class=&quot;son1&quot;&amp;gt;这是一个子元素选择器示例&amp;lt;/p&amp;gt;
        &amp;lt;p class=&quot;son2&quot;&amp;gt;这是另一个子元素选择器示例&amp;lt;/p&amp;gt;

        &amp;lt;div&amp;gt;
            &amp;lt;p class=&quot;son11&quot;&amp;gt;这是一个后代&amp;lt;/p&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;p&amp;gt;可以明显看到，后代选择器包含子代，而子代不包含后代&amp;lt;br&amp;gt;
        （注：子代选择器是有背景的，后代选择器是改颜色的）&amp;lt;/p&amp;gt;

    &amp;lt;/div&amp;gt;

    &amp;lt;h1&amp;gt;相邻元素选择器&amp;lt;/h1&amp;gt;
    &amp;lt;p&amp;gt;这是一个p标签&amp;lt;/p&amp;gt;
    &amp;lt;h3&amp;gt;这是h3标签&amp;lt;/h3&amp;gt;
    &amp;lt;p&amp;gt;这是另一个p标签&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;我们会发现，相邻元素选择器会选择其后面紧挨着的一个标签&amp;lt;/p&amp;gt;

    &amp;lt;p&amp;gt;伪类元素选择器&amp;lt;/p&amp;gt;
    &amp;lt;p id=&quot;ccc&quot;&amp;gt;可以实现鼠标悬效果&amp;lt;/p&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;图：
&lt;img src=&quot;./CSS%E9%80%89%E6%8B%A9%E5%99%A8.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;h2&gt;思考&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;.&lt;/code&gt;为类，那么类选择器使用.来使用&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;.aaa{
    color: aqua;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;code&gt;#&lt;/code&gt;为id，那么id选择器使用#来使用&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;#bbb{
    color: blue;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;code&gt;*&lt;/code&gt;为通用选择器&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;*{
    font-family: &apos;KaiTi&apos;;
    font-weight: bolder;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;code&gt;.father &amp;gt; .son&lt;/code&gt;是子代选择器的用法&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;.father &amp;gt; .son1{
    background-color: rgb(233, 112, 85);
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;后代选择器不用&lt;code&gt;&amp;gt;&lt;/code&gt;而是直接使用空格&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;.father p{
    color: rgb(51, 98, 3);
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;注意，后代选择器包括子代，但是子代选择器不会包括后代&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;相邻元素选择器使用&lt;code&gt;+&lt;/code&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;h3 + p{
    color: rgb(4, 4, 250);
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;伪类选择器使用&lt;code&gt;#&lt;/code&gt;表示，后面接&lt;code&gt;:&lt;/code&gt;来表示效果&lt;/p&gt;
&lt;p&gt;例如，以下为实现鼠标悬停后更换背景颜色（ccc是一个类名）&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;#ccc:hover{
    background-color: rgb(99, 99, 241);
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;差不多就这些&lt;/p&gt;
</content:encoded></item><item><title>HTML学习笔记</title><link>https://mazlin.top/posts/html%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/html%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B01/</link><guid isPermaLink="true">https://mazlin.top/posts/html%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/html%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B01/</guid><description>HTML学习笔记</description><pubDate>Sun, 24 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;前言&lt;/h1&gt;
&lt;p&gt;在&lt;a href=&quot;https://neocities.org/&quot;&gt;neocities&lt;/a&gt;注册了个免费二级域名&lt;code&gt;mazllin.neocities.org&lt;/code&gt;，为了对其进行简单布局，于是打算简单学学HTML，CSS，JS语言&lt;/p&gt;
&lt;p&gt;在b站找了个3小时前端入门，这是第一篇学习笔记。后面可能会分篇，或者进行二编。到时候再看吧awa&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
    &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
    &amp;lt;title&amp;gt;练习&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    &amp;lt;h1&amp;gt;标题标签：h标签&amp;lt;/h1&amp;gt;
    &amp;lt;h1&amp;gt;
        一级标签
    &amp;lt;/h1&amp;gt;
    &amp;lt;h2&amp;gt;二级标签&amp;lt;/h2&amp;gt;
    &amp;lt;h3&amp;gt;...&amp;lt;/h3&amp;gt;
    &amp;lt;h6&amp;gt;最多6级标签&amp;lt;/h6&amp;gt;
    &amp;lt;p&amp;gt;段落标签：p标签&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;字体加速：&amp;lt;b&amp;gt;b标签&amp;lt;/b&amp;gt;&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;字体加粗：&amp;lt;strong&amp;gt;strong标签&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;斜体标签：&amp;lt;i&amp;gt;i标签&amp;lt;/i&amp;gt;&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;下划线标签：&amp;lt;u&amp;gt;u标签&amp;lt;/u&amp;gt;&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;删除线标签：&amp;lt;s&amp;gt;s标签&amp;lt;/s&amp;gt;&amp;lt;/p&amp;gt;

    &amp;lt;ul&amp;gt;
        &amp;lt;li&amp;gt;无序列表标签&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;使用 &amp;lt;b&amp;gt;ul&amp;lt;/b&amp;gt; 和 &amp;lt;b&amp;gt;li&amp;lt;/b&amp;gt; 组合标签&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;vscode中shift + alt + ↓可以快捷复制，类似于vs中的ctrl + d&amp;lt;/li&amp;gt;

    &amp;lt;/ul&amp;gt;
    
    &amp;lt;ol&amp;gt;
        &amp;lt;li&amp;gt;有序列表&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;使用&amp;lt;b&amp;gt;ol&amp;lt;/b&amp;gt;与&amp;lt;b&amp;gt;li&amp;lt;/b&amp;gt;搭配使用&amp;lt;/li&amp;gt;
        &amp;lt;li&amp;gt;自动赋值序号&amp;lt;/li&amp;gt;
    &amp;lt;/ol&amp;gt;

    &amp;lt;h1&amp;gt;表格标签对&amp;lt;/h1&amp;gt;
    &amp;lt;table&amp;gt;
        &amp;lt;tr&amp;gt;
            &amp;lt;th&amp;gt;table header&amp;lt;/th&amp;gt;
            &amp;lt;th&amp;gt;在tr标签对里，使用th标签对&amp;lt;/th&amp;gt;
            &amp;lt;th&amp;gt;作为开头&amp;lt;/th&amp;gt;

        &amp;lt;/tr&amp;gt;
        &amp;lt;tr&amp;gt;
            &amp;lt;td&amp;gt;
                表格标签
            &amp;lt;/td&amp;gt;
            &amp;lt;td&amp;gt;在table标签对中&amp;lt;/td&amp;gt;
        &amp;lt;/tr&amp;gt;
        &amp;lt;tr&amp;gt;
            &amp;lt;td&amp;gt;tr为行数，需要多少行就在table里加多少tr&amp;lt;/td&amp;gt;
            &amp;lt;td&amp;gt;tr全称table row&amp;lt;/td&amp;gt;
        &amp;lt;/tr&amp;gt;
        &amp;lt;tr&amp;gt;
            &amp;lt;td&amp;gt;td为列数，在每对tr标签中添加td标签&amp;lt;/td&amp;gt;
            &amp;lt;td&amp;gt;td全称table data&amp;lt;/td&amp;gt;
        &amp;lt;/tr&amp;gt;

    &amp;lt;/table&amp;gt;

    &amp;lt;h1&amp;gt;表格标签对&amp;lt;/h1&amp;gt;
    &amp;lt;p&amp;gt;在table标签中添加broder可以添加边框&amp;lt;/p&amp;gt;
    &amp;lt;table border=&quot;1&quot;&amp;gt;
        &amp;lt;tr&amp;gt;
            &amp;lt;th&amp;gt;table header&amp;lt;/th&amp;gt;
            &amp;lt;th&amp;gt;在tr标签对里，使用th标签对&amp;lt;/th&amp;gt;
            &amp;lt;th&amp;gt;作为开头&amp;lt;/th&amp;gt;

        &amp;lt;/tr&amp;gt;
        &amp;lt;tr&amp;gt;
            &amp;lt;td&amp;gt;
                表格标签
            &amp;lt;/td&amp;gt;
            &amp;lt;td&amp;gt;在table标签对中&amp;lt;/td&amp;gt;
        &amp;lt;/tr&amp;gt;
        &amp;lt;tr&amp;gt;
            &amp;lt;td&amp;gt;tr为行数，需要多少行就在table里加多少tr&amp;lt;/td&amp;gt;
            &amp;lt;td&amp;gt;tr全称table row&amp;lt;/td&amp;gt;
        &amp;lt;/tr&amp;gt;
        &amp;lt;tr&amp;gt;
            &amp;lt;td&amp;gt;td为列数，在每对tr标签中添加td标签&amp;lt;/td&amp;gt;
            &amp;lt;td&amp;gt;td全称table data&amp;lt;/td&amp;gt;
        &amp;lt;/tr&amp;gt;

    &amp;lt;/table&amp;gt;

&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;具体效果是这样的&lt;/h2&gt;
&lt;p&gt;&lt;img src=&quot;./%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B01.jpg&quot; alt=&quot;学习笔记1&quot; /&gt;&lt;/p&gt;
&lt;h1&gt;思考&lt;/h1&gt;
&lt;p&gt;这部分的核心就是标签对的使用&lt;/p&gt;
&lt;h2&gt;首先是头部&lt;/h2&gt;
&lt;p&gt;使用&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;head&amp;gt;

&amp;lt;/head&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;标签对框起来&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
   &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
   &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
   &amp;lt;title&amp;gt;练习&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;这部分用来表示这个html文件的基本信息。输入&lt;code&gt;!+Enter&lt;/code&gt;可以快捷填入&lt;/p&gt;
&lt;h2&gt;其次是主体部分&lt;/h2&gt;
&lt;p&gt;使用&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;body&amp;gt;

&amp;lt;/body&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;格式标签&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!--这是注释内容--&amp;gt;

&amp;lt;h1&amp;gt;&amp;lt;/h1&amp;gt;               &amp;lt;!--标题标签对，h1-6，最多6个--&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;                 &amp;lt;!--段落标签对--&amp;gt;
&amp;lt;ul&amp;gt;                    &amp;lt;!--ul为无序列表的标签对--&amp;gt; 
    &amp;lt;li&amp;gt;&amp;lt;/li&amp;gt;           &amp;lt;!--li为列表的具体内容--&amp;gt;
&amp;lt;/ul&amp;gt;
&amp;lt;ol&amp;gt;
    &amp;lt;li&amp;gt;&amp;lt;/li&amp;gt;           &amp;lt;!--相对的，ol为有序列表标签对--&amp;gt;
&amp;lt;/ol&amp;gt;

&amp;lt;table&amp;gt;                 &amp;lt;!--table为表格标签对，其中的内容将会被制表--&amp;gt;
    &amp;lt;tr&amp;gt;                &amp;lt;!--tr为每一行，其中使用td来设置每一列的内容--&amp;gt;
        &amp;lt;td&amp;gt;&amp;lt;/td&amp;gt;       &amp;lt;!--td中为具体内容--&amp;gt;


    &amp;lt;/tr&amp;gt;
&amp;lt;/table&amp;gt;

&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;这里的table制表感觉很像一个二维数组：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;string[][] arr = {  {  &quot;td&quot; }
                    {  &quot;td&quot; }   
                    {  &quot;td&quot; }
                    {  &quot;td&quot; }
                 };//最外层的大括号为tr，内层的大括号为td

&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;用于调整字体的标签对&lt;/h3&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;b&amp;gt;&amp;lt;/b&amp;gt;             &amp;lt;!--b标签对，用于字体加粗--&amp;gt;
&amp;lt;strong&amp;gt;&amp;lt;/strong&amp;gt;   &amp;lt;!--strong标签对，也用于字体加粗--&amp;gt;
&amp;lt;i&amp;gt;&amp;lt;/i&amp;gt;             &amp;lt;!--i标签对，用于字体斜体--&amp;gt;
&amp;lt;u&amp;gt;&amp;lt;/u&amp;gt;             &amp;lt;!--u标签对，用于字体下划线--&amp;gt;
&amp;lt;s&amp;gt;&amp;lt;/s&amp;gt;             &amp;lt;!--s标签对，用于字体划掉--&amp;gt;

&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;好像这些效果用md文档也能实现&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;b字体加粗&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;i斜体&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;下划线没法实现&lt;/p&gt;
&lt;p&gt;&lt;s&gt;s划掉&lt;/s&gt;&lt;/p&gt;
&lt;p&gt;awa&lt;/p&gt;
&lt;h1&gt;&amp;gt;&amp;gt;&amp;gt;P2&lt;/h1&gt;
&lt;p&gt;本来是分篇的，后来感觉没必要，干脆把3篇HTML的学习笔记放到一起好了&lt;/p&gt;
&lt;h1&gt;序&lt;/h1&gt;
&lt;p&gt;本章很简短，就是介绍了HTML的部分标签属性&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
    &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
    &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    &amp;lt;h1&amp;gt;基本语法&amp;lt;/h1&amp;gt;
    &amp;lt;p&amp;gt;开始标签 属性名=&quot;属性值&quot;&amp;lt;/p&amp;gt;

    &amp;lt;h1&amp;gt;每个HTML可以有不同的属性&amp;lt;/h1&amp;gt;
    &amp;lt;p id=&quot;describe&quot; class=&quot;section&quot;&amp;gt;这是一个段落标签&amp;lt;/p&amp;gt;
    &amp;lt;h2&amp;gt;a标签&amp;lt;/h2&amp;gt;
    &amp;lt;a href=&quot;https://mazlin.top&quot; target=&quot;_blank&quot;&amp;gt;这是一个超链接标签&amp;lt;/a&amp;gt;
    &amp;lt;p&amp;gt;href中填url，也就是跳转的链接&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;target中填跳转的方式，self就是当前窗口，blank就是新建窗口&amp;lt;/p&amp;gt;
    &amp;lt;h1&amp;gt;img标签&amp;lt;/h1&amp;gt;
    &amp;lt;p&amp;gt;img标签自带一个src和alt标签&amp;lt;/p&amp;gt;
    &amp;lt;img src=&quot;https://ts2.tc.mm.bing.net/th/id/OIP-C.9Kzg8B0Z3M5oH9zlHMl9CAHaEK?cb=thfvnextfalcon&amp;amp;rs=1&amp;amp;pid=ImgDetMain&amp;amp;o=7&amp;amp;rm=3&quot; alt=&quot;&quot;&amp;gt;
    &amp;lt;p&amp;gt;src中填相对路径/绝对路径/url&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;alt标签用于图片加载失败时的文字显示&amp;lt;br&amp;gt;
    例如：&amp;lt;/p&amp;gt;
    &amp;lt;img src=&quot;aaa.jpg&quot; alt=&quot;图片加载失败&quot;&amp;gt;


    &amp;lt;h1&amp;gt;附：&amp;lt;/h1&amp;gt;
    &amp;lt;p&amp;gt;换行标签br,划线标签hr&amp;lt;/p&amp;gt;
    &amp;lt;p&amp;gt;br标签可以&amp;lt;br&amp;gt;
    换行&amp;lt;br&amp;gt;
    &amp;lt;hr&amp;gt;hr标签可以画分割线&amp;lt;/p&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;具体效果是这样的：&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B02.jpg&quot; alt=&quot;学习笔记2&quot; /&gt;&lt;/p&gt;
&lt;h1&gt;思考&lt;/h1&gt;
&lt;p&gt;本章没啥思考的，也就是简单学习了href，src，alt标签的使用，以及换行标签br,分割标签hr&lt;/p&gt;
&lt;h1&gt;其他&lt;/h1&gt;
&lt;p&gt;我是先改完页脚的备案号再开始学这部分的，结果我发现这章的内容有很多都能用上！&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;amp;copy; &amp;lt;span id=&quot;copyright-year&quot;&amp;gt;{currentYear}&amp;lt;/span&amp;gt; {profileConfig.name}. All Rights Reserved. /
        &amp;lt;a class=&quot;transition link text-[var(--primary)] font-medium&quot; target=&quot;_blank&quot; href={url(&apos;rss.xml&apos;)}&amp;gt;RSS&amp;lt;/a&amp;gt; /
        &amp;lt;a class=&quot;transition link text-[var(--primary)] font-medium&quot; target=&quot;_blank&quot; href={url(&apos;sitemap-index.xml&apos;)}&amp;gt;Sitemap&amp;lt;/a&amp;gt;&amp;lt;br&amp;gt;
        
        Powered by
        &amp;lt;a class=&quot;transition link text-[var(--primary)] font-medium&quot; target=&quot;_blank&quot; href=&quot;https://astro.build&quot;&amp;gt;Astro&amp;lt;/a&amp;gt; &amp;amp;
        &amp;lt;a class=&quot;transition link text-[var(--primary)] font-medium&quot; target=&quot;_blank&quot; href=&quot;https://github.com/saicaca/fuwari&quot;&amp;gt;Fuwari&amp;lt;/a&amp;gt;&amp;lt;br&amp;gt;
        
        &amp;lt;!--👇这部分就是新加的--&amp;gt;
        &amp;lt;a class=&quot;transition link text-[var(--primary)] font-medium&quot; target=&quot;_blank&quot; href=&quot;https://beian.miit.gov.cn/&quot;&amp;gt;苏ICP备2026032287号-1&amp;lt;/a&amp;gt; &amp;amp;
        &amp;lt;a class=&quot;transition link text-[var(--primary)] font-medium&quot; target=&quot;_blank&quot; href=&quot;https://icp.gov.moe/?keyword=20262136&quot;&amp;gt;萌ICP备20262136号&amp;lt;/a&amp;gt;  
        
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;你看这个a标签，br标签和标签属性，完全就是本章的内容。&lt;/p&gt;
&lt;p&gt;早知道先学完再改了www&lt;/p&gt;
&lt;h1&gt;&amp;gt;&amp;gt;&amp;gt;P3&lt;/h1&gt;
&lt;h1&gt;序&lt;/h1&gt;
&lt;p&gt;看着内容不多，区块和表单就一起结束掉吧，接下来就是CSS的内容了&lt;/p&gt;
&lt;p&gt;区块好像还是CSS的前置知识点&lt;/p&gt;
&lt;h1&gt;区块&lt;/h1&gt;
&lt;h2&gt;概念：&lt;/h2&gt;
&lt;p&gt;根据元素表现形式，可以分为块元素和行内元素。&lt;/p&gt;
&lt;h3&gt;块级元素&lt;/h3&gt;
&lt;p&gt;块级元素通常用于组织和布局页面，一般有以下标签：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;div&amp;gt;
&amp;lt;h1&amp;gt;
&amp;lt;ul&amp;gt;
&amp;lt;ol&amp;gt;
&amp;lt;li&amp;gt;
&amp;lt;table&amp;gt;
&amp;lt;form&amp;gt;    &amp;lt;!--表单标签--&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;块元素通常由新的一行开始，并占据整行元素。块元素可以包含其他的块级元素和行内元素&lt;/p&gt;
&lt;h3&gt;行内元素&lt;/h3&gt;
&lt;p&gt;行内标签只占据其内容所需的宽度，且不会占据一整行&lt;/p&gt;
&lt;p&gt;一般包含：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;span&amp;gt;
&amp;lt;a&amp;gt;
&amp;lt;strong&amp;gt;
&amp;lt;em&amp;gt;
&amp;lt;img&amp;gt;
&amp;lt;br&amp;gt;
&amp;lt;input&amp;gt;         &amp;lt;!--用于表单--&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;实操&lt;/h2&gt;
&lt;p&gt;代码部分：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
    &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
    &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    &amp;lt;div class=&quot;nav&quot;&amp;gt;
        &amp;lt;a href=&quot;#&quot;&amp;gt;链接1&amp;lt;/a&amp;gt;
        &amp;lt;a href=&quot;#&quot;&amp;gt;链接2&amp;lt;/a&amp;gt;
        &amp;lt;a href=&quot;#&quot;&amp;gt;链接3&amp;lt;/a&amp;gt;
        &amp;lt;a href=&quot;#&quot;&amp;gt;链接4&amp;lt;/a&amp;gt;
    &amp;lt;/div&amp;gt;

    &amp;lt;div class=&quot;content&quot;&amp;gt;
        &amp;lt;h1&amp;gt;文章标题&amp;lt;/h1&amp;gt;
        &amp;lt;p&amp;gt;文章段落&amp;lt;/p&amp;gt;
        &amp;lt;p&amp;gt;使用div.xxx可以快速写出带有xxxclass属性的div标签&amp;lt;br&amp;gt;
        使用div#xxx可以快速写出带有xxxid属性的div标签&amp;lt;/p&amp;gt;

    &amp;lt;/div&amp;gt;

    &amp;lt;span&amp;gt;span标签可以理解成没有功能的a标签或者img标签，方便后续的CSS或者JS的操作&amp;lt;/span&amp;gt;

&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;效果是这样的：
&lt;img src=&quot;./%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B03.jpg&quot; alt=&quot;学习笔记3&quot; /&gt;&lt;/p&gt;
&lt;h2&gt;思考&lt;/h2&gt;
&lt;p&gt;div标签没有实际作用，通常用于创建块级容器。有点像先划分领地（？&lt;/p&gt;
&lt;p&gt;span标签的作用听着像用来制作跳转功能的？不太清楚，后面也许就知道了&lt;/p&gt;
&lt;p&gt;“span标签用于内联样式化文本，给文本的一部分应用样式或者标记”原话是这么说的&lt;/p&gt;
&lt;h1&gt;表单&lt;/h1&gt;
&lt;p&gt;表单的内容还怪多的嘞，不过大多都是有关input属性&lt;/p&gt;
&lt;h2&gt;实操&lt;/h2&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
    &amp;lt;meta name=&quot;表单学习&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt;
    &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    
        &amp;lt;h1&amp;gt;form文本框&amp;lt;/h1&amp;gt;
    &amp;lt;form action=&quot;&quot;&amp;gt;

        &amp;lt;input type=&quot;text&quot;&amp;gt;

        &amp;lt;p&amp;gt;type属性有许多种&amp;lt;/p&amp;gt;

        &amp;lt;h2&amp;gt;placeholder标签&amp;lt;/h2&amp;gt;
        &amp;lt;input type=&quot;text&quot; placeholder=&quot;请输入文本&quot;&amp;gt;
        &amp;lt;p&amp;gt;该标签用于文本框中显示的内容&amp;lt;/p&amp;gt;

        &amp;lt;h2&amp;gt;value标签&amp;lt;/h2&amp;gt;
        &amp;lt;input type=&quot;text&quot; value=&quot;文本&quot;&amp;gt;
        &amp;lt;p&amp;gt;该标签用于预填入文本&amp;lt;/p&amp;gt;
        
        &amp;lt;h2&amp;gt;label标签&amp;lt;/h2&amp;gt;
        &amp;lt;p&amp;gt;一般用于文本框前的文字&amp;lt;/p&amp;gt;
        &amp;lt;label for=&quot;&quot;&amp;gt;文本框：&amp;lt;/label&amp;gt;
        &amp;lt;input type=&quot;text&quot;&amp;gt;

        &amp;lt;h1&amp;gt;tpye:raio标签&amp;lt;/h1&amp;gt;
        &amp;lt;p&amp;gt;radio标签是选择标签，例如：&amp;lt;/p&amp;gt;
        &amp;lt;input type=&quot;radio&quot;&amp;gt;男
        &amp;lt;input type=&quot;radio&quot;&amp;gt;女
        &amp;lt;input type=&quot;radio&quot;&amp;gt;其他
        &amp;lt;p&amp;gt;有时，我们只要单选，而不希望多选，便可以给三个input都加上同一个name&amp;lt;/p&amp;gt;
        &amp;lt;input type=&quot;radio&quot; name=&quot;a&quot;&amp;gt;男
        &amp;lt;input type=&quot;radio&quot; name=&quot;a&quot;&amp;gt;女
        &amp;lt;input type=&quot;radio&quot; name=&quot;a&quot;&amp;gt;其他

        &amp;lt;h1&amp;gt;label:for属性&amp;lt;/h1&amp;gt;
        &amp;lt;p&amp;gt;使用for属性，可以与input中的id进行绑定&amp;lt;br&amp;gt;
        这样鼠标点击label时，光标也会跳转到对应的input里&amp;lt;/p&amp;gt;

        &amp;lt;h1&amp;gt;input:password标签&amp;lt;/h1&amp;gt;
        &amp;lt;p&amp;gt;密码不能是明文，所以有个password标签&amp;lt;/p&amp;gt;
        &amp;lt;label for=&quot;pwd&quot;&amp;gt;密码：&amp;lt;/label&amp;gt;
        &amp;lt;input type=&quot;password&quot; id=&quot;pwd&quot; placeholder=&quot;输入密码&quot;&amp;gt;

        &amp;lt;h1&amp;gt;input：checkbox标签&amp;lt;/h1&amp;gt;
        &amp;lt;p&amp;gt;这个属性用于多选&amp;lt;/p&amp;gt;
        &amp;lt;label&amp;gt;爱好：&amp;lt;/label&amp;gt;
        &amp;lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot;&amp;gt;唱
        &amp;lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot;&amp;gt;跳
        &amp;lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot;&amp;gt;rap
        &amp;lt;input type=&quot;checkbox&quot; name=&quot;hobby&quot;&amp;gt;篮球

        &amp;lt;h1&amp;gt;input：submit属性&amp;lt;/h1&amp;gt;
        &amp;lt;p&amp;gt;该属性用于提交按钮，与form标签的action属性关联&amp;lt;br&amp;gt;
        还可以设置一个value改变名字&amp;lt;/p&amp;gt;
        &amp;lt;input type=&quot;submit&quot; value=&quot;交卷&quot;&amp;gt;


        &amp;lt;p&amp;gt;form：action属性用于填写一个url，该值为服务器所给的api&amp;lt;/p&amp;gt;
    &amp;lt;/form&amp;gt;

&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;

&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;实际效果是酱紫的：
&lt;img src=&quot;./%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B03.2.jpg&quot; alt=&quot;&quot; /&gt;
&lt;img src=&quot;./%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B03.3.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
&lt;p&gt;甚至要两张图片www&lt;/p&gt;
&lt;h2&gt;思考&lt;/h2&gt;
&lt;p&gt;表单主要是讲input的属性的&lt;/p&gt;
&lt;p&gt;主要有type属性，其有&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;placeholder值，用于显示文本；&lt;/li&gt;
&lt;li&gt;value值，用于预填入字符，或者说默认值&lt;/li&gt;
&lt;li&gt;radio值（图片里少打一个字母www）用于做选择；&lt;/li&gt;
&lt;li&gt;checkbox值，用于多选；&lt;/li&gt;
&lt;li&gt;submit值，用于提交按钮；&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;还有label标签，用于与input标签联动。其for值可以与input的id属性绑定。&lt;/p&gt;
&lt;p&gt;form本身有个action属性，可以与input：submit互动。其需要填入一个服务器提供的api&lt;/p&gt;
&lt;h1&gt;结语&lt;/h1&gt;
&lt;p&gt;是的，html的内容就这么结束了，接下来就该是CSS的内容了&lt;/p&gt;
&lt;p&gt;&lt;s&gt;可以把html写进简历了（&lt;/s&gt;&lt;/p&gt;
</content:encoded></item><item><title>2026上半年小结</title><link>https://mazlin.top/posts/%E7%A0%81%E5%AD%90%E7%9A%84%E5%8D%8A%E5%B9%B4%E5%B0%8F%E7%BB%93/%E7%A0%81%E5%AD%90%E7%9A%84%E5%8D%8A%E5%B9%B4%E5%B0%8F%E7%BB%93/</link><guid isPermaLink="true">https://mazlin.top/posts/%E7%A0%81%E5%AD%90%E7%9A%84%E5%8D%8A%E5%B9%B4%E5%B0%8F%E7%BB%93/%E7%A0%81%E5%AD%90%E7%9A%84%E5%8D%8A%E5%B9%B4%E5%B0%8F%E7%BB%93/</guid><description>半年左右的小故事</description><pubDate>Sat, 23 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;前言&lt;/h1&gt;
&lt;p&gt;这是我的第一篇博客，打算把我最近半年的故事分享一下，当个小故事看就好了awa&lt;/p&gt;
&lt;p&gt;那么，话不多说，让我们开始吧&lt;/p&gt;
&lt;p&gt;Ciallo~(∠・ω&amp;lt; )⌒★&lt;/p&gt;
&lt;h1&gt;从妹居物语开始的潘多拉魔盒之旅&lt;/h1&gt;
&lt;h2&gt;前置科技树&lt;/h2&gt;
&lt;p&gt;一切的一切，还得从一款名叫妹居物语的游戏开始说起...&lt;/p&gt;
&lt;p&gt;这是一款ai聊天类型的游戏，玩家将扮演哥哥，与妹妹一起同居，故事从这里开始。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./%E5%A6%B9%E5%B1%85%E7%89%A9%E8%AF%ADsteam%E7%95%8C%E9%9D%A2%E6%88%AA%E5%9B%BE.png&quot; alt=&quot;妹居物语steam页面截图&quot; /&gt;
*&lt;em&gt;妹居物语demo steam界面截图&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;由于成本原因，开发者无法为每一位用户提供ai聊天服务，于是他们选择限制账号注册（账号可以使用开发者提供的ai服务机进行游戏），同时开放了api key的接口，可以自己去买api来进行游玩。&lt;/p&gt;
&lt;p&gt;这里，就是我第一次接触api概念的地方。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./api%E9%85%8D%E7%BD%AE%E7%95%8C%E9%9D%A2.jpg&quot; alt=&quot;api配置界面&quot; /&gt;&lt;/p&gt;
&lt;p&gt;*&lt;em&gt;api key 配置页面&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;MuMuNovel项目&lt;/h3&gt;
&lt;p&gt;这是我接触的第二款ai项目。&lt;/p&gt;
&lt;p&gt;这个项目很简单，就是配置api，然后让ai写小说给你看。但是，它所教会我的，是docker部署。这是以后玩其他项目的根基，所以我觉得值得一提awa&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./MuMuAINovel.jpg&quot; alt=&quot;MuMuAINovel&quot; /&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;*github链接：&lt;a href=&quot;https://github.com/xiamuceer-j/MuMuAINovel&quot;&gt;MuMuAINovel&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;s&gt;期间感谢DS老师提供的大力支持（&lt;/s&gt;&lt;/p&gt;
&lt;h1&gt;Astrbot，启动！&lt;/h1&gt;
&lt;p&gt;在玩了两款ai项目之后，我开始对ai项目感兴趣，想玩玩agent。恰逢当时龙虾特别火，但是风评又忽上忽下的，安全性和便携性又不足，不像是一个成熟的项目，于是我开始寻找别的agent项目。机缘巧合之下，我遇到了astrbot。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./Astrbot%E6%96%87%E6%A1%A3%E9%A1%B5.jpg&quot; alt=&quot;Astrbot文档页&quot; /&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;*github链接：&lt;a href=&quot;https://github.com/AstrBotDevs/AstrBot&quot;&gt;Astrbot&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;项目内容如图，这里就不过多赘述了(*｀▽´*)&lt;/p&gt;
&lt;p&gt;一开始，我用的是桌面版。就是使用&lt;code&gt;.exe&lt;/code&gt;文件进行一键安装。一开始玩的很顺利，然而到后面，一些问题就渐渐浮现出来。&lt;/p&gt;
&lt;p&gt;首先是桌面版本身的bug。在你使用QQ向bot发送消息时，会进行两次输入，于是也会有两次输出。这一点很影响使用体验，询问之下，我发现似乎只有桌面版会有这个问题，而且似乎不止我一个人这样。&lt;/p&gt;
&lt;p&gt;其次，它是直接部署在我的电脑上的。这也意味着，它的开关机是跟随我的电脑的，这并不符合我所预想的那样随时使用，而不依赖于电脑。&lt;/p&gt;
&lt;p&gt;综合考虑下，我决定购买开发板进行部署。&lt;/p&gt;
&lt;h2&gt;“我的”&lt;/h2&gt;
&lt;p&gt;这时候，就有聪明的读者要问了，啊码子码子，你为什么不买服务器啊？&lt;/p&gt;
&lt;p&gt;欸，好问题。我也不知道（bushi&lt;/p&gt;
&lt;p&gt;在那时候（其实也就是几个月前），我对“我的：这一概念有一种执着。我希望我所花钱买的东西，就是我的，即使我空了一段时间没有用，它依旧是我的，我可以随时把它拾起来重新用，而不用担心这东西会不会不属于我了。而用开发板部署astrbot，就是我对这一执念的践行。&lt;/p&gt;
&lt;p&gt;事实证明，这是个不用后悔的决定。即使我买了只用了一个月左右，即使现在bot转到云服务器部署了，我也依旧可以随时拿它去做别的有意思的东西，而不用担心，这个东西几年后就不属于我了。&lt;/p&gt;
&lt;h2&gt;香橙派4Pro&lt;/h2&gt;
&lt;p&gt;这是我所购买的开发板款式。&lt;/p&gt;
&lt;p&gt;现在的开发板是真的贵啊！本来打算去看看社区更广阔的树莓派的，结果价格大几百甚至上千，直接给我劝退了。&lt;/p&gt;
&lt;p&gt;在群友的推荐下，我花325拿下了香橙派4pro&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./%E9%A6%99%E6%A9%99%E6%B4%BE%E8%B4%AD%E4%B9%B0%E5%9B%BE%E7%89%87.jpg&quot; alt=&quot;香橙派购买图片&quot; /&gt;&lt;/p&gt;
&lt;p&gt;*&lt;em&gt;香橙派购买图片&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;还是好贵www&lt;/p&gt;
&lt;p&gt;同时，还有散热片，散热风扇，外壳，TF卡，HTMI线，5V3A电源等要购买，总共花了我将近400块大洋QAQ&lt;/p&gt;
&lt;h2&gt;网络连接失败&lt;/h2&gt;
&lt;p&gt;板子到手就万事大吉了？好戏才刚开场呢&lt;/p&gt;
&lt;p&gt;首当其冲的就是系统问题。由于香橙派的社区没有树莓派那么活跃，导致我用的是树莓派系统软件烧录的系统，这也导致了我的板子完全开不了机（苦也，这也有NTR）。后来我才置知道，原来香橙派官网就有Ubuntu系统的包。在我更换系统包和烧录软件之后，我的板子才算真正活了过来。&lt;/p&gt;
&lt;p&gt;然后便是连接问题。起初，我觉得只要用HTMI线接到电脑上就好了，直到我进行实操，我才知道，&lt;strong&gt;笔记本电脑的HTMI接口只支持输出，不支持输入&lt;/strong&gt;！饿啊，这下只能看着板子在运行，但是一点操作都做不了www&lt;/p&gt;
&lt;p&gt;&lt;s&gt;无能的主人&lt;/s&gt;&lt;/p&gt;
&lt;p&gt;好在，我从朋友那里借到了一根网线，并通过网络共享获取到了ip，用ssh连接上了板子。那么，接下来就是连接校园网啦&lt;/p&gt;
&lt;p&gt;是的，我一开始没选择服务器的原因就是打算蹭校园网awa&lt;/p&gt;
&lt;p&gt;但是，事情并没有想象中的顺利。为了节省内存，我所烧录的系统是sever系统，也就是只有命令行的系统。这也就导致，我用了两个晚上也没能攻陷（划掉）连接上校园网。迫不得已之下，去小黄鱼买了个移动wifi。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;这期间还有个小故事，我在DS老师的指导下，刷了一整个下午的系统没刷上去。恰巧那天晚上，DS的服务器崩了，才换了千问继续操作。没成想，千问给我香橙派的官网Ubuntu下载链接，系统一下就刷上去了。至此，DS在我心中的神话破灭www&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h1&gt;服务器：-99￥，-99￥（红字飘过）&lt;/h1&gt;
&lt;h2&gt;风波再起&lt;/h2&gt;
&lt;p&gt;用上移动wifi自然是很轻易的配置好了网络，顺利拿到ip连接上板子。接下来，安装astrbot，napcat，ollama都很顺利。&lt;/p&gt;
&lt;p&gt;直到用了一周之后，很快啊，我的bot直接连不上了&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;./%E4%B8%A2%E5%A4%B1%E8%BF%9E%E6%8E%A5%E5%9B%BE.jpg&quot; alt=&quot;丢失连接图&quot; /&gt;&lt;/p&gt;
&lt;p&gt;*&lt;em&gt;心脏骤停&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;不止是bot，板子用ssh也连接不上。后来紧急联系千问大手子给我救回来，发现是ip变动了。而且从事后的角度看，这个ip变动还是平均一周一次的，也就是说我每周都要重新连接一下ip，这与我的最初期望是相悖的。&lt;/p&gt;
&lt;p&gt;与此同时，移动wifi的价格也让我有些肉疼。最开始的套餐，是9.9r30G，但是用了半个月不到就快没了，又冲了20块钱的流量。那么，下个月换成20r100G的套餐就好了。可是，这基本跟服务器的价格相差无几了。&lt;/p&gt;
&lt;p&gt;最终让我换成服务器的，是五一小长假。五一期间，要是把板子带回去，会很不方便。但是要是不带回去，万一出状况没法及时挽救。&lt;/p&gt;
&lt;p&gt;出现这种犹豫，又在板子的性价比已经快要比不过服务器的时候，我便决定，astrbot上云。&lt;/p&gt;
&lt;p&gt;最终，在精心挑选下，选择了腾讯云的新人优惠99/年2c4g的服务器，并在五一期间成功把astrbot搬到云上&lt;/p&gt;
&lt;h2&gt;NewAPI&lt;/h2&gt;
&lt;p&gt;在玩astrbot时，多多少少会接触到中转站和公益站，而它们大多数是用newapi搭建的。在渠道越来越多的情况下，我也萌生出了搭建自己的newapi站的想法。&lt;/p&gt;
&lt;p&gt;于是我找到了一个服务器小厂，以每个月3元的极低价租了一个2c2g的服务器，搭建起了自己的api小站。为此，我还专门买了域名（划重点，后面会考）。&lt;/p&gt;
&lt;p&gt;碎碎念：我也没做宣传，也宣传不出去，就在这里打个广告吧（&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://211.154.18.253:10271/&quot;&gt;码子的api小站&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;github网址:&lt;a href=&quot;https://github.com/QuantumNous/new-api&quot;&gt;NewAPI&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;域名&lt;/h2&gt;
&lt;p&gt;上面提到我买了一个域名 mazlin.top，这个域名本来是打算给api站用的，而我当时也没想过搭一个博客。都说到这了，“但是”这不就来了嘛，&lt;strong&gt;在国内，使用域名需要备案，而备案，需要在服务器提供商那里备案&lt;/strong&gt;。但是我的服务器是小厂的，没法备案，所以要么我去大厂再买个云，要么这个域名就用不了（哭&lt;/p&gt;
&lt;p&gt;最终，我还是买了阿里云的99/年的2c2g服务器，作为现在的blog站点，使用mazlin.top&lt;/p&gt;
&lt;p&gt;现在，我的手头上已经有三台服务器了（&lt;/p&gt;
&lt;p&gt;提到备案，我必须拿出这张图：
&lt;img src=&quot;./%E5%A4%87%E6%A1%88.png&quot; alt=&quot;备案&quot; /&gt;&lt;/p&gt;
&lt;p&gt;*&lt;strong&gt;这图我的能炫耀大半年 ദ്ദി (⩌ᴗ⩌ )&lt;/strong&gt;&lt;/p&gt;
&lt;h1&gt;其他&lt;/h1&gt;
&lt;h2&gt;comfyui&lt;/h2&gt;
&lt;p&gt;前段时间，我还玩了comfyui，就是本模型工作流生图。本站的站娘&lt;code&gt;翠笙&lt;/code&gt;就是这里出生的哦(♡&amp;gt;𖥦&amp;lt;)/♥&lt;/p&gt;
&lt;h2&gt;Blog网站&lt;/h2&gt;
&lt;p&gt;是的，这个都能单独放一个小章节，气死偶列！
我要全程加粗！&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;你知道吗这篇文章原本5000多字现在加上图片全都是二编而且是纯手打的从头再来的二编！我最开始用的是Halo，结果这东西跟数据库连不上导致我的网站也登不上导致我在Halo的文章全喵的没了导致我现在重新手打一遍！！！&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;这里面或许有我的原因，但是依旧很生气(▼皿▼#)&lt;/p&gt;
&lt;p&gt;后面短暂的换了wordpress，不过在巧合之下，我刷到了astro fuwari，也就是现在的网站模样,也算是因祸得福吧。&lt;/p&gt;
&lt;p&gt;github地址：&lt;a href=&quot;https://github.com/saicaca/fuwari&quot;&gt;fuwari&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;git&lt;/h2&gt;
&lt;p&gt;也是用上git了awa&lt;/p&gt;
&lt;p&gt;为了防止重蹈覆辙，也为了方便我编写文章，这个站的运作是这样的：&lt;/p&gt;
&lt;p&gt;先在我的本地电脑上编辑，再由git指令上传到gitee仓库（github不好连，只能退而求其次了），再在服务器配置&lt;code&gt;Webhooks&lt;/code&gt;拉取，便做到了网站内容的跟新&lt;/p&gt;
&lt;p&gt;也算是学到了git的使用吧&lt;/p&gt;
&lt;h1&gt;结尾&lt;/h1&gt;
&lt;p&gt;这半年左右的时间下来，玩到了好多有意思的东西，也学到了不少的知识&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;学到知识       心情+30&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;文章二编       心情-10&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote&gt;
&lt;p&gt;创建blog网站   心情+20&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;awa&lt;/p&gt;
&lt;p&gt;那么，就在这里结束吧。&lt;/p&gt;
&lt;p&gt;生活还在继续，故事还没结束，码子的小站会一直为各位开放(♡&amp;gt;𖥦&amp;lt;)/♥&lt;/p&gt;
</content:encoded></item><item><title>博客md文档模板</title><link>https://mazlin.top/posts/%E6%A8%A1%E6%9D%BF/</link><guid isPermaLink="true">https://mazlin.top/posts/%E6%A8%A1%E6%9D%BF/</guid><description>这是一个简单的模板，方便以后写博客直接套用</description><pubDate>Thu, 21 May 2026 00:00:00 GMT</pubDate><content:encoded>&lt;h1&gt;一级标题&lt;/h1&gt;
&lt;p&gt;段落之间用空行分隔。可以包含 &lt;em&gt;斜体&lt;/em&gt;、&lt;strong&gt;粗体&lt;/strong&gt; 和 &lt;code&gt;行内代码&lt;/code&gt;。&lt;/p&gt;
&lt;p&gt;无序列表示例：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;项目一&lt;/li&gt;
&lt;li&gt;项目二&lt;/li&gt;
&lt;li&gt;项目三&lt;/li&gt;
&lt;/ul&gt;
&lt;blockquote&gt;
&lt;p&gt;引用块可以跨段落，
像这样写。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;使用三个横线表示破折号（—），两个横线表示范围（如 12--14），三个点 … 会转换为省略号。支持 Unicode ☺。&lt;/p&gt;
&lt;h2&gt;二级标题&lt;/h2&gt;
&lt;p&gt;有序列表示例：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;第一项&lt;/li&gt;
&lt;li&gt;第二项&lt;/li&gt;
&lt;li&gt;第三项&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;代码块（缩进四个空格）：
# 示例代码
for i in range(5):
print(i)&lt;/p&gt;
&lt;p&gt;或者使用围栏式代码块：&lt;/p&gt;
&lt;p&gt;指定语言的语法高亮：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;import time
for i in range(10):
    time.sleep(0.5)
    print(i)&lt;/code&gt;&lt;/pre&gt;
</content:encoded></item></channel></rss>