HTML
构成 Web 的那份文档本身。
HTML 告诉浏览器文档的每一部分是什么——标题、段落还是链接。从真正能运行的最小页面开始，学会八组标签。
HTML 是贴了标签的文档
HTML 是 HyperText Markup Language 的缩写。拿一份普通文档，给每一部分贴上 —— 这一行是标题，这一块是段落，这个词通往别处 —— 那就是 HTML。这些标签写在之间。
浏览器不会自己猜。它把标题标签里的字画得又大又粗，是因为你告诉了它那是标题。HTML 值得最先学的理由就在这里 —— 在整个 Web 里，只有这一处是在说「它是什么」，而不是「它该长什么样」。
- 标签通常成对出现：一个开始标签，一个带斜杠的结束标签，内容夹在中间。
- 标签里可以再放标签。一个页面就是一个大盒子装着小盒子，一层一层下去。
- 也有几个标签独自成立，因为它没有内容要包住，比如图片和。
- HTML 文件就是。任何都写得出来，文件名以 .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 是骨架，不是整个身体
一个页面由三种各司其职的语言组成。把它们分开，正是让站点日后还能改动的关键。
<!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 ，那正是下一个主题。
放在桌面上的文件，是只有你看得见的页面。要让别人也打开，就得有个东西守着一个，等着，把文件递出去。那个东西就是 Web 服务器，而二十行就够你自己写一个。
这一栏由你自己标记，这里不打分。
要把这一阶段标记为已理解吗？
目前还不能取消，请在真正理解后再标记。
已标记为理解
这一栏由你自己标记，这里不打分。