码子的博客小站

欢迎来到码子的博客小站

Fri, 22 May 2026 00:00:00 GMT

欢迎来到码子的小站

码子会不定时的在这里发布个人成长历程（可以当个小故事看看）、日常碎碎念、好用的网站资源等等。

也许，未来会作为你了解我的渠道，或者只是来找找资源。不管怎样，码子的小站永远欢迎大家(♡>𖥦<)/♥

与此同时，这个小站也将成为我未来站点的集合站（如果有的话）

附：这是我的api小站：码子的api小站

如何使用Linux系统开MC服务器

Wed, 17 Jun 2026 00:00:00 GMT

序

我之前玩的好多内容都是通过手动agent部署的（就是把报错丢给ai，然后执行ai给的代码），虽说能玩，但是没学到东西，每次都要重新问ai。

于是我决定，每次玩后都总结一个可以复用的方法论

~~绝对不是没啥文章可写~~

注：本方法适用于windows系统

首先，拥有一台云服务器

这边推荐***服务器（~~广告位招租~~）

系统方面，本次使用Ubuntu22.04-x64系统，推荐跟我一致，以保持本教程连贯性

*当然，如果是大手子的话可以自行选择

购买完成后，会得到服务器ip和登录信息（用户名和密码）

让我们假设现在拥有一台服务器

IP为 192.168.1.200 (具体以你的为准)

用户名为 root （一般默认是这个）

密码为 qazxswedc （一般为随机生成，直接复制就好了）

接下来就可以开始开服了(^V^)

使用ssh登录服务器

有两种方法，一种是cmd，一种是ssh工具。我更推荐第二种。

1.CMD登录：

打开CMD窗口（win11可以按win键搜索CMD），以管理员权限运行。

输入

ssh root@<ip>

也就是
ssh root@192.168.1.200

输入完成之后，它会询问你是否信任此连接，我们输入yes

随后会让你输入password，也就是密码

root@192.168.1.200's password:

*注意，黑窗口输入密码时不会显示输入内容，不要因为看不见输入而乱输

cmd操作小提示：

黑窗口中，ctrl+v的快捷粘贴无法使用

可以先将密码复制好，在输入密码界面点击右键即可完成粘贴

如果密码正确，那么就成功连上服务器啦

2.使用ssh工具

我提供一个ssh工具连接，也可以用自己的

FinalShell

下载安装完成并打开后，按照图示打开新建连接会打开一个窗口：

按照提示填写

名称（备注）
主机（ipv4地址）
端口保持默认22端口就好
用户名&密码同上cmd连接

使用ssh工具的优势便是不用每次登录都输入一次密码，极大方便XD

连接成功：

前置操作

在ssh连接成功后，我们会得到一个:~# 样子的一句，这便是命令输入栏（我就这么叫），后面命令执行完成的标志就是~#重新出现。

更新镜像源

由于很多东西都是海外资源，国内由于被墙，下载极其缓慢，所以我们需要更换一下镜像源：

输入

sudo tee /etc/apt/sources.list <<EOF
deb http://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ jammy-backports main restricted universe multiverse
EOF

打开镜像列表并填入镜像源信息

这里使用的是阿里的镜像源，也可以换成清华等其他镜像源

更新软件包

接下来更新软件包，输入

sudo apt update

如果更新速度依旧很慢，请回到上一步，替换为其他软件源

按ctrl + c 可以停止当前命令

安装前置

1.安装Java21

输入

sudo apt install openjdk-21-jdk

使用

java -version

验证是否安装成功，返回版本号即为成功

进行安装，如果需要安装java8，java17，请将21改为对应版本

*如果安装速度很慢，请回到上面步骤更新镜像源

2.安装screen

我们在关闭黑窗口时，服务器程序会被一并关掉，所以需要screen做到保持后台运行

输入

sudo apt install screen

进行安装

使用

screen -version

验证是否安装成功，返回版本号即为成功

3.安装解压工具

输入

sudo apt install zip unzip

进行安装

下载开服核心并传输到服务器中

本次教学开原版服务器，模组及整合包放到p2.

让我们来到这个网站下载开服核心Vanilla，当然你也可以自己找渠道下载。

dl.mslmc.cn

按照如图所示，本次以1.20.1版本演示，其他版本可以自行下载

下载完成之后，会得到一个.jar文件

接下来需要将文件传输到服务器中。

传输文件

依旧使用2种方案，一个是cmd，一个是使用SFTP（推荐）

scp

首先是使用cmd的scp命令

*注：由于我的这台服务器没有独立ip或者别的原因，导致并没有成功实现文件上传，所以只建议能使用scp的云服务器使用

使用以下scp指令进行传输

scp "<文件路径>" root@<ip>:/home

其中，文件路径为本地文件路径，选择并右击文件可以获取。

*此处遇到的任何问题请优先联系专业人士或者ai进行处理，或者使用SFTP方案

SFTP传输方案

使用SFTP工具进行传输

此处依旧是推荐一个工具，或者可以使用自己的工具

推荐工具：FileZilla

在filezilla中，点击文件->站点管理器->新建站点，协议下拉选择SFTP，其余部分与ssh连接一致。

如果是没有独立ip的NAT转发服务器，注意在ip后面加上端口，端口号可以在上文提到的ssh工具窗口最左上角查看

连接上后，找到home文件夹并双击进入，新建一个server文件夹，将开服核心.jar文件拖入

或者还有方案2：使用ssh操作新建文件夹：

在ssh中，输入

cd ../home

即可进入home文件夹内，此时命令输入栏的前缀变为:/home#。

输入

mkdir server

新建一个文件夹，同时输入cd ./server即可进入server文件夹

此时再通过SFTP传输.jar文件

启动服务器核心

start.sh

在server文件夹下，输入

nano start.sh

即可新建并编辑start.sh文件。此文件为启动脚本，用于启动服务器

输入nano start.sh后，会进入编辑界面，在其中输入

#!/usr/bin/env bash
java -Xmx15G -jar server.jar nogui

其中:

-Xmx15G为最大内存，此处的15G改为你希望占用的最大内存。
server.jar为所下载的服务器核心名，此处改为以.jar文件的文件名为准

输入完成之后，按ctrl+o保存，按enter确定，再按ctrl+x推出文件，此时，文件便编辑完成

此时再输入

./start.sh

便可执行start.sh文件

但是，此处会出现报错，不要慌，因为要给文件755权限,

输入

chmod 755 start.sh

给予文件755权限，输入ls可以发现start.sh文件变为绿色,此时再执行./start.sh即可进行首次启动服务器

同意服务器核心启动协议

在执行完./start.sh之后，会告诉我们You need to agree to the EULA in order to run the server. Go to eula.txt for more info.

我们需要输入nano eula.txt，将其中的eula=false改为eula=true

此时再次执行./start.sh即可进行开服并初始化文件

修改服务器配置

在./start.sh命令全部跑完，也就是服务器稳定运行之后，输入stop并回车，即可停止服务器，此时服务器文件夹下会多出一个server.properties文件，即为服务器配置文件。

我们输入nano server.properties打开并编辑文件

其中内容具体都在mc百科里能查到，此处说明几个重要的内容：

online-mode 为正版验证，true为开启，false为关闭

server-port为服务器端口号，默认为25565

allow-flight允许飞行，在服务器网络延迟较高时建议开启

编辑完成之后，按ctrl+o保存，按enter确定，再按ctrl+x推出文件，此时，文件便编辑完成

设置服务器防火墙

一般这个时候服务器本体就开完了，但是依旧不能加入，因为此时需要在服务器中开放端口

具体开放的值以server-port中的内容为准。

在服务器后台有开放网络端口选项，不同服务商可能位置不同，但内容大同小异。

我们需要开放25565（具体以server-port为准）端口，使用tcp协议。

完成后，即可使用ip+端口的形式连接服务器，例如 192.168.1.200:25565

如果你想要游戏权限的话，输入在ssh中输入op <玩家id>即可给予op权限

报保持服务器开启

如果此时关闭ssh，你会发现服务器也被一并关闭，此时就可以使用之前下好的screen程序。

输入cd ./~即可回到根目录，或者关闭ssh并重新打开，输入

screen -S <name>

其中，<name> 替换为想要的名字，比如我这里为server

screen -S server

即可打开一个新窗口

再输入cd ../home/server进入server文件夹，输入./start.sh启动服务器

此时再关闭ssh便会发现，服务器依旧在稳定运行，此时目的便达到了

再次打开ssh并连接服务器，输入screen -r即可回到服务器命令窗口，可以执行stop命令或者op等其他命令。

命令窗口中可以执行mc所有的命令，且不需要加/

未完待续

到此为止，一个可以正常游玩的原版MC服务器便成功开启。

接下来会抽空更新模组以及整合包服务器开服教程

CSS学习笔记

Wed, 27 May 2026 00:00:00 GMT

序

也是来到了CSS章节

本篇将语法和CSS选择器放到了一篇里

CSS语法

CSS分为三种：

内联样式
内部样式
外联样式

其与c++等语言中变量的作用域很相似一般内联样式是作为标签属性出现的，例如：

<p style="color: blue;">aaa</p>

一般标签都会有一个style属性。内联样式的优先级是最高的，它会覆盖其余两种CSS样式

内部样式写在head标签内，其使用styel标签包裹

而外部样式写在外部的.CSS文件中，并在head中使用link进行应用

示例：

<!DOCTYPE html>
<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" href="./CSS/styel.css">

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

    <h2>这是一个应用外部样式的h2标签</h2>
    <p>使用外部样式需要使用link标签进行引用</p>

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

</body>
</html>

/*这是CSS文件的内容，在html中使用link进行引用*/
h2{
    color: blueviolet;
}

实际效果是这样的：

CSS选择器

CSS选择器有很多:

元素选择器
类选择器
ID选择器
通用选择器
子元素选择器
后代选择器（包含选择器）
并集选择器（兄弟选择器）
伪类选择器

上文使用的一直是元素选择器

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        h1{
            color: burlywood;
        }
        .aaa{
            color: aqua;
        }
        #bbb{
            color: blue;
        }

        *{
            font-family: 'KaiTi';
            font-weight: bolder;
        }
        /*子元素选择器*/
        .father > .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);
        }

    </style>
</head>
<body>
    <h1>这是一个元素选择器</h1>

    <h2 class="aaa">这是类选择器，使用.</h2>
    <h2>这是类选择器的对比</h2>
    <h2 id="bbb">这是id选择器,使用#<br>
    id选择器>类选择器</h2>

        <p>*为通用选择器，一般为全选，</p>

    <div class="father">

        <p class="son1">这是一个子元素选择器示例</p>
        <p class="son2">这是另一个子元素选择器示例</p>

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

    </div>

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

    <p>伪类元素选择器</p>
    <p id="ccc">可以实现鼠标悬效果</p>
</body>
</html>

图：

思考

.为类，那么类选择器使用.来使用

.aaa{
    color: aqua;
}

#为id，那么id选择器使用#来使用

#bbb{
    color: blue;
}

*为通用选择器

*{
    font-family: 'KaiTi';
    font-weight: bolder;
}

.father > .son是子代选择器的用法

.father > .son1{
    background-color: rgb(233, 112, 85);
}

后代选择器不用>而是直接使用空格

.father p{
    color: rgb(51, 98, 3);
}

注意，后代选择器包括子代，但是子代选择器不会包括后代

相邻元素选择器使用+

h3 + p{
    color: rgb(4, 4, 250);
}

伪类选择器使用#表示，后面接:来表示效果

例如，以下为实现鼠标悬停后更换背景颜色（ccc是一个类名）

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

差不多就这些

HTML学习笔记

Sun, 24 May 2026 00:00:00 GMT

前言

在neocities注册了个免费二级域名mazllin.neocities.org，为了对其进行简单布局，于是打算简单学学HTML，CSS，JS语言

在b站找了个3小时前端入门，这是第一篇学习笔记。后面可能会分篇，或者进行二编。到时候再看吧awa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
</head>
<body>
    <h1>标题标签：h标签</h1>
    <h1>
        一级标签
    </h1>
    <h2>二级标签</h2>
    <h3>...</h3>
    <h6>最多6级标签</h6>
    <p>段落标签：p标签</p>
    <p>字体加速：<b>b标签</b></p>
    <p>字体加粗：<strong>strong标签</strong></p>
    <p>斜体标签：<i>i标签</i></p>
    <p>下划线标签：<u>u标签</u></p>
    <p>删除线标签：<s>s标签</s></p>

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

    </ul>
    
    <ol>
        <li>有序列表</li>
        <li>使用<b>ol</b>与<b>li</b>搭配使用</li>
        <li>自动赋值序号</li>
    </ol>

    <h1>表格标签对</h1>
    <table>
        <tr>
            <th>table header</th>
            <th>在tr标签对里，使用th标签对</th>
            <th>作为开头</th>

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

    </table>

    <h1>表格标签对</h1>
    <p>在table标签中添加broder可以添加边框</p>
    <table border="1">
        <tr>
            <th>table header</th>
            <th>在tr标签对里，使用th标签对</th>
            <th>作为开头</th>

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

    </table>

</body>
</html>

具体效果是这样的

思考

这部分的核心就是标签对的使用

首先是头部

使用

<head>

</head>

标签对框起来

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>练习</title>
</head>

这部分用来表示这个html文件的基本信息。输入!+Enter可以快捷填入

其次是主体部分

使用

<body>

</body>

格式标签

<!--这是注释内容-->

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

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


    </tr>
</table>

这里的table制表感觉很像一个二维数组：

string[][] arr = {  {  "td" }
                    {  "td" }   
                    {  "td" }
                    {  "td" }
                 };//最外层的大括号为tr，内层的大括号为td

用于调整字体的标签对

<b></b>             <!--b标签对，用于字体加粗-->
<strong></strong>   <!--strong标签对，也用于字体加粗-->
<i></i>             <!--i标签对，用于字体斜体-->
<u></u>             <!--u标签对，用于字体下划线-->
<s></s>             <!--s标签对，用于字体划掉-->

好像这些效果用md文档也能实现

b字体加粗

i斜体

下划线没法实现

~~s划掉~~

awa

>>>P2

本来是分篇的，后来感觉没必要，干脆把3篇HTML的学习笔记放到一起好了

序

本章很简短，就是介绍了HTML的部分标签属性

<!DOCTYPE html>
<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>
    <p>开始标签 属性名="属性值"</p>

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


    <h1>附：</h1>
    <p>换行标签br,划线标签hr</p>
    <p>br标签可以<br>
    换行<br>
    <hr>hr标签可以画分割线</p>
</body>
</html>

具体效果是这样的：

思考

本章没啥思考的，也就是简单学习了href，src，alt标签的使用，以及换行标签br,分割标签hr

其他

我是先改完页脚的备案号再开始学这部分的，结果我发现这章的内容有很多都能用上！

&copy; <span id="copyright-year">{currentYear}</span> {profileConfig.name}. All Rights Reserved. /
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a><br>
        
        Powered by
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a><br>
        
        <!--👇这部分就是新加的-->
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://beian.miit.gov.cn/">苏ICP备2026032287号-1</a> &
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://icp.gov.moe/?keyword=20262136">萌ICP备20262136号</a>

你看这个a标签，br标签和标签属性，完全就是本章的内容。

早知道先学完再改了www

>>>P3

序

看着内容不多，区块和表单就一起结束掉吧，接下来就是CSS的内容了

区块好像还是CSS的前置知识点

区块

概念：

根据元素表现形式，可以分为块元素和行内元素。

块级元素

块级元素通常用于组织和布局页面，一般有以下标签：

<div>
<h1>
<ul>
<ol>
<li>
<table>
<form>    <!--表单标签-->

块元素通常由新的一行开始，并占据整行元素。块元素可以包含其他的块级元素和行内元素

行内元素

行内标签只占据其内容所需的宽度，且不会占据一整行

一般包含：

<span>
<a>
<strong>
<em>
<img>
<br>
<input>         <!--用于表单-->

实操

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
    </div>

    <div class="content">
        <h1>文章标题</h1>
        <p>文章段落</p>
        <p>使用div.xxx可以快速写出带有xxxclass属性的div标签<br>
        使用div#xxx可以快速写出带有xxxid属性的div标签</p>

    </div>

    <span>span标签可以理解成没有功能的a标签或者img标签，方便后续的CSS或者JS的操作</span>

</body>
</html>

效果是这样的：

思考

div标签没有实际作用，通常用于创建块级容器。有点像先划分领地（？

span标签的作用听着像用来制作跳转功能的？不太清楚，后面也许就知道了

“span标签用于内联样式化文本，给文本的一部分应用样式或者标记”原话是这么说的

表单

表单的内容还怪多的嘞，不过大多都是有关input属性

实操

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="表单学习" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
        <h1>form文本框</h1>
    <form action="">

        <input type="text">

        <p>type属性有许多种</p>

        <h2>placeholder标签</h2>
        <input type="text" placeholder="请输入文本">
        <p>该标签用于文本框中显示的内容</p>

        <h2>value标签</h2>
        <input type="text" value="文本">
        <p>该标签用于预填入文本</p>
        
        <h2>label标签</h2>
        <p>一般用于文本框前的文字</p>
        <label for="">文本框：</label>
        <input type="text">

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

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

        <h1>input:password标签</h1>
        <p>密码不能是明文，所以有个password标签</p>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" placeholder="输入密码">

        <h1>input：checkbox标签</h1>
        <p>这个属性用于多选</p>
        <label>爱好：</label>
        <input type="checkbox" name="hobby">唱
        <input type="checkbox" name="hobby">跳
        <input type="checkbox" name="hobby">rap
        <input type="checkbox" name="hobby">篮球

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


        <p>form：action属性用于填写一个url，该值为服务器所给的api</p>
    </form>

</body>
</html>

实际效果是酱紫的：

甚至要两张图片www

思考

表单主要是讲input的属性的

主要有type属性，其有

placeholder值，用于显示文本；
value值，用于预填入字符，或者说默认值
radio值（图片里少打一个字母www）用于做选择；
checkbox值，用于多选；
submit值，用于提交按钮；

还有label标签，用于与input标签联动。其for值可以与input的id属性绑定。

form本身有个action属性，可以与input：submit互动。其需要填入一个服务器提供的api

结语

是的，html的内容就这么结束了，接下来就该是CSS的内容了

~~可以把html写进简历了（~~

2026上半年小结

Sat, 23 May 2026 00:00:00 GMT

前言

这是我的第一篇博客，打算把我最近半年的故事分享一下，当个小故事看就好了awa

那么，话不多说，让我们开始吧

Ciallo~(∠・ω< )⌒★

从妹居物语开始的潘多拉魔盒之旅

前置科技树

一切的一切，还得从一款名叫妹居物语的游戏开始说起...

这是一款ai聊天类型的游戏，玩家将扮演哥哥，与妹妹一起同居，故事从这里开始。

*妹居物语demo steam界面截图

由于成本原因，开发者无法为每一位用户提供ai聊天服务，于是他们选择限制账号注册（账号可以使用开发者提供的ai服务机进行游戏），同时开放了api key的接口，可以自己去买api来进行游玩。

这里，就是我第一次接触api概念的地方。

*api key 配置页面

MuMuNovel项目

这是我接触的第二款ai项目。

这个项目很简单，就是配置api，然后让ai写小说给你看。但是，它所教会我的，是docker部署。这是以后玩其他项目的根基，所以我觉得值得一提awa

*github链接：MuMuAINovel

~~期间感谢DS老师提供的大力支持（~~

Astrbot，启动！

在玩了两款ai项目之后，我开始对ai项目感兴趣，想玩玩agent。恰逢当时龙虾特别火，但是风评又忽上忽下的，安全性和便携性又不足，不像是一个成熟的项目，于是我开始寻找别的agent项目。机缘巧合之下，我遇到了astrbot。

*github链接：Astrbot

项目内容如图，这里就不过多赘述了(*｀▽´*)

一开始，我用的是桌面版。就是使用.exe文件进行一键安装。一开始玩的很顺利，然而到后面，一些问题就渐渐浮现出来。

首先是桌面版本身的bug。在你使用QQ向bot发送消息时，会进行两次输入，于是也会有两次输出。这一点很影响使用体验，询问之下，我发现似乎只有桌面版会有这个问题，而且似乎不止我一个人这样。

其次，它是直接部署在我的电脑上的。这也意味着，它的开关机是跟随我的电脑的，这并不符合我所预想的那样随时使用，而不依赖于电脑。

综合考虑下，我决定购买开发板进行部署。

“我的”

这时候，就有聪明的读者要问了，啊码子码子，你为什么不买服务器啊？

欸，好问题。我也不知道（bushi

在那时候（其实也就是几个月前），我对“我的：这一概念有一种执着。我希望我所花钱买的东西，就是我的，即使我空了一段时间没有用，它依旧是我的，我可以随时把它拾起来重新用，而不用担心这东西会不会不属于我了。而用开发板部署astrbot，就是我对这一执念的践行。

事实证明，这是个不用后悔的决定。即使我买了只用了一个月左右，即使现在bot转到云服务器部署了，我也依旧可以随时拿它去做别的有意思的东西，而不用担心，这个东西几年后就不属于我了。

香橙派4Pro

这是我所购买的开发板款式。

现在的开发板是真的贵啊！本来打算去看看社区更广阔的树莓派的，结果价格大几百甚至上千，直接给我劝退了。

在群友的推荐下，我花325拿下了香橙派4pro

*香橙派购买图片

还是好贵www

同时，还有散热片，散热风扇，外壳，TF卡，HTMI线，5V3A电源等要购买，总共花了我将近400块大洋QAQ

网络连接失败

板子到手就万事大吉了？好戏才刚开场呢

首当其冲的就是系统问题。由于香橙派的社区没有树莓派那么活跃，导致我用的是树莓派系统软件烧录的系统，这也导致了我的板子完全开不了机（苦也，这也有NTR）。后来我才置知道，原来香橙派官网就有Ubuntu系统的包。在我更换系统包和烧录软件之后，我的板子才算真正活了过来。

然后便是连接问题。起初，我觉得只要用HTMI线接到电脑上就好了，直到我进行实操，我才知道，笔记本电脑的HTMI接口只支持输出，不支持输入！饿啊，这下只能看着板子在运行，但是一点操作都做不了www

~~无能的主人~~

好在，我从朋友那里借到了一根网线，并通过网络共享获取到了ip，用ssh连接上了板子。那么，接下来就是连接校园网啦

是的，我一开始没选择服务器的原因就是打算蹭校园网awa

但是，事情并没有想象中的顺利。为了节省内存，我所烧录的系统是sever系统，也就是只有命令行的系统。这也就导致，我用了两个晚上也没能攻陷（划掉）连接上校园网。迫不得已之下，去小黄鱼买了个移动wifi。

这期间还有个小故事，我在DS老师的指导下，刷了一整个下午的系统没刷上去。恰巧那天晚上，DS的服务器崩了，才换了千问继续操作。没成想，千问给我香橙派的官网Ubuntu下载链接，系统一下就刷上去了。至此，DS在我心中的神话破灭www

服务器：-99￥，-99￥（红字飘过）

风波再起

用上移动wifi自然是很轻易的配置好了网络，顺利拿到ip连接上板子。接下来，安装astrbot，napcat，ollama都很顺利。

直到用了一周之后，很快啊，我的bot直接连不上了

*心脏骤停

不止是bot，板子用ssh也连接不上。后来紧急联系千问大手子给我救回来，发现是ip变动了。而且从事后的角度看，这个ip变动还是平均一周一次的，也就是说我每周都要重新连接一下ip，这与我的最初期望是相悖的。

与此同时，移动wifi的价格也让我有些肉疼。最开始的套餐，是9.9r30G，但是用了半个月不到就快没了，又冲了20块钱的流量。那么，下个月换成20r100G的套餐就好了。可是，这基本跟服务器的价格相差无几了。

最终让我换成服务器的，是五一小长假。五一期间，要是把板子带回去，会很不方便。但是要是不带回去，万一出状况没法及时挽救。

出现这种犹豫，又在板子的性价比已经快要比不过服务器的时候，我便决定，astrbot上云。

最终，在精心挑选下，选择了腾讯云的新人优惠99/年2c4g的服务器，并在五一期间成功把astrbot搬到云上

NewAPI

在玩astrbot时，多多少少会接触到中转站和公益站，而它们大多数是用newapi搭建的。在渠道越来越多的情况下，我也萌生出了搭建自己的newapi站的想法。

于是我找到了一个服务器小厂，以每个月3元的极低价租了一个2c2g的服务器，搭建起了自己的api小站。为此，我还专门买了域名（划重点，后面会考）。

碎碎念：我也没做宣传，也宣传不出去，就在这里打个广告吧（

码子的api小站

github网址:NewAPI

域名

上面提到我买了一个域名 mazlin.top，这个域名本来是打算给api站用的，而我当时也没想过搭一个博客。都说到这了，“但是”这不就来了嘛，在国内，使用域名需要备案，而备案，需要在服务器提供商那里备案。但是我的服务器是小厂的，没法备案，所以要么我去大厂再买个云，要么这个域名就用不了（哭

最终，我还是买了阿里云的99/年的2c2g服务器，作为现在的blog站点，使用mazlin.top

现在，我的手头上已经有三台服务器了（

提到备案，我必须拿出这张图：

*这图我的能炫耀大半年 ദ്ദി (⩌ᴗ⩌ )

其他

comfyui

前段时间，我还玩了comfyui，就是本模型工作流生图。本站的站娘翠笙就是这里出生的哦(♡>𖥦<)/♥

Blog网站

是的，这个都能单独放一个小章节，气死偶列！我要全程加粗！

你知道吗这篇文章原本5000多字现在加上图片全都是二编而且是纯手打的从头再来的二编！我最开始用的是Halo，结果这东西跟数据库连不上导致我的网站也登不上导致我在Halo的文章全喵的没了导致我现在重新手打一遍！！！

这里面或许有我的原因，但是依旧很生气(▼皿▼#)

后面短暂的换了wordpress，不过在巧合之下，我刷到了astro fuwari，也就是现在的网站模样,也算是因祸得福吧。

github地址：fuwari

git

也是用上git了awa

为了防止重蹈覆辙，也为了方便我编写文章，这个站的运作是这样的：

先在我的本地电脑上编辑，再由git指令上传到gitee仓库（github不好连，只能退而求其次了），再在服务器配置Webhooks拉取，便做到了网站内容的跟新

也算是学到了git的使用吧

结尾

这半年左右的时间下来，玩到了好多有意思的东西，也学到了不少的知识

学到知识心情+30

文章二编心情-10

创建blog网站心情+20

awa

那么，就在这里结束吧。

生活还在继续，故事还没结束，码子的小站会一直为各位开放(♡>𖥦<)/♥

博客md文档模板

Thu, 21 May 2026 00:00:00 GMT

一级标题

段落之间用空行分隔。可以包含斜体、粗体和 行内代码。

无序列表示例：

项目一
项目二
项目三

引用块可以跨段落，像这样写。

使用三个横线表示破折号（—），两个横线表示范围（如 12--14），三个点 … 会转换为省略号。支持 Unicode ☺。

二级标题

有序列表示例：

第一项
第二项
第三项

代码块（缩进四个空格）： # 示例代码 for i in range(5): print(i)

或者使用围栏式代码块：

指定语言的语法高亮：

import time
for i in range(10):
    time.sleep(0.5)
    print(i)