1. HTML 是什么？

本节目标：搞清楚 HTML 是什么、它和 CSS/JS 的关系，以及”HTML5”这个词现在到底意味着什么。

你打开浏览器看到的每一个网页，底层都是一份 HTML 文档。HTML 就是网页的骨架，它告诉浏览器”这里是一段标题""那里是一张图片”。

HTML 的全称

HTML 全称是 HyperText Markup Language，中文叫”超文本标记语言”。

拆开来看：

超文本（HyperText）：文字之间可以互相跳转，就是链接
标记（Markup）：用标签给内容做标注
语言（Language）：一套规则体系

HTML 不是编程语言，它没有循环、条件判断这些逻辑。它只做一件事：描述结构。

Tip

把 HTML 想象成房屋的框架，CSS 是装修，JavaScript 是智能家居。三者各司其职。

HTML 和 CSS、JS 的关系

一个完整的网页，通常是这三样东西的组合：

技术	职责	比喻
HTML	结构	骨架
CSS	样式	皮肤和衣服
JavaScript	行为	大脑和神经

HTML 负责”有什么”，CSS 负责”长什么样”，JavaScript 负责”能做什么”。

一个最直观的 HTML 例子

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好，世界</h1>
  <p>这是我的第一个 HTML 页面。</p>
</body>
</html>

把上面代码保存为 index.html，双击用浏览器打开，你就能看到效果了。

关于”HTML5”这个词

先说结论：HTML5 现在更多是一个历史名词。

早期的 HTML 有明确的版本号：HTML 2.0、HTML 3.2、HTML 4.01。2008 年左右，W3C 开始制定 HTML5 规范，2014 年正式发布。

但到了 2021 年 1 月，W3C 废止了所有带版本号的 HTML 标准。现在的唯一标准是 WHATWG 维护的 HTML Living Standard（活标准），它没有版本号，持续滚动更新。

Note

你还会经常听到”HTML5”这个词，它通常指”现代 HTML 标准及生态”，包括语义标签、音视频、Canvas 等特性。本教程也会沿用这个叫法，但心里要清楚：现行标准是 Living Standard。

HTML 文件长什么样

HTML 文件本质是纯文本，后缀通常是 .html 或 .htm。两种后缀没有区别，.html 更常见。

HTML 文档由元素组成。元素的基本结构：

<标签名>内容</标签名>

比如 这是一段文字， 是开始标签， 是结束标签，中间是内容。

有些元素不需要内容，比如  （换行）、<img>（图片），叫空元素（或自闭合元素）。

为什么用 HTML

简单说，因为浏览器只认 HTML。

你在网上看到的任何网页，最终都会被浏览器解析成 HTML 再渲染出来。不管你用 Vue、React 还是什么框架，打包后输出的依然是 HTML。

HTML 是前端开发的基石。学好了它，后面的 CSS 和 JavaScript 才能跟上。

小结

HTML 是超文本标记语言，描述网页结构
它和 CSS（样式）、JavaScript（行为）并称网页三件套
“HTML5”现在指代现代 HTML 生态，正式标准是 HTML Living Standard
HTML 文件是纯文本，由标签元素组成

下一节，我们动手写出你的第一个 HTML 页面。