← 返回文档
项目文档 ·

第二章：AI 时代基建

掌握 Markdown、HTML 与 Git 三个 AI 时代必备的基础工具。

2.1 什么是 Markdown

一句话解释

Markdown 是一种简单的"标记语言"，让你用纯文本写出格式漂亮的文档——不需要鼠标点来点去，只用键盘就能搞定。

为什么 AI 时代要学 Markdown

  1. AI 的"母语"：AI 可以直接输出 Markdown 格式的句子

  2. GitHub 的通用语言：代码仓库的说明文档都是 Markdown

  3. 高效写作：比 Word 更快，比纯文本更美观

  4. 跨平台通用：在任何设备、任何编辑器里都能用

核心语法（3 分钟速成）

# 一级标题
## 二级标题
### 三级标题

**加粗文字**
*斜体文字*
~~删除线~~

- 无序列表
- 第二项

1. 有序列表
2. 第二项

> 这是一段引用

[链接文字](https://example.com)
![图片描述](图片地址)

`代码`
​```python
print("Hello World")
​```
行内代码`反引号`在数字1的左边

| 表头1 | 表头2 |
|-------|-------|
| 内容1 | 内容2 |

如何换行而不是分段

在 Markdown 文件中，直接按一次回车，通常不会在最终渲染结果中换行。你需要在行末输入两个空格，再按下回车，才能实现换行；也可以连续按两次回车，将内容分成两个段落。

在部分在线文档编辑器中，按下回车键会默认创建一个新的内容块，效果类似于在 Markdown 文件中连续按两次回车。此时，可以尝试使用 Shift + 回车进行普通换行，而不是进入下一个内容块。

如果你使用的是 iOS 或 macOS，这里我推荐你在系统设置中将“连续按下两个空格键插入句号”关闭。

插入图片

当你需要在markdown插入图片时，图片会通过一个链接的形式被放在需要出现的位置，当你将图片文件改名、移出文件夹时，阅读器就找不到这张图片了。（所以如果需要移动文件，那么请将包含图片的文件夹一起移动） 如果你打算将文稿发给别人，让他们也能看到你添加的图片，而不是一串图片存在你电脑上的位置链接，那就需要将含有图片的文件夹一起发给别人（其实word就做了这样一件事）。

![课程封面](./images/cover.png)

或者你也可以直接添加互联网上的图片，或者将你的图片上传到互联网上，只要电脑能够连接网络，就可以看到这张图片。

例如，我们在微博发布一张图片时，并不是把图片直接传给每一个看到微博的人，而是先把图片上传到微博的服务器。微博会为这张图片生成一个图片地址。之后，其他用户打开这条微博时，他们的手机或电脑会根据这个地址，从微博的服务器把图片加载出来。

**“图床”**就是专门用来存放图片，并生成图片链接的服务。

它的作用可以理解为：一个专门用来保存图片的服务器，帮你把本地图片上传到网上，然后给你一个可以在 Markdown、网页、博客或论坛中使用的图片地址。

如果你要写一篇 Markdown 教程、博客文章或项目 README，本地电脑里的图片别人通常是看不到的。因为图片只存在你的电脑里，别人的设备无法访问。把图片上传到图床后，图床会给你一个网络图片地址。你把这个地址写进 Markdown，别人打开文档时，就可以通过这个地址看到图片。

例如：

![示例图片](https://example-image-host.com/my-image.png)

这里的 https://example-image-host.com/my-image.png 就是图床提供的图片地址。

因此，Markdown 插入网络图片时，真正重要的是图片地址是否能被访问。只要图片地址有效，图片就能显示；如果图床关闭、图片被删除、地址权限受限，图片就会加载失败。

或许你想知道

如何快速获取本地图片的位置：选中图片文件并右键，点击复制路径后，图片路径就出现在你的剪切板中了。当然你也可以使用快捷键。

一般选择相对路径:以当前 Markdown 文件所在位置为起点查找图片。

例如：

项目目录
│
├── README.md
│
└── images
    └── logo.png

在 README.md 中：./images/logo.png

而绝对路径会一直定位到电脑根目录：/Users/user-id/Documents/项目目录/images/logo.png

在“markdown文件中插入图片”这个场景中，使用相对路径时你将整个项目移动、发送给其他人都能正常阅读和使用。 而绝对路径在你将md文件、整个项目移动/发给其他人时，因为图片的路径发生变化没有办法找到图片并正常显示。

VS Code 中复制相对路径Markdown 相对路径

推荐工具

工具特点适合
Obsidian本地 Markdown 知识库学生、知识管理爱好者
VS Code专业文本与代码编辑器开发者
飞书/Notion在线协作，支持 Markdown团队协作

2.2 什么是 HTML

一句话解释

HTML 是网页的"骨架"——它告诉浏览器"这是标题"、"这是段落"、"这是图片"、"这是链接"。 你在浏览器中看到的大多数网页，都可以视为由 HTML 搭建基本结构的页面。

为什么非程序员要了解 HTML

  1. 数字素养：理解互联网内容是如何组织的，爬虫等其他课程也需要相关知识

  2. 可视化、可交互：相比 Markdown 主要用于编写文本，HTML 可以构建更加丰富的数字内容以及各种交互效果。许多网页、在线工具和现代软件界面，本质上都是基于 HTML 技术构建的

  3. **AI coding：**无论是微信公众号页面、活动宣传页、个人网站、小程序中的 Web 页面，还是简单的 Web 应用，HTML 都是构建界面的基础。掌握 HTML 后，可以进一步学习 CSS 和 JavaScript，实现更加丰富的设计和交互

核心概念

<!-- HTML 的基本结构 -->
<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>

  <body>
    <h1>这是一级标题</h1>
    <p>这是一个段落</p>
    <img src="photo.jpg" alt="图片描述">
    <a href="https://example.com">这是一个链接</a>
  </body>
</html>

关键知识点

  • 标签（Tag）：用 < > 包裹的关键词，如 <h1>、<p>、<img>

  • 元素（Element）：开始标签 + 内容 + 结束标签，如 <p>Hello</p>

  • 属性（Attribute）：标签的附加信息，如 src="photo.jpg"、href="链接"

  • 嵌套：标签可以像俄罗斯套娃一样包含其他标签

与 HTML 配合的两个重要工具

  • CSS：负责网页的外观和布局。它可以控制文字大小、颜色、间距、背景、边框，以及元素在页面中的排列方式。简单来说，HTML 决定网页“有什么”，CSS 决定这些内容“长什么样”。

  • JavaScript：负责网页的交互和逻辑。例如点击按钮后弹出提示、提交表单、切换页面内容、获取实时数据等。它让网页不再只是静态展示，而是能够根据用户操作产生变化。

课堂演示

  1. 用浏览器打开任意网页，右键"检查"，展示 HTML 结构

  2. 现场修改一个简单的 HTML 文件，观察浏览器中的变化

动手练习

用 AI 生成一个简单的 HTML 页面（包含标题、段落、图片、链接），在浏览器中打开并预览。不需要记住语法，只需要能看懂基本结构。

2.3 什么是 Git

一句话解释

Git 是一个“游戏存档系统”——它可以记录项目每个重要阶段的状态，让你随时查看历史记录，并回到之前保存过的版本。

生活类比

你写论文时，是不是会保存"论文_v1.doc"、"论文_v2.doc"、"论文_最终版.doc"、"论文_最终版_真的最终.doc"？Git 就是帮你做这件事的工具，而且更聪明、更高效。你不用每次修改都复制一份文件，只需要 commit 一次，这个版本的状态就被记录下来了。

为什么 AI 时代要学 Git

  1. 代码协作的标准：大量 AI 项目代码托管在 GitHub、GitLab 等 Git 平台上，Git 已经成为软件协作的重要基础设施。

  2. 版本控制：AI 帮你改代码时，万一改坏了可以一键回退

  3. 作品展示：GitHub 主页就是你的"数字简历"

核心概念

概念类比说明
Repository（仓库）一个文件夹存放项目所有文件的地方
Commit（提交）一次"快照"记录当前时刻所有文件的状态
Branch（分支）平行宇宙在不影响主线的情况下尝试新想法
Push（推送）上传到云端把本地的修改同步到 GitHub
Pull（拉取）从云端下载把 GitHub 上的最新版本拉到本地

一些你需要注意的事

  • 一些在项目中存在，但是不希望被跟踪的文件：.gitignore 是指定哪些未跟踪文件不应加入 Git 版本历史的规则文件，例如：可排除 node_modules、构建产物和含真实密钥的 .env。它不能自动清除已 Commit 的内容；密钥一旦进入历史，必须立即更换。

  • 提交信息：在保存存档的时候，你（当然也可以让 AI 写）需要撰写Git Commit Message（提交信息），让人一眼知道这次提交做了什么，也方便自动生成 Changelog、版本管理和代码审查。在 Message 的开头一般是<类型>: <描述>的规范前缀。

  • 不会写？：让 AI 工具自己完成：帮我创建并初始化仓库，不用push到云端，检查gitignore文件，然后帮我commit一次

或许你想要进一步学习如何使用 Git 和 Github

GitHub Hello World 指南，让你快速了解 GitHub 的 Pull Request 工作流。

万一你想成为 Git 高手呢？阅读使用 Git Worktree 实现分支开发。

本章总结

工具一句话核心用途
Markdown纯文本写出格式文档写文档、记笔记、AI 输出
HTML网页的骨架理解网页结构、H5 开发
Git文件的时光机版本控制、代码协作、作品展示