HTML · 真正能跑的最小页面，以及它的用处

HTML 是贴了标签的文档

HTML 是 HyperText Markup Language 的缩写。拿一份普通文档，给每一部分贴上标签 —— 这一行是标题，这一块是段落，这个词通往别处 —— 那就是 HTML。这些标签写在尖括号之间。

浏览器不会自己猜。它把标题标签里的字画得又大又粗，是因为你告诉了它那是标题。HTML 值得最先学的理由就在这里 —— 在整个 Web 里，只有这一处是在说「它是什么」，而不是「它该长什么样」。

标签通常成对出现：一个开始标签，一个带斜杠的结束标签，内容夹在中间。
标签里可以再放标签。一个页面就是一个大盒子装着小盒子，一层一层下去。
也有几个标签独自成立，因为它没有内容要包住，比如图片和换行。
HTML 文件就是纯文本。任何编辑器都写得出来，文件名以 .html 结尾即可 —— 什么都不用安装。

把名字取对，就是这份工作的全部

正因为标签说出了每一部分的含义，读屏软件才能把标题念给看不见的访客，搜索引擎才能分清标题和菜单，你自己的样式才能一次抓住所有标题。标签写得潦草，在你自己的屏幕上照样好看 —— 悄悄用不了的是其他人。

真正能跑的最小页面

没有比这更短又诚实的例子了。存成 index.html，双击打开，浏览器就会显示一个真正的网页。你去过的每一个大站，起点都正是这副骨架。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>This is the first web page I made.</p>
  </body>
</html>

逐行来看

<!DOCTYPE html> 告诉浏览器这是现代 HTML 文档。省掉它，浏览器会退回古老的兼容模式，行为完全不同。
<html lang="ko"> 打开文档，同时声明它的语言。读屏软件据此挑选嗓音，浏览器据此判断要不要提示翻译。
<head> … </head> head 里放的是关于页面的信息，而不是页面本身。这里的东西不会出现在窗口里。
<meta charset="utf-8" /> 声明文字用 UTF-8 编码。少了这一行，中文很可能变成一排问号。
<title> … </title> 显示在浏览器标签页、书签里，并成为搜索结果标题的那句话。要为人写，不要为机器人写。
<body> … </body> body 就是页面本身。访客真正看到的一切，都放在这两个标签之间。
<h1> · <p> 一个一级标题和一个段落。到这里已经是一份完整而合法的页面了。

一分钟就能试一次

打开任意文本编辑器，把上面的内容粘进去，存到桌面上叫 index.html，然后双击。不需要服务器，不需要构建，不需要安装 —— 浏览器直接读这个文件。改一个词、保存、刷新，就能看见变化。

你真正会用到的标签

HTML 有一百多个标签，而下面这八个几乎能做出任何东西。把它们学扎实，其余的等需要时再查。

标签	用途
<h1> ~ <h6>	标题，从最重要到最次要共六级。一页只放一个最高级标题，也不要跳级 —— 这个次序是文档大纲，不是字号表。
<p>	一个文字段落。上下间距由浏览器负责，所以你永远不需要靠空行来分段。
<a href="...">	链接。地址写在 href 属性里，标签之间的文字才是访客点击的部分。
<img src="..." alt="...">	图片。src 是文件所在，alt 则向看不见它的人描述内容 —— 搜索引擎也是其中之一。
<ul> · <ol> · <li>	列表：圆点的、编号的，以及里面的每一项。菜单和步骤本来就是列表，就该写成列表。
<table> · <tr> · <td>	表格：表格本身、一行、一格。只用于真正的表格数据，绝不用来排版。
<form> · <input> · <button>	表单及其部件。页面就是靠它从访客那里收下东西并送往服务器。
<div> · <span>	两个本身没有含义的盒子：一个独占一行，一个待在行内。只有实在找不到合适的语义标签时才用它们。

属性 —— 附在标签上的额外信息

属性写在开始标签内部，形式是名字加上引号里的值。它告诉浏览器一些光靠标签名说不清的事。

href 和 src 承载地址：链接要打开的页面，图片要加载的文件。
id 给某一个元素命名，class 给一群元素命名。样式和脚本就靠这些名字找到目标。
alt、title 以及 aria- 开头的一族属性，为看不见的人描述元素。写它只花一行，却决定了谁能用你的页面。

HTML 是骨架，不是整个身体

一个页面由三种各司其职的语言组成。把它们分开，正是让站点日后还能改动的关键。

HTML —— 结构 每一部分是什么：标题、段落、列表、按钮。写一次就好，就算把所有装饰剥掉，意思依然还在。

CSS —— 外观 它长什么样：颜色、间距、大小、布局，以及在小屏幕上要变成什么样。写在 style 块或单独的 .css 文件里。

JavaScript —— 行为 会发生什么：响应点击、取回数据、在页面已经画好之后再改动它。写在 script 块或单独的 .js 文件里。

button.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Button example</title>
    <style>
      body { font-family: sans-serif; padding: 2rem; }
      button { padding: 0.6rem 1.2rem; border-radius: 999px; }
    </style>
  </head>
  <body>
    <h1 id="title">Clicked 0 times</h1>
    <button onclick="count()">Click me</button>

    <script>
      let n = 0;
      function count() {
        n = n + 1;
        document.getElementById('title').textContent = 'Clicked ' + n + ' times';
      }
    </script>
  </body>
</html>

这一个文件里三样俱全。存下来打开，按一下按钮 —— 标题里的数字会往上加。试着删掉 style 块：页面照样能用，只是朴素了些。把三者分开的意义正在于此。

那么，HTML 文件能拿来做什么

同一份文件有四种用法，而且越往后越公开。只有第二种需要 Web 服务器，那正是下一个主题。

在自己电脑上直接打开 双击文件即可。地址栏显示的是 file:// 而不是 http://，除了必须靠服务器的功能外都能用。学习和临时试验最合适。

送给别人看 把文件放到 Web 服务器读得到的位置，它就成了任何人都能访问的页面。下一个主题里的 Shell 服务器，送出去的正是这份 index.html。

做文档和报告 HTML 不只属于网站。邮件模板、可打印的报告、电子书、应用界面，底下都是 HTML —— 这正是它值得学一次的原因。

让 AI 写，然后读懂它给的东西 AI 很乐意替你写一个页面。而懂这些标签，你才检查得了结果，才能直接改一行而不是重新提问，才分得清「像样的答案」和「对的答案」。

下一步 —— 给它一个地址

放在桌面上的文件，是只有你看得见的页面。要让别人也打开，就得有个东西守着一个端口，等着请求，把文件递出去。那个东西就是 Web 服务器，而二十行就够你自己写一个。

Web 服务器