幼儿园前端 #01：HTML vs CSS 是什么？（骨架 vs 装修，一分钟分清）1）一句话结论（先背住） HTML：

跟着做完，你会得到一个有标题/段落/按钮的小页面，并且能用一句话说清 HTML/CSS 区别。不安装 Visual Studio Code 也能做完本集详细的视频教程bilibili：www.bilibili.com/video/BV15E…

html代码

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML vs CSS</title>

  <!-- CSS：负责“变好看 + 摆整齐” -->
  <style>
    body { font-family: sans-serif; padding: 24px; }
    h1 { font-size: 28px; margin: 0 0 12px; }
    p { margin: 0 0 16px; line-height: 1.6; }
    button { padding: 10px 14px; border: 0; border-radius: 8px; cursor: pointer; }
  </style>
</head>

<body>
  <!-- HTML：负责“放东西 + 说明这是什么” -->
  <h1>我是标题（HTML 放的东西）</h1>
  <p>我是段落（HTML 说明这是一段话）</p>
  <button>我是按钮</button>
</body>
</html>

1. 直接实现

桌面右键新建 my-first-page 的文件夹
新建一个记事本(mac系统), 打开 TextEdit 编辑器
设置 Format(格式) - 选择 “制作纯文本” (Make Plain Text)
将上面的代码粘贴到 TextEdit 编辑器中
保存为 index.html 格式 （文件后缀是html格式)

右键文件用谷歌浏览器打开(其他浏览器也可以)，你会得到一个有标题/段落/按钮的小页面，如下：

2. HTML vs CSS是什么?

HTML：负责“放东西 + 说明这是什么” （内容与结构，像房子的骨架）
CSS：负责“变好看 + 摆整齐” （样式与布局，像房子的装修）