从零开始学前端 | 第二章：第一个 HTML 页面
本章定位
上一章我们先建立了前端学习的整体地图，知道了网页、浏览器、服务器和前端开发之间的关系，也理解了 HTML、CSS、JavaScript 的基本分工。
从这一章开始，我们正式进入编码环节。
这一章的目标很明确：你要亲手写出自己的第一个 HTML 页面。这个页面不需要好看，也不需要复杂，它的价值在于帮你理解一个网页文件最基本的结构。
对纯小白来说，第一次写代码时最容易紧张。其实不用怕，HTML 是非常适合入门的起点，因为它更像是在描述页面内容，而不是一上来就写复杂逻辑。
本章学习目标
学完这一章后，你应该能做到：
- 创建一个最基础的 HTML 文件。
- 理解 HTML 文档的基本结构。
- 认识
<!DOCTYPE html>、html、head、body的作用。 - 使用标题、段落、换行、水平线等基础标签组织内容。
- 理解标签、元素、属性这三个基础概念。
- 独立写出一个简单的“自我介绍”页面。
一、HTML 是什么
HTML 的全称是HyperText Markup Language，中文通常叫“超文本标记语言”。
这个名字听起来有点绕，但你现在可以先把它理解成：
HTML 是用来描述网页结构和内容的语言。
它主要回答一个问题：
页面上有什么？
比如：
- 页面标题是什么
- 页面里有哪些段落
- 哪些内容是列表
- 哪些地方是图片
- 哪些文字可以点击跳转
HTML 不负责让页面变漂亮，也不负责复杂交互。它最核心的任务是把内容组织成有意义的结构。
二、先准备一个 HTML 文件
我们先创建一个最简单的 HTML 文件。
1. 创建文件
在你的学习目录里新建一个文件，文件名可以叫：
index.html这里有两个点要注意：
- 文件名建议先用英文小写。
- 文件后缀必须是
.html。
很多新手会不小心创建成index.html.txt，这样浏览器就不会把它当成真正的 HTML 文件。创建后可以确认一下文件名是不是准确显示为index.html。
2. 写入最基础的 HTML 结构
把下面这段代码写进index.html：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><title>我的第一个网页</title></head><body><h1>你好，前端世界</h1><p>这是我写的第一个 HTML 页面。</p></body></html>保存文件后，用浏览器打开它。你应该能看到一个标题和一段文字。
如果页面能正常显示，说明你已经完成了第一个网页。
三、理解 HTML 文档的基本结构
刚才那段代码就是一个最小可用的 HTML 页面。我们现在逐行拆开理解。
1.<!DOCTYPE html>：告诉浏览器这是 HTML5 文档
<!DOCTYPE html>放在文件最开头。
它的作用是告诉浏览器：
请按照现代 HTML 标准来解析这个页面。
你暂时不需要记住它背后的历史，只要先记住：
- 它通常写在 HTML 文件第一行。
- 它不是普通标签。
- 新建 HTML 页面时建议保留它。
2.<html>：整个页面的根元素
html标签包住了整个网页内容：
<htmllang="zh-CN">...</html>它表示：
这里面是一整个 HTML 页面。
其中lang="zh-CN"是一个属性，用来说明页面主要语言是简体中文。
这个属性不会直接改变页面显示效果，但它对浏览器、搜索引擎、翻译工具和辅助阅读工具都有帮助。
3.<head>：放页面的元信息
head里通常放的是给浏览器和搜索引擎看的信息，而不是直接显示给用户看的正文内容。
例如：
<head><metacharset="UTF-8"/><title>我的第一个网页</title></head>这里有两个常见内容：
meta charset="UTF-8"：告诉浏览器用 UTF-8 编码解析页面，避免中文乱码。title：设置浏览器标签页上显示的标题。
注意：title不是页面正文里的大标题，它显示在浏览器标签页上。
4.<body>：放用户真正看到的页面内容
body里放的是页面主体内容。
例如：
<body><h1>你好，前端世界</h1><p>这是我写的第一个 HTML 页面。</p></body>你在浏览器页面里看到的标题、文字、图片、按钮等，大多数都写在body里。
可以先记成一句话：
head主要给浏览器看，body主要给用户看。
四、认识标签、元素和属性
HTML 里有三个非常基础的概念：标签、元素、属性。
这三个词后面会不断出现，所以这一章先把它们分清楚。
1. 什么是标签
标签是 HTML 用来标记内容含义的语法。
例如：
<p>这是一段文字。</p>这里的<p>和</p>就是标签。
大多数标签都有开始标签和结束标签：
<标签名>内容</标签名>其中：
<p>是开始标签。</p>是结束标签。- 中间是这个标签包裹的内容。
2. 什么是元素
元素通常指从开始标签到结束标签之间的整体。
例如：
<h1>我的标题</h1>这一整段就是一个h1元素。
简单理解：
- 标签更强调语法标记。
- 元素更强调页面中的一个完整结构。
初学阶段不需要纠结得太细，但要知道它们不是完全同一个概念。
3. 什么是属性
属性是写在开始标签上的补充信息，用来描述这个元素的额外特征。
例如：
<htmllang="zh-CN">这里的lang="zh-CN"就是属性。
再比如：
<ptitle="这是一段提示文字">把鼠标放到这段文字上试试看。</p>这里的title属性会在鼠标悬停时显示提示。
属性通常由属性名和属性值组成：
属性名="属性值"要注意：
- 属性写在开始标签中。
- 属性值建议用英文双引号包起来。
- 一个标签可以有多个属性。
五、常见基础标签
接下来我们认识几个最常见、最适合新手先掌握的基础标签。
1. 标题标签：h1到h6
HTML 提供了六级标题：
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>一般来说：
h1是页面最重要的标题。h2是一级小节标题。h3是更细一层的小标题。- 后面的层级依次递减。
标题标签不是单纯为了让文字变大，而是用来表达内容层级。
所以不要因为想让字变大，就随便使用h1。后面学习 CSS 后，文字大小应该交给 CSS 控制。
2. 段落标签：p
段落标签用于表示一段正文。
<p>我正在学习前端开发。</p><p>这是我的第一个 HTML 页面。</p>每个p元素通常表示一段完整文字。
如果有两段意思不同的文字，建议写成两个p，而不是全部塞到一个段落里。
3. 换行标签：br
br用来在文本中强制换行。
<p>第一行文字。<br/>第二行文字。</p>它是一个空元素，通常不需要结束标签。
不过要注意：
- 不要用很多个
br来制造大块间距。 - 页面间距后面应该主要用 CSS 控制。
初学阶段可以知道它的存在，但不要过度依赖。
4. 水平线标签：hr
hr用来表示内容之间的主题分隔。
<h2>个人介绍</h2><p>我正在学习前端。</p><hr/><h2>学习目标</h2><p>我希望能独立做出一个网页。</p>它通常会在页面上显示一条横线。
和br类似，hr也不需要结束标签。
5. 注释：<!-- -->
注释是写给开发者看的说明，浏览器不会把它显示到页面上。
<!-- 这里是页面主标题 --><h1>我的自我介绍</h1>注释适合用来说明代码意图，但不要把每一行都注释一遍。
好的注释应该解释“为什么这样写”，而不是重复“这行代码做了什么”。
六、动手写一个自我介绍页面
现在我们用这一章学到的内容，写一个简单的“自我介绍”页面。
你可以把index.html改成下面这样：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><title>我的自我介绍</title></head><body><h1>我的自我介绍</h1><h2>基本信息</h2><p>大家好，我是一名前端初学者。</p><ptitle="这是我的学习状态">我正在学习 HTML，希望能做出自己的第一个网页。</p><hr/><h2>学习目标</h2><p>我的第一个目标是理解网页结构，并能独立写出简单页面。</p><p>接下来我会继续学习 CSS。<br/>等掌握基础样式后，我会尝试美化这个页面。</p></body></html>这段代码覆盖了本章的主要内容：
- HTML 基本结构
- 页面标题
- 一级标题和二级标题
- 段落
title属性- 换行
- 水平线
现在你可以保存文件，并用浏览器打开它。
七、如何在浏览器中观察你的页面
写完页面后，不要只看“有没有显示出来”，还要学会简单观察。
1. 检查浏览器标签页标题
看一下浏览器顶部标签页，是否显示为：
我的自我介绍如果显示正确，说明title生效了。
2. 检查页面正文内容
页面中应该能看到：
- 一个一级标题
- 两个二级标题
- 多段文字
- 一条水平线
如果某些内容没有显示，优先检查：
- 标签有没有写完整
- 保存文件后有没有刷新浏览器
- 文件是不是正确的
.html后缀
3. 尝试鼠标悬停提示
把鼠标移动到这段文字上：
<ptitle="这是我的学习状态">我正在学习 HTML，希望能做出自己的第一个网页。</p>你应该能看到浏览器显示一段提示文字。
这说明属性可以为元素补充额外信息。
八、新手常见问题
1. 为什么我写的中文变成乱码
通常是因为缺少下面这一行：
<metacharset="UTF-8"/>它告诉浏览器用 UTF-8 编码解析页面。
建议新建 HTML 文件时都保留它。
2. 为什么我的页面标题没有显示在正文里
如果你写的是：
<title>我的网页</title>它只会显示在浏览器标签页上，不会显示在页面正文中。
如果你想在页面里显示标题，需要写在body里，例如：
<h1>我的网页</h1>3. 为什么有的标签没有结束标签
像br、hr、meta这类标签通常不包裹正文内容，所以它们属于空元素。
你可以先接受这个规则：
- 包裹内容的标签，通常有开始和结束。
- 不包裹内容的标签，可能没有单独结束标签。
后面你见得多了，自然会越来越熟悉。
4. 标签大小写有要求吗
HTML 标签名不严格区分大小写，但实际开发中推荐全部使用小写。
推荐：
<p>这是一段文字。</p>不推荐：
<P>这是一段文字。</P>统一小写更符合现代前端开发习惯，也更容易阅读。
5. 空格和换行会不会影响页面
HTML 会把很多连续空格和换行合并显示。
例如，你在代码里写很多空格，页面中通常不会原样显示很多空格。
所以代码里的缩进和换行，更多是为了让开发者阅读方便。
这也是为什么我们推荐写清晰缩进。
九、写 HTML 时的基础习惯
从第一天写 HTML 开始，就建议养成几个好习惯。
1. 保持结构完整
一个基础 HTML 页面建议包含：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><title>页面标题</title></head><body>页面内容</body></html>不要为了省事只写一小段正文内容。
2. 使用清晰缩进
缩进不会直接影响页面显示，但会极大影响代码可读性。
推荐使用两个空格或四个空格缩进，关键是保持一致。
例如：
<body><h1>标题</h1><p>正文内容。</p></body>比下面这样更容易阅读：
<body><h1>标题</h1><p>正文内容。</p></body>3. 标题层级不要乱跳
标题标签是表达内容结构的，不只是控制字号。
推荐顺序：
<h1>页面主标题</h1><h2>第一部分</h2><h3>第一部分里的小节</h3><h2>第二部分</h2>不推荐一上来就乱用：
<h4>页面主标题</h4><h1>小节标题</h1>4. 属性值使用双引号
推荐：
<ptitle="提示文字">这是一段文字。</p>不推荐：
<ptitle=提示文字>这是一段文字。</p>统一使用双引号，后面写复杂属性时更稳妥。
十、本章实践练习
这一章的练习目标是让你真正写出页面，而不是只看懂示例。
练习 1：手写一个自我介绍页面
请新建一个index.html文件，内容至少包含：
- 浏览器标签页标题
- 一个页面主标题
- 至少两个二级标题
- 至少三段正文
- 一个
title属性 - 一条水平线
建议主题：
- 我的自我介绍
- 我的学习计划
- 我的兴趣爱好
练习 2：修改页面标题和正文层级
在练习 1 的基础上，尝试修改：
title中的内容h1的内容h2的数量- 段落顺序
观察浏览器中哪些地方发生了变化。
重点感受：
title影响浏览器标签页。h1、h2、p影响页面正文结构。
练习 3：练习添加属性
给页面中的不同元素添加title属性。
例如：
<h1title="这是页面最重要的标题">我的自我介绍</h1><ptitle="这是第一段介绍">我正在学习前端开发。</p>然后把鼠标移动到这些文字上，观察提示效果。
练习 4：故意制造一个小错误
请故意删掉一个结束标签，例如：
<p>这是一段没有结束标签的文字。然后刷新浏览器，观察页面是否还能显示。
做这个练习的目的不是鼓励写错，而是让你知道：
- 浏览器有一定容错能力。
- 但不能因为浏览器能显示，就认为代码结构是正确的。
练习结束后，请把错误修回来。
十一、学习重点提示
这一章最重要的不是背下所有标签，而是理解 HTML 的基本结构。
请重点记住：
- 一个 HTML 页面通常包含
DOCTYPE、html、head、body。 head主要放页面元信息，body主要放用户看到的内容。- 标签用来标记内容含义，元素是一个完整结构，属性是补充信息。
- 标题标签要表达内容层级，不要只当成“放大文字”的工具。
- HTML 的目标不是随便让内容显示出来，而是让页面结构清晰。
如果你现在只记一句话，可以记住：
HTML 是网页的结构骨架，写 HTML 时要先考虑内容层级。
十二、本章小结
这一章我们正式写出了第一个 HTML 页面。
你已经学习了：
- 如何创建
index.html - HTML 文档的基础结构
DOCTYPE、html、head、body的作用- 标题、段落、换行、水平线等常见基础标签
- 标签、元素、属性的区别
- 如何完成一个简单的自我介绍页面
这一步看起来简单，但它是后面所有网页开发的起点。之后你写的任何复杂页面，本质上都是从这些基础结构一步步扩展出来的。
十三、课后思考题
请你思考下面几个问题：
- 为什么
title标签里的内容不会显示在网页正文中？ h1和p的区别是什么？它们只是字号不同吗？- 如果一个页面没有
meta charset="UTF-8"，可能会出现什么问题？ - 为什么我们不建议用很多个
br来控制页面间距？
建议你把答案写进学习笔记里。写不完整没关系，重要的是开始用自己的语言解释概念。
十四、下一章预告
下一章我们会继续学习：
从零开始学前端 | 第三章：常用 HTML 内容标签
你会认识更多常见标签，比如列表、链接、图片、表格和表单，并开始写出内容更丰富的网页。