真正能跑的最小页面

一张页面上，标题、段落、图片和列表都各自贴着一个小名牌，后面的浏览器窗口里，同一个页面被整整齐齐地画了出来。 — 给每个部分都贴上名牌：标题、段落、图片、列表。看着名牌，把每个部分画出来。

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

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="en">打开文档，同时声明它的语言。据此挑选嗓音，浏览器据此判断要不要提示翻译。
<head> … </head> 里放的是关于页面的信息，而不是页面本身。这里的东西不会出现在窗口里。
<meta charset="utf-8" />声明文字用编码。少了这一行，中文可能变成认不出的乱码。
<title> … </title>显示在浏览器页、书签里，并成为搜索结果标题的那句话。要为人写，不要为机器人写。
<body> … </body>body 就是页面本身。访客真正看到的一切，都放在这两个标签之间。
<h1> · <p>一个一级标题和一个段落。到这里已经是一份完整而合法的页面了。

一分钟就能试一次

打开任意文本，把上面的内容粘进去，存到桌面上叫 index.html，然后双击。的“文本编辑”要先选「格式 → 制作」，的保存时把保存类型设为“所有文件”。不需要，，不需要安装 —— 浏览器直接读这个文件。改一个词、保存、刷新，就能看见变化。

你真正会用到的标签

HTML 的远远超过一百个，但下面这八组几乎能做出所有东西。把它们学扎实，其余的等需要时再查。

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

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

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

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

初学者常犯的错误

忘了写结束标签。少了 </p> 或 </a>，浏览器只能猜它在哪里结束，结果后面整页都可能变成一个长长的链接。
按字的大小来选标题。是大纲里的级别，不是字号。想让字变小，就用去改。
img 不写 alt。这样和搜索引擎就完全不知道这张图片是什么。如果图片只是装饰，就写 alt=""。
href 或 src 的路径写错。同一个文件夹里的文件直接写 name.html 就行，前面加斜杠（/）表示从网站的最顶层开始。双击打开文件时，斜杠会指向的最顶层，图片就会显示不出来，所以不要加斜杠。图片显示不出来时，先检查路径。

HTML 是骨架，不是整个身体

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

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

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

—— 行为 会发生什么：点击、取回、在页面已经画好之后再改动它。写在或单独的 .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

HTML 是贴了标签的文档