HTML 简介

在动手装编辑器之前,我们先认识一下 HTML 到底是什么、为什么值得学、能用它做什么。理解了背景,学习的时候会更有的放矢。

HTML 是什么?

HTML 是 HyperText Markup Language(超文本标记语言)的缩写。它不是编程语言,不会"计算",而是用一组"标签"来描述页面上每一块内容是什么:这是标题、那是段落、这里是一张图、那里是一个输入框。浏览器读取这些标签,然后把内容渲染成你看到的网页。

"超文本"(HyperText)指的不是普通文本,而是可以互相链接的文本——点击一个词就能跳到另一份文档,这是互联网的灵魂。"标记"(Markup)指的是用标签给内容打上"是什么"的标记。

诞生故事:从物理实验室到全球地基

HTML 诞生于 1989 ~ 1991 年,由 Tim Berners-Lee 在欧洲核子研究中心(CERN)发明。他当时的初衷很朴素:世界各地的物理学家需要交换论文文档,但不同电脑、不同软件之间格式互不相通。他设想了一种"用标签描述结构、用超链接互相关联"的文档格式,于是 HTML 和 HTTP、URL 一同诞生,这就是万维网(World Wide Web)的雏形。

谁也没想到,这个为物理学家服务的"文档格式",三十多年后长成了整个互联网的地基。Tim Berners-Lee 因此被尊称为"万维网之父"。

HTML 的发展史

HTML 的核心特点

第一个 HTML 页面

说了这么多,先看一眼代码。HTML 的"Hello World"长这样:

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

把上面代码保存为 index.html,双击文件就会用默认浏览器打开,你就能看到自己的第一个网页了。不需要编译、不需要服务器,这是 HTML 最友好的地方。

理解"标签"和"元素"

这是 HTML 最核心的概念。看下面这段代码:

<p>这是一个段落。</p>
<!--   ^开始标签   ^结束标签 -->
<!-- p 是标签名,"你好"是元素内容 -->

<h1>一级标题</h1>
<a href="https://example.com">一个链接</a>
<!--  ^^^^^^^^^^^^^^^^^^^^ 属性写在开始标签里 -->

<img src="cat.jpg" alt="一只猫">
<!-- img 是自闭合标签,没有结束标签 -->

几个要点:

HTML 都用在哪?典型应用场景

凡是在浏览器里打开的东西,底层都是 HTML。具体来说:

HTML vs CSS vs JavaScript

前端三件套各司其职,这是必须分清楚的:

建议学习顺序:HTML → CSS → JavaScript。本系列只讲第一层。

该不该学 HTML?

如果你想从事前端开发、全栈开发、移动开发、UI 设计、产品经理、运营,HTML 几乎是必修课。即使你完全不写代码,懂得看 HTML 也能让你在用网站构建器、改博客模板、配置邮件营销时游刃有余。学完本系列,你将能独立写出一个完整的静态网页、看懂任何网站的源代码结构、为后续学习 CSS 和 JavaScript 打下坚实基础。

← 返回 HTML 教程目录

下一篇 编辑器与浏览器 →

✈️💬