HTML 是什么

这是什么：HTML（超文本标记语言，HyperText Markup Language）= 用一对对标签把内容包起来，告诉浏览器"这是什么"。

为什么用：没有 HTML，浏览器就没有内容可以显示，网页也不存在——你现在看到的每个页面，剥掉样式和脚本，底下全是标签。

如何用：从一行 <p>我是一个段落</p> 开始，页面里直接改、点「▶ 运行」就能看效果。

一句话解释

HTML 是用来"描述网页"的语言。 你现在看到的这个页面，本质就是一份 HTML 文档，浏览器把它翻译成了你眼前的样子。

拆开名字看

HyperText Markup Language，超文本标记语言：

• 超文本（HyperText）：不只是文字，还能包含图片、链接、视频——点一下就能跳到另一个页面的"超级文本"
• 标记（Markup）：用一对对"标签"把内容包起来，告诉浏览器"这是什么"

标签长什么样

<p>我是一个段落</p>

• <p> 是开始标签
• </p> 是结束标签（多一个斜杠 /）
• 中间的 我是一个段落 是内容
• 三者合起来叫一个元素（element）

亲眼看看

下面的运行框里就是一段真实的 HTML。点「▶ 运行」，右边就是浏览器的渲染结果：

<h1>你好，世界！</h1>
<p>这是一段话。</p>
<button>我是一个按钮</button>

浏览器是翻译官

你写的 HTML 是给浏览器（Chrome、Edge、Firefox）看的。浏览器读取 HTML 文件，按照标签的含义把页面"画"出来：

你写的 HTML 文件 ──▶ 浏览器解析 ──▶ 你看到的页面

所以同一个 HTML 文件，在手机和电脑上可能长得不一样——翻译官不同，渲染细节略有差异，但内容一致。

❓ 常见问题

Q1：页面把 <p>我是一个段落</p> 原样显示出来，尖括号全都看得见？

<p>我是一个段落</p>

原因：九成是尖括号用了中文全角的 ＜＞——浏览器只认英文半角的 < >，全角字符在它眼里就是普通文字。 修复三步：① 切到英文输入法；② 把 ＜ ＞ 全部替换成半角 < >；③ 刷新页面，确认文字恢复了该有的样式。 举一反三：写代码时"中文标点"是头号翻车原因，引号、逗号、括号同理——符号一律用英文的。

Q2：忘写结束标签 </h1>，页面会怎样？

原因：浏览器不报错，只会"好心"往下猜，后面的内容可能被整个卷进大标题里：

我的蛙塘日记 记录每天喂鱼的日常 ←—— 本该分开的标题和段落，挤成了一行巨字

修复三步：① 按 F12 打开开发者工具，在 Elements 面板找到这个元素；② 看它是否把不该包的内容包了进去；③ 补上 </h1>，刷新确认。 举一反三：凡是"内容被莫名放大、变色、挤在一起"，先怀疑上一个标签没闭合。

Q3：标签写成大写 <P> 行不行？

原因：HTML 的标签名不区分大小写，<P> 浏览器也认识；但全球代码都约定统一小写，混用会让代码难读、对照教程时容易看花眼。 修复三步：① 检查已写的标签；② 全部改成小写；③ 养成"标签只按小写键"的习惯。 举一反三：约定大于聪明——守约定，别人和三个月后的你才看得懂。

Q4：标签名拼错（如 <paragraf>），浏览器为什么不报错？

原因：浏览器是宽容的翻译官，遇到不认识的标签就当成一个没有样式的普通元素画出来——文字照常显示，但标题变大、分段这些效果全没了：

这是一段文字 ←—— 显示正常，但没有任何段落/标题效果

修复三步：① 效果不对先怀疑拼错标签名；② F12 → Elements 面板看浏览器实际识别成了什么；③ 改回正确拼写。 举一反三：HTML 的错不靠报错靠肉眼，"渲染不对 → 打开 F12"要变成条件反射。

⚠️ 新手翻车现场

翻车一：中文尖括号，标签集体失效

＜p＞今天也要加油鸭！＜/p＞

翻车现象：

＜p＞今天也要加油鸭！＜/p＞

原样显示，标签没消失，文字也没分段。逐行分析：这一行的尖括号是中文输入法打出的全角字符 ＜＞，长得像标签，浏览器却只当它是文字；真正的标签必须用半角 < >。正确写法：

<p>今天也要加油鸭！</p>

翻车二：少写一个 >，整行内容人间蒸发

<h1我的蛙塘日记
<p>记录每天喂鱼喂虾的日常。</p>

翻车现象：

（"我的蛙塘日记"这行字凭空消失，页面上只剩下一句日常）
记录每天喂鱼喂虾的日常。

逐行分析：第 1 行 <h1 后面丢了 >，浏览器只好把 <h1我的蛙塘日记 整段当成一个叫「h1我的蛙塘日记」的陌生标签处理，文字全被吞进标签名里，一个字都没渲染出来；第 2 行本身没毛病，是受第 1 行连累才显得突兀。教训：写完开始标签，立刻补上 > 和结束标签，再往中间填内容。正确写法：

<h1>我的蛙塘日记</h1>
<p>记录每天喂鱼喂虾的日常。</p>

📦 完整小示例

存成 frog.html 双击打开（或粘进本章运行框），这就是你亲手拼的第一张网页：

<h1>呱小吉闪亮登场</h1>
<p>大家好，我是一只住在代码世界的小青蛙。</p>
<p>今天是我学 HTML 的第一天，请多关照！</p>

<h2>我的爱好</h2>
<p>晒太阳、捉虫子、趴在荷叶上看晚霞。</p>

<h2>我的目标</h2>
<p>三十天吃透 HTML，亲手搭出第一个网页。</p>

<button>给呱小吉点个赞</button>

人工校验：5 组标签全部开闭配对，元素之间全部是并列兄弟关系，无交叉嵌套。

运行后在浏览器会看到：

顶部一行特大的标题「呱小吉闪亮登场」；
下面两行普通文字的自我介绍，各占一行，段间有空隙；
接着是稍小一号的标题「我的爱好」加一行文字；
同样结构的「我的目标」板块再来一组；
页面底部有一个灰色小按钮，写着「给呱小吉点个赞」。

逐段中文精讲

• 第 1 行：<h1> 是全页最大的标题，一个页面通常只用一次，相当于文章的"书名"。
• 第 2~3 行：两个 <p> 各包一句话，段落之间自带空隙，不用手动敲空行。
• 第 5~9 行：<h2> + <p> 的组合用了两次——<h2> 是第二级标题，比 <h1> 小一圈，专门用来给内容分板块；中间的空行只是给人看的，浏览器分段靠的是标签。
• 第 11 行：<button> 画出一个真按钮。现在点它没反应——它还没学会"做事"，学到后面章节就能让它一按弹出一句话。

跑通后做个小实验：把第 1 行的 <h1> 改成 <h3> 再刷新——标题一下子小了三号。记住这个手感：标签里的数字越大，标题越小。

🎯 什么时候用它

• 任何网页的骨架：博客文章页、公司官网、购物页面，剥掉颜色和动画，底下全是"标签包内容"这一招。
• 写给别人看的文档：GitHub 的 README、技术文档站，本质都是用标签给文字分标题、分段落。
• 排查网页问题：页面排版乱了，按 F12 看它的 HTML 结构，八成是某个标签没闭合。

📝 本章小结

• HTML 用一对对标签描述网页：开始标签 + 内容 + 结束标签，合称一个元素。
• 尖括号必须英文半角，标签名统一小写。
• 浏览器是宽容的翻译官：写错不报错但效果跑偏，主动按 F12 检查。
• <h1> 大标题、<h2> 小标题、<p> 段落、<button> 按钮，四样就能拼出一张完整小页。
• 记忆锚点：标签像保鲜盒——开始标签是盖，结束标签是底，内容夹中间；盖底配对，内容才不洒。

小练习

在运行框里把 <h1> 改成 <h2>，点运行，看看标题发生了什么变化？再试试改成 <h6>。

下一章：第一个网页，亲手写出完整的网页 🐸