认识 HTML - HTML 教程

讲解

HTML（HyperText Markup Language，超文本标记语言）是网页的骨架。1991 年蒂姆·伯纳斯-李发明它的时候，目的很朴素：让科研人员能把一篇篇带链接的文档放到互联网上互相引用。三十多年后，全世界几乎所有的网页——新闻、购物、视频、社交——底层仍然是 HTML。它不决定页面好不好看（那是 CSS 的事），也不负责交互逻辑（那是 JavaScript 的事），它只回答一个问题：这段内容是什么？是标题、段落、图片、表格，还是一个可以点的链接？

HTML 不是编程语言，而是标记语言。你用一对对「标签」把内容包起来，比如 <p>你好</p> 告诉浏览器「这是一段文字」，浏览器再把标签解析成一棵文档树（DOM），最后渲染成你看到的页面。因为不是编程语言，HTML 没有变量、循环、条件判断，学起来上手很快；但要写好并不容易——几百个标签里挑最合适的那个，让页面结构清晰、对搜索引擎和屏幕阅读器友好，这才是本教程要教的重点。

现在通行的 HTML 版本是 HTML5，由 WHATWG 以「活标准」（Living Standard）的方式持续维护，不再有 HTML6 这样的大版本号，浏览器会不断跟进实现新特性。学习本教程你只需要两样东西：一个现代浏览器（Chrome、Edge、Firefox 均可）和一个文本编辑器（下一章会推荐）。每一章的示例都可以直接保存成 .html 文件双击打开看效果，请务必动手试。

示例

把下面代码保存为 hello.html，用浏览器打开，你就写出了人生第一个网页：

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

<h1> 是一级标题，<p> 是段落。标签成对出现，内容夹在中间，这就是 HTML 的基本形态。

常见坑

把 HTML 当编程语言学：它没有逻辑控制能力，不用纠结「学不会编程怎么办」，先掌握标记思维即可。
被浏览器的容错惯坏：标签不闭合、嵌套错乱，浏览器往往也能显示，但那是它在替你猜。猜的结果未必符合预期，写规范的结构才是正道。
死记标签不理解语义：几十个常用标签足够日常开发，关键是理解每个标签「表达什么」，而不是背一遍标签大全。
只看不练：HTML 是技能，每个示例自己敲一遍、改一改、刷新看变化，比读十遍教程有效。

小结

HTML 是描述网页结构的标记语言，与负责样式的 CSS、负责交互的 JavaScript 并称前端三剑客。现行标准是持续演进的 HTML5。下一章准备好编辑器和浏览器，正式开始写代码。