HTML

HTML 是贴了标签的文档

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

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

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

逐行来看

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

你真正会用到的标签

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

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

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

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

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 服务器，那正是下一个主题。