2. 第一个 HTML 页面

本节目标：动手创建第一个 HTML 文件，用浏览器打开看到效果，理解每个部分的作用。

理论学习再多，不如动手敲一遍。这一节，我们写一个最简单的 HTML 页面。

准备工具

你只需要两样东西：

代码编辑器：推荐 VS Code（免费、好用）
浏览器：Chrome、Edge、Firefox 都行

Tip

如果你还没装 VS Code，去 code.visualstudio.com 下载安装即可。它是目前最流行的代码编辑器，对新手非常友好。

创建 HTML 文件

按下面的步骤来：

新建一个文件夹，名字叫 my-web
在 VS Code 中打开这个文件夹
新建文件，命名为 index.html
粘贴下面的代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是我第一次写 HTML，感觉还不错！</p>
</body>
</html>

按 Ctrl + S 保存
找到 index.html 文件，双击用浏览器打开

你应该能看到一个白底黑字的页面，顶部有个大标题，下面有一段文字。恭喜，你的第一个网页上线了！

代码逐行解释

让我们看看每一行都在干什么：

第 1 行：<!DOCTYPE html>

这是文档类型声明，告诉浏览器”这个页面用的是现代 HTML 标准”。它必须放在文件最开头，没有结束标签。

第 2 行：<html lang="zh-CN">

这是 HTML 文档的根元素，所有其他标签都包在里面。lang="zh-CN" 告诉浏览器页面内容是简体中文。

第 3-6 行：<head> 部分

这是页面的”头部”，放一些你看不到的信息：

<meta charset="utf-8">：声明字符编码为 UTF-8，支持中文
<title>：设置浏览器标签页上显示的标题

第 7-10 行：<body> 部分

这是页面的”身体”，所有你能看到的内容都放在这里：

<h1>：一级标题，页面主标题
<p>：段落，放正文文字

第 11 行：</html>

根元素的结束标签，标志着文档结束。

Note

HTML 标签不区分大小写，<BODY> 和 <body> 效果一样。但约定俗成都用小写，这样代码更统一、好读。

动手试试看

打开你刚才创建的 index.html，试着改一些内容：

把 <h1> 里的文字改成你自己喜欢的标题
再添加一个 <p> 段落，写点其他内容
保存后刷新浏览器，看看效果

<p>这是我添加的第二段文字。</p>

Tip

每次改完代码，记得保存（Ctrl+S），然后刷新浏览器（F5 或 Ctrl+R）才能看到最新效果。

常见的新手错误

忘记写结束标签

<p>这段文字没有结束标签

虽然浏览器通常会自动补全，但养成好习惯能避免奇怪的排版问题。

标签嵌套顺序错误

<!-- 错误示范 -->
<p>这是<strong>加粗的文字</p></strong>

<!-- 正确写法 -->
<p>这是<strong>加粗的文字</strong></p>

记住一个原则：后打开的标签先关闭，像俄罗斯套娃一样层层嵌套。

小结

用代码编辑器创建 .html 文件，浏览器打开就能看到效果
<!DOCTYPE html> 声明文档类型
<head> 放元信息，<body> 放可见内容
改完代码要保存再刷新

下一节我们深入聊聊 <!DOCTYPE html> 到底有什么用。