一、你需要的两个工具
前端开发，本质上就是用特定的语法（HTML、CSS、JavaScript）写作文本文件，然后交给浏览器去解析和渲染。所以你需要的东西只有两样：写代码的工具和看效果的工具。
1. 浏览器——看效果的工具
浏览器是你接触最频繁的前端工具。它的核心工作，是把你写的代码变成肉眼可见的页面。
推荐使用 Google Chrome 或 Microsoft Edge。
这两个浏览器的内核相同（Chromium），对最新 Web 标准的支持最及时，内置的开发者工具也非常强大。后续我们调试 CSS、查看网络请求、分析 JavaScript 运行，都会用到它。
如果你用的是 Mac，自带的 Safari 也可以，但建议逐渐过渡到 Chrome 或 Edge。如果你是 Windows 用户，系统自带的 Edge 已经完全够用，不必额外下载。
浏览器在这里扮演三个角色：
- 解析器：把你写的 HTML、CSS、JS 代码解析成浏览器能理解的内部结构。
- 渲染器：把解析后的结构绘制成屏幕上可见的像素。
- 调试器：按下 F12 打开开发者工具，你可以实时看到代码哪里出错了、样式为什么没生效。
2. 代码编辑器——写代码的工具
你需要一个趁手的编辑器。强烈推荐 Visual Studio Code（简称 VS Code）。
下载地址：https://code.visualstudio.com/
为什么是 VS Code：
- 完全免费，Windows / Mac / Linux 全平台支持。
- 轻量，启动快，对初学者没有负担。
- 插件生态极其丰富，后续可以安装中文语言包、代码格式化工具、实时预览工具等。
- 内置终端，可以在编辑器里直接查看代码运行结果。
安装后的第一件事：装中文语言包。 打开 VS Code，点击左侧的扩展图标（四个方块），在搜索框输入 “Chinese”，找到 “Chinese (Simplified) Language Pack”，点击安装，然后重启 VS Code，界面就变成中文了。
如果你暂时不想装任何软件：用电脑自带的纯文本编辑器也可以。Windows 自带的记事本，Mac 自带的文本编辑，都能写 HTML。但需要注意：保存文件时，必须把文件后缀名从默认的 .txt 改成 .html，否则浏览器不会把它当成网页来解析。
二、创建你的第一个 HTML 文件
现在我们来实际操作。
第 1 步：新建文件
在桌面或任意一个你能找到的文件夹里，新建一个文本文档。
Windows 用户：右键 → 新建 → 文本文档。
Mac 用户：打开“文本编辑” → 新建文稿 → 在菜单栏选择“格式” → “制作纯文本”。
第 2 步：重命名
把新建的文件命名为 index.html。
这里有一个关键点：你必须把文件后缀名从 .txt 改为 .html。Windows 系统默认会隐藏已知文件类型的后缀名，如果看不到 .txt，请在文件夹顶部菜单栏点击“查看”，勾选“文件扩展名”，然后再修改。
为什么叫 index？这是约定俗成的命名。当你访问一个网站时，服务器会默认返回 index.html 作为首页。虽然你现在只是在本地打开文件，但养成这个习惯有好处。
第 3 步：打开并编写代码
右键点击 index.html → 打开方式 → 选择 VS Code（或记事本）。
输入以下这段代码。请手敲，不要复制粘贴。 这是你建立肌肉记忆的第一步，也让你有机会注意到每一个字符。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个页面</title>
</head>
<body>
<h1>你好，前端！</h1>
<p>这是我的第一个网页。</p>
</body>
</html>第 4 步：保存并在浏览器中打开
在 VS Code 里按 Ctrl + S（Mac：Cmd + S）保存文件。
然后回到文件夹，双击 index.html。它会自动用默认浏览器打开。
你会看到：
- 浏览器标签页上显示“我的第一个页面”。
- 页面正中间，有一行大字“你好，前端！”。
- 大字下面，有一行小字“这是我的第一个网页。”。
如果你看到了这些，恭喜——你已经成功写出了一个前端页面。虽然它很简陋，但它的的确确是一个完全符合标准的 HTML 文档。你所看到的每一个字，都是你亲手写的代码渲染出来的。从这一刻起，你已经不再是一个零基础的“观望者”，而是一个能控制浏览器输出内容的人。
三、逐行拆解这 11 行代码
下面，我们一行一行来看，每行代码到底是什么意思。这是本系列最重要的学习方法：不放过任何一个字符，不理解透彻不往下走。
第 1 行：<!DOCTYPE html>
<!DOCTYPE html>- 中文翻译：文档类型声明。
- 含义：这一行告诉浏览器：“我这个文件是按照最新的 HTML5 标准写的，请用标准模式来解析。”
- 为什么必须有：历史原因。浏览器厂商为了向前兼容几十年前的老网页，设计了两套解析模式：标准模式和怪异模式。如果网页开头没有
<!DOCTYPE html>，浏览器就会切换到怪异模式，模拟老版本浏览器的解析规则，导致你的页面在某些情况下布局错乱、样式不一致。写这一行，就等于告诉浏览器：“别猜了，我是新网页。” - 记忆方式：这行是每个 HTML 文件的“身份证”，必须放在第一行，而且写法固定，就是
<!DOCTYPE html>，没有别的变体。
第 2 行：<html lang="zh-CN">
<html lang="zh-CN"><html>：这是整个 HTML 文档的根元素。页面中所有的其他标签，都必须写在这一对<html>和最后一行的</html>之间。可以把它理解为整个网页的“最外层容器”。lang="zh-CN"：这是<html>标签的一个属性。lang是 language（语言）的缩写，zh-CN代表“中文（中国大陆）”。- 作用：告诉搜索引擎和屏幕阅读器这个页面的主要语言是什么。对 SEO（搜索引擎优化）和可访问性（盲人用的屏幕阅读器需要知道用什么语言来朗读）有帮助。
- 术语解释——属性：HTML 标签可以有“属性”，写在开始标签的尖括号里，格式是
属性名="属性值"。一个标签可以有多个属性，用空格隔开，例如<html lang="zh-CN" dir="ltr">。
第 3 行：<head>
<head>- 中文翻译：头部。
- 含义：
<head>是网页的头部区域。写在<head>和</head>之间的内容，不会直接显示在页面的白色可视区域里。 - 那它放什么：它存放的是给浏览器和搜索引擎看的“配置信息”和“元数据”，比如页面标题、字符编码声明、CSS 样式引用、SEO 描述等等。
- 比喻：如果把网页比作一个人，
<head>就是大脑——它储存着关于这个人的信息（名字、性格、背景），但外人不能直接看到大脑。<body>才是身体——别人看得见的部分。
第 4 行：<meta charset="UTF-8">
<meta charset="UTF-8"><meta>：元数据标签。“元数据”的意思是“关于数据的数据”，也就是描述网页本身属性的一些信息。<meta>标签和别的标签不一样，它没有闭合标签，是单标签（也叫自闭合标签），所有信息都在属性里写完。charset="UTF-8"：这是<meta>标签的一个属性。charset是 character set（字符集）的缩写，UTF-8是目前互联网上最通用的字符编码标准，能覆盖全世界几乎所有语言的文字——包括英文、中文、日文、阿拉伯文，甚至 emoji。- 为什么必须有：如果没有这一行，浏览器可能会用错误的编码（比如老旧的 GBK 或 Latin-1）去解读你的中文字符，导致页面上出现一堆看不懂的乱码。无论你的页面是否包含英文以外的字符，写上这一行都是最佳实践。
- 记忆方式：
<meta charset="UTF-8">= “请用万国语言编码来读我的网页”。
第 5 行：<title>我的第一个页面</title>
<title>我的第一个页面</title>- 含义：定义了整个网页的标题。
- 显示在哪里：它不是显示在页面白色内容区，而是显示在浏览器顶部标签页上。你现在可以看一眼自己浏览器窗口的标签，上面显示的正是你打开的网页的
<title>。此外，当你把网页加入书签（收藏夹）时，默认的名字也是这个<title>。 - 重要性：一个描述性的标题对 SEO 至关重要，它也会出现在搜索引擎的搜索结果列表中。不要把你的
<title>写成“未命名文档”，应该取一个能反映页面内容的名字。
第 6 行：</head>
</head>- 含义：闭合
<head>标签，表示网页的头部区域到此结束。头部里该写的信息都写完了，接下来就进入网页的“身体”——真正的可视内容区域。
第 7 行：<body>
<body>- 中文翻译：身体。
- 含义：
<body>是网页的主体区域。你在浏览器窗口里能看到的一切内容——文字、图片、视频、按钮、输入框、表格——都必须放在<body>和</body>之间。 - 这就是前端和后端的分界线：后端负责处理服务器上的数据和逻辑，前端负责处理显示在用户屏幕上的东西。而前端的起点，就是
<body>标签。你之后写的所有 HTML 元素，几乎都诞生于<body>内部。
第 8 行：<h1>你好，前端！</h1>
<h1>你好，前端！</h1><h1>：一级标题标签，是 HTML 提供的六级标题中等级最高、最重要的一个。HTML 标题标签从<h1>到<h6>，数字越小，层级越高，默认的字号也越大。- 含义：表示这是整个页面的首要标题。一般情况下，一个页面应该只有一个
<h1>，用来概括这个页面的核心主题。搜索引擎非常重视<h1>的内容，用来判断页面是讲什么的。 - 默认样式：浏览器会给
<h1>加上默认的大字号和加粗效果，但你后面可以通过 CSS 来改变它的大小、颜色、字体等。 - 嵌套关系：这行代码在
<body>内部、在</body>闭合之前，所以它会显示在页面上。
第 9 行：<p>这是我的第一个网页。</p>
<p>这是我的第一个网页。</p><p>：段落标签，英文全称 paragraph（段落）。- 含义：定义了一段普通的正文文字。一段文字放在一对
<p>里，浏览器会自动在段落之间留出间距，让它和上下的其他内容隔开。 - 默认样式：浏览器会给
<p>加上上下外边距（margin），所以两段文字之间不需要手动空行。 - 术语理解——块级元素：
<h1>和<p>都属于“块级元素”。块级元素的特点是独占一行，宽度默认撑满整个父容器。两个块级元素不会并排，而是上下堆叠。你不需要理解这个术语的所有细节，现在只需要有一个印象：有些标签会“换行”，有些不会——这就是块级元素和行内元素的区别。我们下一篇会详细讲。
第 10 行：</body>
</body>- 含义：闭合
<body>标签，表示网页的主体内容到此结束。所有可见内容都写在了这行之上。
第 11 行：</html>
</html>- 含义：闭合
<html>标签，表示整个 HTML 文档结束。浏览器读到这里就知道：“好的，这个网页的代码全部解析完毕，可以开始渲染了。”
四、这节课你应该记住的三个核心概念
概念一：HTML 标签的双标签和单标签
绝大多数 HTML 标签都是双标签——有一个开始标签和一个闭合标签，比如 <h1> 和 </h1>、<p> 和 </p>、<body> 和 </body>。
少数标签是单标签（也叫自闭合标签），没有对应的闭合标签，所有信息通过属性来完成，比如 <meta>。我们后面还会学到 <br>（换行）和 <img>（图片），它们也是单标签。
概念二：标签的嵌套规则
HTML 标签可以像俄罗斯套娃一样一层层嵌套：
<body>
<h1>标题</h1>
<p>这是一段文字。</p>
</body><body> 是外层容器，<h1> 和 <p> 是它的子元素。
嵌套规则：正确嵌套是“先进后出”——先打开的后关闭：
- 正确：
<body><h1>文字</h1></body> - 错误：
<body><h1>文字</body></h1>（交叉了，这是不允许的）
概念三：属性的写法
属性永远写在开始标签的尖括号里，格式是 属性名="属性值"，如果有多个属性，用空格隔开：
<html lang="zh-CN" dir="ltr">
<meta charset="UTF-8">属性值通常用双引号包裹（单引号也可以，但双引号是主流习惯）。
五、你的动手练习
阅读和听懂只是第一步。大脑以为懂了，手指往往还没懂。请务必完成以下练习，这是知识从“别人的话”变成“你的能力”的关键一步：
练习 1：手敲代码
新建一个文件叫 practice1.html。手敲（不要复制粘贴）上面的 11 行代码。即使你已经读懂了每一行，也请逐字符敲进去。你可能会第一次注意到尖括号的走向、斜杠的位置、等号两边没有空格等细节。这些细节，光看是记不住的。
练习 2：修改内容
在你自己手敲的版本里做以下修改：
- 把
<h1>里的文字改成你自己的名字（比如<h1>张三的前端学习页面</h1>）。 - 把
<p>里的文字改成“我正在系统地学习前端开发，这是第一课。” - 在已有的
<p>下面，再添加一个新段落：<p>这是我手动添加的第二段文字。</p>。
保存，刷新浏览器，检查效果。你应该能看到三个内容：标题、第一段、第二段。
练习 3：制造一个错误
故意把代码改错，看看会发生什么。比如：
- 把
</h1>的斜杠删掉，变成<h1>，保存并刷新。发生了什么？ - 把
<meta charset="UTF-8">里的"UTF-8"改成"gb2312"，看看中文是否变乱码。 - 删掉整个
<!DOCTYPE html>这一行，观察页面有没有肉眼可见的变化（可能没有，但你至少知道了它的存在意义）。
理解错误、修复错误，是编程能力成长的必经之路。 不要害怕出错，每修好一个错误，你对代码的掌控力就强一分。
六、本篇小结
这一篇你学会了：
- 前端开发只需要两个工具：浏览器和代码编辑器。
- HTML 文件的后缀是
.html，用浏览器直接打开即可看到效果。 <!DOCTYPE html>是文档类型声明，必须放第一行。<html>是根元素，<head>放配置信息，<body>放可见内容。<meta charset="UTF-8">防止中文乱码。<title>定义浏览器标签页上的标题。<h1>是一级标题，<p>是段落。- 双标签和单标签的区别，嵌套规则，属性的写法。
从下一行代码都看不懂，到能逐行解释一个 11 行的网页——这是你前端学习之路上真正的第一块砖。虽然简单，但它足够稳固。
下一篇预告
下一篇，我们将深入学习更多 HTML 标签：<h2> 到 <h6> 的标题层级体系、<br> 和 <hr> 的用法、注释标签 <!-- -->，以及一个贯穿前端布局的重要概念——块级元素与行内元素的区别。你会弄明白：为什么 <p> 和 <h1> 会独占一行，而 <a> 链接却能和别的文字排在同一行？
前端·零基础入门专题，每周更新。
暂无评论内容