读完本文你会：能看懂任何网页的"源代码"，亲手写出一张带样式、能点击的网页，弄明白 HTML / CSS / JavaScript 到底谁管什么事，顺便学会比 HTML 更好写的 Markdown。全程不需要任何编程基础。

一、网页的本质：一个带格式的文本文件

你在浏览器里看到的每一个网页——无论是 Apple 官网还是这篇博客——本质上都是一个纯文本文件。浏览器做的事只有一件：读这个文件，按里面的格式"画"出来给你看。

这个格式就叫 HTML（HyperText Markup Language，超文本标记语言）。“标记语言"的意思就是：用一对对标签把内容"框"起来，告诉浏览器"这段是标题”“那段是正文”。

先看一个完整但最小的 HTML 文件，所有网页都是这个骨架：

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>我的第一个网页</title>  </head>  <body>    <h1>你好，世界！</h1>    <p>这是我的第一个网页。</p>  </body></html>

把这 10 行存成 index.html，双击用浏览器打开，就出现了标题和一行正文。下面逐行看懂它：

第一行：<!DOCTYPE html>

这一行不是标签，而是一句声明：告诉浏览器"我这份文件是 HTML"。它保证浏览器按标准规则来解析，而不是瞎猜。如今所有网页第一行几乎都是它，照抄即可。

<html>：整个文件的"总容器"

所有内容都被  <html> </html> 一前一后包在中间。注意标签成对出现：<html> 是开始标签，</html> 是结束标签（多了个斜杠 /）。

标签上还能挂属性（attribute），给标签补充说明。比如：

<html lang="zh-CN">

lang 是 language（语言）的缩写，lang="zh-CN" 表示"这个页面是简体中文"。属性写在开始标签里，写法永远是 属性名="值"。这会影响搜索引擎、翻译工具、读屏软件对页面的判断。

<head> 与 <body>：一个管"配置"，一个管"内容"

这是全篇最重要的一个观念，记牢它，后面就顺了：

• <head> 头部
  ：写的是用户看不到的页面配置。里面可以放字符集、标题、样式等"幕后信息"。
• <body> 主体
  ：写的是用户真正看到的内容。标题、正文、图片、按钮，全都放这里。

我们用的两个元素解释一下：

缩进是什么？层级关系的"可视化"

代码里的缩进（Tab 或空格）对浏览器没有任何作用——删掉也不影响显示。它纯粹是写给人看的：缩进越深，表示嵌套得越里层。

<html>              ← 第 1 层├── <head>          ← 第 2 层（html 的孩子）│   ├── <meta>      ← 第 3 层（head 的孩子）│   └── <title>└── <body>          ← 第 2 层    ├── <h1>    └── <p>

有没有缩进、用几个空格，浏览器都不在意；但成对的标签必须一开一闭、层层套好，这决定了浏览器能不能正确理解你的结构。养成规范缩进的习惯，代码出问题时才一眼能看出哪对标签没闭合。

二、给页面"化妆"：CSS 样式

现在的页面太素了——白底黑字，跟记事本没区别。要让页面好看，需要 CSS（Cascading Style Sheets，层叠样式表），它专门负责颜色、字号、边框、间距这些外观。

CSS 有两种用法，初学者先掌握最简单的一种：把样式写在一个 <style> 标签里，放进 <head>。

看下面的改造版。为了让内容变成一张圆角"卡片"，我用 <div> 把 h1 和 p 包了起来，再给这个 <div> 加了个类名（class）叫 card：

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>我的第一个网页</title>    <style>      /* 选中所有 class="card" 的元素，应用下面的样式 */      .card {        background: #f0f4ff;       /* 背景色：淡蓝 */        border: 2px solid #d9d9d9; /* 边框：2 像素灰色 */        border-radius: 14px;       /* 圆角：12 像素 */        padding: 24px;             /* 内边距：内容离边框 24 像素 */        max-width: 400px;          /* 最大宽度 */        margin: 40px auto;         /* 上下留白 40，左右自动居中 */      }</style>  </head>  <body>    <div class="card">      <h1>你好，世界！</h1>      <p>这是我的第一个网页。</p>    </div>  </body></html>

刷新浏览器，原来的文字就变成一张居中的淡蓝卡片了。

这里有两个新概念，是理解 CSS 的关键：

1. 选择器（selector）：你要"打扮"谁？

.card 前面那个点 .，意思是"选出所有 class="card" 的元素"。CSS 的通用规则就一句话：

选择器 {  属性: 值;  属性: 值;}

• 点号 . 开头的，匹配类名，如 .card
• 直接写标签名的，匹配所有同名标签，如 body { ... }
• 井号 # 开头的，匹配 ID，下一节会用到

2. <div> 与"包一层"的思路

<div>（division，区块）本身不带任何样式，就是用来把若干元素圈在一起的"空盒子"。为什么这么做？因为 .card 这条样式要作用于"一整块"（标题 + 正文），而不是单个元素。于是我用一个 <div class="card"> 把 h1 和 p 装进去，样式就统一落在整块上了。

注意层级：h1、p 现在成了 div 的子元素，所以要再缩进一层。上面代码里 <div> 比 <h1> 靠外一档，就是这个关系的体现。

一句话总结 CSS 的用法：在 <head> 里用 <style> 定义规则，规则负责把某些元素"画"成什么样子。

三、让页面"活"起来：JavaScript

现在的卡片很好看，但它是死的——点它没反应。要让页面能响应点击、按键这些动作，需要 JavaScript（常简称 JS），它负责行为和交互。

流程分三步，缺一不可：

第 1 步：给要改动的元素一个"身份证" ID

我打算让点击按钮后，h1 的文字改变。先在 h1 上加一个独一无二的 id：

<h1 id="message">你好，世界！</h1>

id 是元素在整个页面里的唯一编号，方便 JS 精确找到它。页面里不能有两个相同的 id（不像 class 可以重复用）。

第 2 步：放一个按钮，并声明"点击后做什么"

HTML 里加一个 <button>：

<button onclick="changeText()">点我</button>

此时按钮能显示，但点击没反应——因为光写了 onclick，还没定义 changeText 到底是什么。

onclick 是个事件属性：它声明"当点击这个元素时，执行后面的函数"。changeText() 里的括号表示"调用"一个叫 changeText 的函数。函数是什么？可以理解成一段提前写好的、能被调用的动作。浏览器只负责"点击时去调用"，至于调用了之后干嘛，得我们写。

第 3 步：用 <script> 把 changeText 这个函数"造"出来

把脚本放在 </body> 前面。放这里的原因：脚本要操作页面元素，放在 body 最后能保证元素都已经被浏览器读到了：

<script>  function changeText() {    document.getElementById('message').textContent =      '你刚刚触发了一段 JavaScript';  }</script>

解释这几行的意思：

• function changeText() { ... }
  ：定义一个名叫 changeText、点击时要执行的函数。
• document
  ：代表整个网页文档。
• document.getElementById('message')
  ：按 ID message 在文档里找到那个 h1 元素。
• .textContent
  ：这个元素的文字内容。把它赋值为新字符串，就是把 h1 里的文字换掉。

合起来完整文件是这样：

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>我的第一个网页</title>    <style>      .card {        background: #f0f4ff;        border: 2px solid #d9d9d9;        border-radius: 14px;        padding: 24px;        max-width: 400px;        margin: 40px auto;      }</style>  </head>  <body>    <div class="card">      <h1 id="message">你好，世界！</h1>      <p>点下面的按钮，看看会发生什么。</p>      <button onclick="changeText()">点我</button>    </div>    <script>      function changeText() {        document.getElementById('message').textContent =          '你刚刚触发了一段 JavaScript';      }</script>  </body></html>

保存、刷新，点击"点我"，标题瞬间变成了"你刚刚触发了一段 JavaScript"。这就是交互。

补充两个细节：

1. HTML 里多个空格、换行不影响效果
   ，浏览器会自动忽略折叠。所以代码里随便排版都行——但请保持整洁。
2. 事件不止"点击"一种
   。键盘按键、鼠标移入移出、页面加载完成……都算事件。机制完全一样：元素上挂 onxxx="函数名()"，浏览器检测到对应事件就去调用。

事件从发生到生效的完整链路是：

用户点击按钮  → 浏览器监听到 click 事件  → 找到按钮上的 onclick  → 执行 changeText() 函数  → 函数按 id 找到 h1  → 改写它的 textContent  → 页面文字变了

四、扒开网页看内脏：浏览器开发者工具

我们写的代码只是"定义"，真正逐条执行、把页面画出来的，是浏览器。想确认浏览器到底怎么理解你的代码？用开发者工具。

打开方式：在页面空白处右键 → 选择"检查"（Inspect），或直接按 F12。任何网站都能看，比如 B 站、Apple 官网，操作一致。

工具里最常用的是 Elements（元素）面板：

• 左侧能看到整个页面的 HTML 结构树，就是浏览器解析后的结果。你可以点开箭头展开，看到每个标签的父子关系。
• 选中 body 或 .card 这类元素，右侧会列出它生效的每一条 CSS 样式——比如背景是什么颜色、圆角是多少像素。所有样式都能现场改。

开发者工具最大的价值：即时试错。 看到"圆角 14px"不好看？直接把右侧的 12 改成 24、48，页面立刻变圆——不用改文件、不用刷新。但注意：刷新页面后一切回到代码里的初始值。工具里改的只是"临时效果"，确认满意后，记得把值抄回真正的代码文件里。

顺带一提：做数据采集时，也可以从 Elements 里的 HTML 结构找到图片、视频等资源的真实链接。

五、一张表理清：HTML、CSS、JavaScript 各管什么

新手最常犯的错就是把三者混为一谈。其实分工极其清晰，可以记一个比喻：

• HTML = 骨架
  ：决定"有什么、长什么样"——标题、正文、按钮，都是它搭的。
• CSS = 装修
  ：决定"看起来好不好看"——颜色、圆角、间距。
• JavaScript = 神经
  ：决定"会不会动"——点击、弹出、数据加载。

同样放在一个 index.html 里，各自用标签区分：

三者可以互相配合：HTML 定下结构 → CSS 让它变美 → JS 让它响应你。

六、为什么 HTML 在 AI 时代反而更值得学

HTML 在互联网诞生之初就存在，几十年间经历过多次版本更迭：微软一度想推行自己的格式，还出现过 XHTML 想挑战它。最终 HTML 统一了"网页格式"这个标准。我们现在用的是 HTML5，21 世纪初确定，近十几年作为标准变化不大——学一次，长期受用。

过去大家觉得 HTML 只是网页开发者的工具。但在 AI 时代，它反而焕发了新的生命力，原因有三：

1. 足够强大
   。连 Apple 官网这种极致复杂、精美的展示都能做。作为"工具文档"的载体，HTML 不输给任何其他格式。
2. AI 最熟悉的就是它
   。AI 的训练数据绝大部分来自互联网，而互联网上几乎全是 HTML。给 AI 看 HTML，是它最擅长的语言。
3. 运行环境要求极低
   。任何一台电脑都有浏览器，但不一定装了 Word、PPT、WPS。一个 .html 文件，双击即用，跨平台、免安装、随时可分享。

一个很现实的场景：现在很多人让 AI 直接生成 HTML 格式的幻灯片（Slider）。AI 写 HTML 幻灯片比做 PPT 快得多，改样式也方便（改几行 CSS 就行）。HTML 不只是为了做网页，更是为了更高效地和 AI 协作。这套写 HTML 幻灯片的做法，正在成为职场里一个明确的趋势。

所以结论是： 不要求你背熟语法——写代码的活可以交给 AI。但你一定要理解 HTML 是什么、能干什么、怎么和 AI 配合，这比记住标签本身重要得多。

想查语法去哪里？W3School

推荐 W3School.com.cn（国际版 w3schools.com）。它有十几年历史，里面系统介绍了各种 HTML 元素、CSS 怎么定义、JavaScript 怎么写，而且支持直接在网页上编辑代码、即时看到渲染效果，是零基础查手册 + 动手练的好地方。

七、写给人类看的"轻量 HTML"：Markdown

HTML 对 AI 和浏览器非常友好，但对人类写起来太不自然——写一段普通文字都要包 <p>、</p>，写标题要写 <h1>标题</h1>，太啰嗦。

Markdown 就是为解决这个问题而生的：一种更自然、更接近人书写习惯的轻量标记语言。文件后缀是 .md，GitHub 上最常见的 README.md 就是它。

HTML 里麻烦的事，Markdown 用极简符号搞定。下面是同一段内容在两种格式下的对比：

几个常用规则：

• 标题
  ：# 到 ######，对应 h1~h6。
• 段落
  ：用空行分隔（注意，不是换行——单换行在 Markdown 里不生效，需要空一行才算新段落）。
• 列表
  ：-  加空格。
• 代码
  ：行内代码用反引号包裹 `代码`；整块代码用三个反引号包裹。
• 加粗 / 斜体
  ：**粗**、*斜*。

在 VS Code 里打开 .md 文件，按 Ctrl + Shift + V（Mac 为 Command + Shift + V）就能在"编辑模式"和"预览模式"之间切换，所见即所得。

Markdown 的典型用途：

1. 写博客、写代码仓库的说明文档（README）。
2. 给 AI 布置复杂任务时写 prompt
   ——用 # 分层、用 - 列要点（比如"需要注意以下几点："下面逐条列出），AI 理解起来远比一段糊在一起的文字清晰。某种意义上，用结构化 Markdown 表达需求，就是和 AI 高效协作的基本功。

想深入，直接搜"Markdown 教程"，网上教程非常多，半小时就能上手。

八、下一步练什么？

1. 动手做一遍
   ：按本文顺序，从最小 HTML 文件开始，一步步加上 CSS 和 JS，亲手感受"内容 → 美化 → 交互"的三层进化。光看永远学不会，改错几处比全对一遍收获更大。
2. 打开 F12 解剖一个真实网站
   ：随便打开一个你常逛的网站，看它的 <head>、<body>、类名结构，试着在工具里把某个圆角、颜色改着玩。
3. 交给 AI 一张"毛坯房"
   ：用一句人话让 AI 帮你生成一张带样式的 HTML 卡片，然后对照本文，把每一行都看懂。下一次，你就可以自己改它了。

阅读原文：点击这里​