LESSON 04 / MARKDOWN & HTML

AI 时代的
两种表达语言

认识 Markdown 与 HTML 的区别，对照两种写法，再让 AI 把一份笔记转换成浏览器能打开的网页。

开始学习生成转换提示词

本课完成后

01分清 Markdown 与 HTML
02看懂两种格式的核心写法
03用 AI 把 .md 转成 .html

PART 01

两种语言，各有分工

Markdown 适合快速写内容；HTML 负责描述浏览器中的网页结构。

MARKDOWN · .md

内容写作

## 今日任务

- 学习 Markdown
- 完成练习

符号少、源文件直接可读，适合笔记、README 和草稿。查看 Obsidian 中文语法文档 ↗

HTML · .html

网页结构

<h2>今日任务</h2>
<ul>
  <li>学习 HTML</li>
  <li>完成练习</li>
</ul>

用标签表达结构，浏览器可以直接打开，并能加入样式和交互。

为什么先学这两种

AI 友好

都是结构清楚的文本，AI 容易读取、生成、修改和互相转换。

连接写作与发布

Markdown 专注内容，HTML 把同一内容变成浏览器可以打开的网页。

简单而通用

无需复杂软件，也是继续学习 CSS、JavaScript 和 Python 网页应用的基础。

一句话：Markdown 更适合写内容，HTML 更适合呈现网页；两者可以由 AI 相互转换。

PART 02

同一内容，两种写法

点击内容类型，对照 Markdown、HTML 和最终效果。

MARKDOWN# 后留空格

# 一级标题
## 二级标题

HTML

<h1>一级标题</h1>
<h2>二级标题</h2>

PREVIEW

一级标题

二级标题

PART 03

什么时候用哪一个

01 · MD

写笔记与草稿

需要快速记录、持续修改，或在 Obsidian、GitHub 中使用。

02 · HTML

做浏览器页面

需要网页结构、样式、按钮或其他交互时使用。

03 · BOTH

先写再转换

先用 Markdown 写清内容，再让 AI 转为 HTML，最后在浏览器预览。

Markdown 注意符号后的空格和平台扩展；HTML 注意标签闭合、正确嵌套和图片的 alt 说明。

PART 04

让 AI 完成两步转换

先整理内容，再生成网页；每一步都保留原意并人工检查。

01零散记录

02整理为 .md

03核对内容

04转换为 .html

05浏览器预览

检查顺序：事实准确 → Markdown 层级清楚 → HTML 标签完整 → 浏览器显示正常。

PART 05

生成两种格式的提示词

粘贴原始记录，AI 会被要求同时输出 Markdown 和完整 HTML。

PROMPT

0 字

PRACTICE

同一内容，做成两份文件

用 20 分钟完成下面三步。

01写 Markdown 笔记＋

新建 第四课练习.md，使用标题、加粗、列表和链接。

02转换为 HTML＋

使用生成的提示词，请 AI 输出 第四课练习.html。

03对照并预览＋

用浏览器打开 HTML，确认标题、段落、列表和链接与 Markdown 一致。

FINAL CHECK

课堂小测

四题全对，完成第四课。

-- / 4

参考：CommonMark 规范 · Obsidian 中文语法文档 · MDN：HTML 基础

第五课会继续使用 HTML 制作一个完整网页。

AI 时代的两种表达语言