Day 01 | 用 HTML 写第一个网页：双击就能在浏览器打开

本文是《100天精通HTML基础入门》专栏第 01 篇，订阅专栏不迷路。

本文目录

今日目标：写出一个能双击打开的网页
概念图解：网页、浏览器、HTML 三者到底是什么关系
跟做案例：50 行注释版代码，每一行都告诉你为什么
新手常见的坑：保存成了 .txt，以及为什么字全挤在一起
课后小任务：把你的名字放进页面
明日预告：把网页的骨架搭对

今日目标

今天结束时，你桌面上会有一个 index.html，双击它，浏览器里就出现一个带标题、段落和列表的页面。不用装软件，不用联网，不用服务器。

⚠️ 这一行留给作者本人填写（我不替你编）：你第一次写出能打开的网页时，卡在"保存成什么格式"这一步花了多久？换成你的真实经历后删掉本行。

概念图解

先把三个容易混的东西拆开。

HTML 不是编程语言，它是一份给浏览器看的说明书 。你写 <h1>你好</h1>，不是"执行一段逻辑"，而是告诉浏览器"这里是一级标题，内容是你好"。它只描述内容是什么，不管怎么做。

浏览器是读说明书的那个人。Chrome、Edge、Firefox 都算，它们按同一套标准把标题、段落、列表画到屏幕上，所以同一份 HTML 在不同浏览器里长相略有差别，结构一定一致。

你写的 .html 文件，就是装说明书的那个本子，本质是一段纯文本，记事本就能打开改。

一个类比记住三层关系：HTML 是菜谱，浏览器是厨师，网页是端上桌的那盘菜。改完菜谱得让厨师重炒一遍（刷新），桌上才会换新菜。

再建立一个认知：网页不等于网站 。一个 .html 文件就是一个网页，网站只是一堆互相链接起来的网页。今天这个已经是网页了，后面 99 天是把它变多、变好看、最后放到网上。

跟做案例

最终效果：顶部一行大标题，两段自我介绍，一条横线，一个带编号的列表加一个带圆点的列表，最后一行加粗收尾。

新建一个文件，把下面整段复制进去，保存时文件名写 index.html，双击它。

复制代码

<!-- 《100天精通HTML基础入门》Day 01 · 平头哥 · 技术改变世界，勤奋改变人生 -->
<!DOCTYPE html>
<!-- 第 1 行注释是我的专栏签名，你也可以换成自己的名字，不影响页面 -->
<!-- DOCTYPE 告诉浏览器：请按 HTML5 的标准来读这份文件，别用老规矩 -->
<html lang="zh-CN">
<!-- html 是整页最外层的壳，lang="zh-CN" 声明这一页是中文 -->

<head>
  <!-- head 里放的都是"给浏览器看的信息"，页面上看不见 -->
  <meta charset="UTF-8">
  <!-- charset 一定要写，而且尽量靠前，不写中文很容易变乱码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- viewport 让手机上也能正常看，今天先照抄，Day 11 专门讲它 -->
  <title>我的第一个网页</title>
  <!-- title 是浏览器标签页上那一行字，也是别人转发时看到的标题 -->
</head>

<body>
  <!-- body 是舞台：凡是你能在页面上看见的东西，全部写在这里 -->

  <h1>你好，这是我的第一个网页</h1>
  <!-- h1 是页面最大的一级标题，一整页只放一个 -->

  <p>今天是 100 天里的第 1 天。</p>
  <!-- p 是一个段落，浏览器会自动在段落之间留空隙 -->

  <p>这个文件是我用记事本写的，保存时把扩展名改成了 .html。</p>

  <hr>
  <!-- hr 是一条横线，用来把上下两块内容分开 -->

  <h2>我今天做对的三件事</h2>
  <!-- h2 是二级标题，挂在 h1 下面，层级不要乱跳 -->

  <ol>
    <li>把文字写进 <code>&lt;p&gt;</code> 标签里</li>
    <li>把文件保存成 UTF-8 编码</li>
    <li>把扩展名从 .txt 改成 .html</li>
  </ol>
  <!-- ol 是有序列表，里面的每个 li 是一条，浏览器自动编号 -->

  <h2>接下来我想做的事</h2>

  <ul>
    <li>明天学会把网页骨架搭标准</li>
    <li>后天往页面里加自己的照片</li>
    <li>第 15 天做出自己的电子名片</li>
  </ul>
  <!-- ul 是无序列表，显示成圆点 -->

  <p>
    如果你也双击打开了这个页面，说明你已经跨过了最难的那一步。
    <strong>剩下的，就是每天 30 分钟。</strong>
  </p>
  <!-- strong 表示"这部分重要"，浏览器顺手把它加粗 -->

</body>
</html>
<!-- 数一下：每个标签都是开了就要关的，成对出现 -->

三个关键点。

第一，<!DOCTYPE html> 必须在第一行。它不是标签，是一句声明，作用是让浏览器别用老版本的兼容模式去猜你的意图。漏了它页面照样能打开，但一些细节表现会变怪，新手很难排查。

第二，<meta charset="UTF-8"> 是中文乱码的开关。文件编码和浏览器默认编码一旦对不上，你写的中文就变成方块和问号，所以这行要写在 head 靠前的位置。

第三，head 和 body 的分界线就是"给机器看"和"给人看"的分界线：编码、标题放 head，看得见的内容全放 body。标签是成对的，<p> 开了就要 </p> 关，<hr>、<meta> 这类单用标签例外。

新手常见的坑

Day 1 的翻车主要有两种。一种是保存成 .txt，另一种更靠前：文件已经改成 .html 了，所有文字却全挤在一起，敲再多回车都没用。今天先演示第二种。

复制代码

我的第一个网页
你好，今天是我写网页的第一天。
我想做一个自己的主页，放头像，放我学过的东西。
但是为什么这些字全都挤在一起了？
分段没有用，我在键盘上敲了好多次回车。
也没有标题，没有列表，什么都没有。

现象就是上面这张图：整页挤成一坨，段落没有空隙，标题和正文一样大。原因有两层。

一层是浏览器会折叠空白。你敲的回车，在浏览器眼里和空格、Tab 是同一类东西，连续多个只算一个空格，所以靠敲回车分段永远分不出来。

另一层是没有标签，浏览器就不知道结构 。它看到的只是一串字符，只能全部按普通文字平铺。正确做法是把每句话装进对应的盒子：段落用 <p>，标题用 <h1> 到 <h6>，清单用 <ul> 或 <ol>，包进去之后浏览器才知道哪里该留空隙、哪里该放大加粗。

至于 .txt 那个坑，一个动作就能避开：另存为时把"保存类型"改成"所有文件 "，文件名连后缀一起写全。Windows 默认隐藏扩展名，你以为存的是 index.html，实际是 index.html.txt，双击自然还是记事本。建议今天就勾上"显示文件扩展名"。

课后小任务

在今天这个文件里加一段"关于我"：一个 <h2> 标题，下面两个 <p>，再加一个 <ul> 写三条你的兴趣。改完保存，浏览器里按 Ctrl+R 刷新，看到变化才算完成。

明日预告

Day 02 把今天这个文件的骨架讲透：DOCTYPE、html、head、body 各管什么，为什么用 Word 写 HTML 会带进一堆看不见的格式垃圾，以及怎么做一个能复制一整年用的 base.html