记录计算机基础、软件开发、工程实践与人工智能的学习笔记。https://mrsibe.topzh-CNhttps://mrsibe.top/notes/ai/llm/attentionhttps://mrsibe.top/notes/ai/llm/attentionAttention 机制的学习笔记（待补充）。https://mrsibe.top/notes/ai/llm/transformerhttps://mrsibe.top/notes/ai/llm/transformerTransformer 架构的学习笔记（待补充）。https://mrsibe.top/notes/development/backend/api-designhttps://mrsibe.top/notes/development/backend/api-designAPI 设计的学习笔记（待补充）。https://mrsibe.top/notes/development/backend/cachehttps://mrsibe.top/notes/development/backend/cache缓存的学习笔记（待补充）。https://mrsibe.top/notes/development/backend/message-queuehttps://mrsibe.top/notes/development/backend/message-queue消息队列的学习笔记（待补充）。https://mrsibe.top/notes/development/backend/rpchttps://mrsibe.top/notes/development/backend/rpcRPC 的学习笔记（待补充）。https://mrsibe.top/notes/development/frontend/htmlhttps://mrsibe.top/notes/development/frontend/htmlHTML 的基本概念、元素与常见标签。<h2>HTML 是什么</h2> <p><strong>HTML</strong>（HyperText Markup Language，超文本标记语言）是一种<strong>标记语言</strong>，一般编写在后缀名为 <code>.html</code> 的 <strong>HTML 文档</strong>之中。</p> <p>它和 Markdown 类似，通过各种标记描述网页内容的结构和语义。至于具体的颜色、字体、大小、布局等样式，一般交给 CSS 处理。</p> <h2>HTML 元素是什么</h2> <p>HTML 的基本单位是<strong>元素（Element）</strong>，普通元素由开始标签、内容和结束标签构成：</p> <pre><code>&#x3C;p>这是一段文字&#x3C;/p> </code></pre> <p>其中 <code>&#x3C;p></code> 是开始标签，<code>&#x3C;/p></code> 是结束标签，整个 <code>&#x3C;p>这是一段文字&#x3C;/p></code> 才叫元素。标签不区分大小写，不过为了规范一般都使用小写。</p> <p>元素可以放置在其他元素内部，被称为<strong>嵌套</strong>。</p> <p>有些元素只有一个标签，被称为<strong>空元素（Void Element）</strong>：<code>&#x3C;img src="firefox.png" alt="Firefox 图标" /></code>。常见的空元素还有 <code>&#x3C;br></code>、<code>&#x3C;hr></code>、<code>&#x3C;meta></code>、<code>&#x3C;link></code>、<code>&#x3C;input></code> 等。</p> <p>元素可以拥有<strong>属性（Attribute）</strong>，用于提供额外的信息或配置，可以简单理解为键值对：</p> <pre><code>&#x3C;a href="https://example.com">Example&#x3C;/a> &#x3C;img src="cat.png" alt="一只猫" width="300" /> </code></pre> <p>一个元素可以有多个属性，属性之间使用空格分隔。属性值一般使用双引号或单引号包起来。</p> <p>有些属性是<strong>布尔属性</strong>，只要存在就表示 true：</p> <pre><code>&#x3C;!-- 这是一段注释 --> &#x3C;!-- 即使写成 `disabled="false"`，`disabled` 仍然会生效。 --> &#x3C;input type="text" disabled /> </code></pre> <p>HTML 中连续的普通空格和换行通常会被折叠成一个空格，所以不要通过堆空格或者换行控制页面布局。</p> <p><code>&#x3C;</code>、<code>></code>、<code>&#x26;</code> 等字符具有 HTML 语法含义，如果想作为普通文本显示，可以使用<strong>字符引用（Character Reference）</strong>：</p> <pre><code>&#x26;lt; &#x3C;!-- &#x3C; --> &#x26;gt; &#x3C;!-- > --> &#x26;amp; &#x3C;!-- &#x26; --> &#x26;quot; &#x3C;!-- " --> </code></pre> <h2>常用 HTML 元素</h2> <ul> <li>HTML 提供了 <code>&#x3C;h1></code> 到 <code>&#x3C;h6></code> 六级标题，主要用于表示文档的层级关系，而不是控制字体大小。普通段落使用 <code>&#x3C;p></code>。</li> <li><code>&#x3C;em></code> 和 <code>&#x3C;strong></code> 都表示强调：<code>&#x3C;em></code> 表示强调，浏览器默认一般显示为斜体；<code>&#x3C;strong></code> 表示内容具有较高的重要性，默认一般显示为粗体。</li> <li><code>&#x3C;ul></code> 表示无序列表，<code>&#x3C;ol></code> 表示有序列表，列表项都使用 <code>&#x3C;li></code>，列表内部还可以继续嵌套列表。</li> <li><code>&#x3C;dl></code> 表示描述列表，其中 <code>&#x3C;dt></code> 表示术语，<code>&#x3C;dd></code> 表示对应的描述，适合术语和定义、问题和答案、名称和描述等内容。</li> <li>超链接使用 <code>&#x3C;a></code>，比如 <code>&#x3C;a href="https://developer.mozilla.org/">MDN&#x3C;/a></code>。<code>&#x3C;a></code> 不只能包文字，也可以包图片等其他内容。</li> <li>内部链接可以通过元素的 <code>id</code> 跳转到当前页面中的某个位置：</li> </ul> <pre><code>&#x3C;h2 id="html-element">HTML 元素&#x3C;/h2> &#x3C;a href="#html-element">跳转到 HTML 元素&#x3C;/a> </code></pre> <ul> <li>图片使用 <code>&#x3C;img></code>，其中 <code>src</code> 表示图片地址，<code>alt</code> 表示图片的文本描述：</li> </ul> <pre><code>&#x3C;img src="cat.jpg" alt="一只趴在桌子上的橘猫" /> </code></pre> <p>图片无法加载或者用户使用屏幕阅读器时，会使用 <code>alt</code> 描述图片内容。如果图片只是装饰，没有实际语义，可以设置 <code>alt=""</code>。</p> <h3>一些其他文本语义元素</h3> <ul> <li><code>&#x3C;blockquote></code> 用于较长的块级引用，<code>&#x3C;q></code> 用于较短的行内引用。</li> <li><code>&#x3C;abbr></code> 用于表示缩写，比如 <code>&#x3C;abbr title="HyperText Markup Language">HTML&#x3C;/abbr></code>，可以通过 <code>title</code> 属性标记缩写的完整含义。</li> <li><code>&#x3C;sup></code> 表示上标，比如 <code>x&#x3C;sup>2&#x3C;/sup></code>；<code>&#x3C;sub></code> 表示下标，比如 <code>H&#x3C;sub>2&#x3C;/sub>O</code>。</li> <li><code>&#x3C;code></code> 用于表示代码，比如 <code>&#x3C;code>System.out.println()&#x3C;/code></code>。多行代码一般配合 <code>&#x3C;pre></code> 使用，<code>&#x3C;pre></code> 会保留内容中的空格和换行。</li> <li><code>&#x3C;time></code> 用于表示时间和日期，比如 <code>&#x3C;time datetime="2026-10-06">2026 年 10 月 6 日&#x3C;/time></code>，<code>datetime</code> 属性用于提供机器可识别的时间信息。</li> </ul> <h2>HTML 文档结构</h2> <p>一个最基础的 HTML 文档：</p> <pre><code>&#x3C;!doctype html> &#x3C;html lang="zh-CN"> &#x3C;head> &#x3C;meta charset="utf-8" /> &#x3C;title>我的测试页面&#x3C;/title> &#x3C;/head> &#x3C;body> &#x3C;p>这是我的页面&#x3C;/p> &#x3C;/body> &#x3C;/html> </code></pre> <ol> <li><code>&#x3C;!doctype html></code>：文档类型声明，让浏览器按照现代 HTML 标准解析页面。</li> <li><code>&#x3C;html></code>：HTML 文档的根元素，<code>lang</code> 属性表示页面的主要语言。</li> <li><code>&#x3C;head></code>：存放 HTML 文档的元信息和配置，一般不会直接展示给用户。</li> <li><code>&#x3C;body></code>：存放网页展示给用户的主要内容。</li> </ol> <h3>头元素</h3> <p>常见的 <code>&#x3C;head></code> 内容：</p> <pre><code>&#x3C;head> &#x3C;meta charset="utf-8" /> &#x3C;title>我的测试页面&#x3C;/title> &#x3C;meta name="author" content="MrSibe" /> &#x3C;meta name="description" content="这里是描述页面的内容" /> &#x3C;link rel="stylesheet" href="style.css" /> &#x3C;script src="main.js" defer>&#x3C;/script> &#x3C;/head> </code></pre> <ul> <li><code>&#x3C;title></code>：HTML 文档的标题，一般显示在浏览器标签页上。</li> <li><code>&#x3C;meta></code>：描述文档的元信息，比如字符编码、作者、页面描述等。</li> <li><code>&#x3C;link></code>：描述当前文档和其他资源的关系，最常见的是引入 CSS，也可以配置 favicon。</li> <li><code>&#x3C;script></code>：加载或编写 JavaScript，<code>src</code> 指定文件地址，<code>defer</code> 表示等 HTML 解析完成后再执行。注意，<code>&#x3C;script> </code>不是空元素，需要写结束标签。</li> </ul> <h2>语义化 HTML</h2> <p><code>&#x3C;body></code> 中除了标题、段落、列表等内容元素之外，还有一些用于组织页面结构的<strong>语义化元素</strong>：</p> <ul> <li><code>&#x3C;header></code>：页面或者某个区块的页眉。</li> <li><code>&#x3C;nav></code>：主要的导航区域。</li> <li><code>&#x3C;main></code>：当前页面最主要的内容，一个页面通常只有一个。</li> <li><code>&#x3C;article></code>：相对独立、完整的一块内容，比如博客文章、新闻、论坛帖子等。</li> <li><code>&#x3C;section></code>：按照主题划分出来的一个内容区段，一般会有自己的标题。</li> <li><code>&#x3C;aside></code>：和主要内容相关但不属于主要内容本身的信息，比如侧边栏、相关阅读等。</li> <li><code>&#x3C;footer></code>：页面或者某个区块的页脚。</li> </ul> <p><code>&#x3C;header></code> 和 <code>&#x3C;footer></code> 不一定只能出现一次，<code>&#x3C;article></code> 等元素也可以拥有自己的 <code>&#x3C;header></code> 和 <code>&#x3C;footer></code>。</p> <p><code>&#x3C;article></code> 和 <code>&#x3C;section></code> 比较容易混淆：<code>&#x3C;article></code> 更强调内容可以相对独立存在，<code>&#x3C;section></code> 更强调一段内容内部按照主题进行划分。</p> <p>比如：</p> <pre><code>&#x3C;main> &#x3C;article> &#x3C;header> &#x3C;h1>HTML 学习笔记&#x3C;/h1> &#x3C;/header> &#x3C;section> &#x3C;h2>HTML 是什么&#x3C;/h2> &#x3C;p>...&#x3C;/p> &#x3C;/section> &#x3C;section> &#x3C;h2>HTML 元素&#x3C;/h2> &#x3C;p>...&#x3C;/p> &#x3C;/section> &#x3C;/article> &#x3C;aside> &#x3C;h2>相关阅读&#x3C;/h2> &#x3C;/aside> &#x3C;/main> </code></pre> <h3><code>&#x3C;div></code> 和 <code>&#x3C;span></code></h3> <p>如果没有合适的语义元素，可以使用 <code>&#x3C;div></code> 和 <code>&#x3C;span></code> 这两个没有特殊语义的通用容器：</p> <pre><code>&#x3C;div class="card"> &#x3C;h2>HTML&#x3C;/h2> &#x3C;p>...&#x3C;/p> &#x3C;/div> &#x3C;p>当前状态：&#x3C;span class="status">运行中&#x3C;/span>&#x3C;/p> </code></pre> <p><code>&#x3C;div></code> 一般用于包裹一块内容，<code>&#x3C;span></code> 一般用于包裹一小段行内内容。如果有 <code>&#x3C;nav></code>、<code>&#x3C;article></code>、<code>&#x3C;section></code> 等更合适的语义元素，优先使用这些元素。</p> <h3><code>&#x3C;br></code> 和 <code>&#x3C;hr></code></h3> <ul> <li><code>&#x3C;br></code> 表示换行，不要使用大量 <code>&#x3C;br></code> 控制间距，间距应该交给 CSS。</li> <li><code>&#x3C;hr></code> 表示内容在主题上的分隔，浏览器默认一般显示为一条横线。</li> </ul> <h2>一个比较规范的 HTML 页面</h2> <pre><code>&#x3C;!doctype html> &#x3C;html lang="zh-CN"> &#x3C;head> &#x3C;meta charset="utf-8" /> &#x3C;title>HTML 学习笔记&#x3C;/title> &#x3C;meta name="description" content="HTML 基础学习笔记" /> &#x3C;link rel="stylesheet" href="style.css" /> &#x3C;script src="main.js" defer>&#x3C;/script> &#x3C;/head> &#x3C;body> &#x3C;header> &#x3C;h1>MrSibe Notes&#x3C;/h1> &#x3C;/header> &#x3C;nav> &#x3C;a href="/">首页&#x3C;/a> &#x3C;a href="/html">HTML&#x3C;/a> &#x3C;a href="/css">CSS&#x3C;/a> &#x3C;/nav> &#x3C;main> &#x3C;article> &#x3C;h2>HTML 学习笔记&#x3C;/h2> &#x3C;section> &#x3C;h3>HTML 是什么&#x3C;/h3> &#x3C;p>HTML 是一种&#x3C;strong>标记语言&#x3C;/strong>，用于描述网页的结构和语义。&#x3C;/p> &#x3C;/section> &#x3C;section> &#x3C;h3>HTML 元素&#x3C;/h3> &#x3C;p>HTML 文档由大量 HTML 元素组成。&#x3C;/p> &#x3C;/section> &#x3C;/article> &#x3C;aside> &#x3C;h2>相关阅读&#x3C;/h2> &#x3C;/aside> &#x3C;/main> &#x3C;footer> &#x3C;p>Copyright © MrSibe&#x3C;/p> &#x3C;/footer> &#x3C;/body> &#x3C;/html> </code></pre> <p>HTML 主要负责描述内容的<strong>结构和语义</strong>，具体的颜色、字体、大小、间距和布局等样式一般交给 CSS。</p>https://mrsibe.top/notes/engineering/dev-environment/githttps://mrsibe.top/notes/engineering/dev-environment/gitGit 解决的问题与基本概念。<p>Git 是目前最流行的版本管理系统。</p> <p>Git 解决了两个问题：第一，如何在写错代码的时候可以恢复到原来的状态；第二，如何使得多名程序员可以共同开发一个软件。</p> <h2>Git 的基本概念</h2>https://mrsibe.top/notes/engineering/tools/lazygithttps://mrsibe.top/notes/engineering/tools/lazygitLazygit 终端 Git 可视化工具与常用按键速查。<p>现在写项目基本上离不开 Git 了。然而 Git 自带的 CLI 命令有些过于琐碎，我们需要不停地敲击命令才能知道项目有哪些分支、有哪些 commit 等信息。因此大家都更习惯用图形化界面的 Git 管理工具，比如说 IDEA、VSCode 自带的 Git 工具。</p> <p>不过我在终端写代码时（用 Claude Code、Vim 简单编辑），再专门打开 IDE 使用 Git 工具实在麻烦。<a href="https://github.com/jesseduffield/lazygit">Lazygit</a> 正好填补了这个空缺——一个纯终端的 Git 可视化工具。</p> <p>它的界面类似 GitHub Desktop 的布局，左侧是功能面板，右侧是详细信息区。用数字键 1-5 快速切换面板，用空格键执行核心操作。</p> <h2>常用按键速查</h2> <p>| 操作 | 按键 | | ------------------- | ---------- | | 暂存/取消暂存 | <code>空格</code> | | 提交 | <code>c</code> | | 追加提交（Amend） | <code>A</code> | | 推送 / 拉取 | <code>P</code> / <code>p</code> | | 切换分支 | <code>空格</code> | | 新建分支 | <code>n</code> | | 交互式 Rebase | <code>i</code> | | 撤销上一步 Git 操作 | <code>z</code> | | 查看帮助 | <code>x</code> 或 <code>?</code> |</p>https://mrsibe.top/notes/engineering/tools/vimhttps://mrsibe.top/notes/engineering/tools/vim通过 vimtutor、实践与帮助文档学习 Vim。<p>很多时候我们需要 ssh 一下 Linux 服务器来完成一些任务，但这些服务器基本上不会预装 IDE，比如说 VSCode、PyCharm。</p> <p>最快捷的办法就是使用系统自带的编辑器，其中最出名的必然是 Vim。</p> <h2>怎么学 Vim？</h2> <p>主要看 vimtutor 就好。在终端输入 <code>vimtutor</code>，就会用 vim 打开一个文档教程，跟着里面的教学手敲就好了。（如果打开的不是中文，可以试试 <code>vimtutor zh</code>，不过有些系统没装中文教程文件，没装的话就还是英文版）</p> <p>vimtutor 敲完，直接强迫自己用一段时间 Vim，过段时间就会发现自己越用越顺手；如果忘记什么命令直接 <code>:help</code> 查一下，或者再翻一下 <code>vimtutor</code> 就好。</p> <p>Vim 相关书籍推荐《Practical Vim》。</p> <h2>更现代的选择——Neovim</h2> <p>Vim 这个编辑器历史已经相当悠久了，默认配置和插件生态相对老旧，而且 Vim 为了兼容很多古早设备，还维护了相当冗余的代码。因此社区 fork 出了 Neovim，删掉冗余代码，配置语言换成 Lua，显得更加现代。因此对于喜欢 Vim 甚至打算直接把 Vim 作为主力的人，我更推荐使用 Neovim。</p> <p>Neovim 默认不带太多开箱即用的功能，通常需要自己写配置，或者套用现成的配置。自己从零搭相当不友好，因此社区比较推荐从带注释的基础配置模板开始，最出名的是 <a href="https://github.com/nvim-lua/kickstart.nvim">Kickstart.nvim</a>。如果想开箱即用，那就无脑入 <a href="https://www.lazyvim.org/">LazyVim</a>，它是社区里很流行、口碑不错的一套配置，集成了大量插件，开箱即用程度在 Neovim 配置里算很高的。</p>https://mrsibe.top/notes/systems/docker/introhttps://mrsibe.top/notes/systems/docker/introDocker 的基本概念，以及容器解决的部署与隔离问题。<h2>Docker 是什么？解决了什么问题？</h2> <p>每次给电脑安装开发环境的时候都非常折腾，甚至还会遇到多版本管理的问题；软件开发好后部署到服务器，也会遇到类似的问题。程序员们觉得，程序开发好后，如果能直接把程序和运行环境都打包好，发到服务器上运行，就很方便了。</p> <p>当然，实现这个思路也有很多种方法。最传统的思路是：把程序和运行环境做成安装包，直接在服务器上安装。不过，这个方法很可能导致多版本环境冲突，因此我们需要让环境与环境之间相互隔离。学过计算机操作系统的同学应该在课堂上摸过 Linux 虚拟机：那能不能把程序和环境打包在一个虚拟机镜像中，服务器上直接运行这个虚拟机镜像？这个方法是可行的，但也出现了一个非常严重的问题：虚拟机镜像中也包含完整的 Linux 操作系统，每一个虚拟机都会占用大量硬件资源去执行进程管理、文件管理，导致资源浪费。</p> <p>Docker 也觉得虚拟机太重了，于是他们自己实现了一套虚拟系统：程序和环境（不再包含 Linux 系统内核）可以打包成 Docker image，镜像运行起来的每个实例叫做 Docker container。</p> <p>所以可以先用一句话概括：</p> <blockquote> <p><strong>Docker 是一个轻量级的容器化技术，它把应用程序及其依赖打包成镜像，并在隔离的容器中运行。</strong></p> </blockquote> <p>为什么 Docker 现在广泛应用于云原生、Self-Hosted？可以想一想：只要你的电脑安装了 Docker，别人打包好的应用就可以在你的电脑上部署，你自己打包好的应用也可以在各处运行。Build once, run everywhere，确实很美好。</p>