一、先认识 HTML：网页的"骨架"
HTML 全称超文本标记语言 （HyperText Markup Language）。你可以把它想象成盖房子的骨架和砖块：
-
房子 = 你在浏览器里看到的网页
-
HTML = 房子的承重墙、房间格局（决定哪里是客厅、哪里是卧室）
-
CSS = 房子的装修、油漆、壁纸（负责好不好看，下次学）
-
JavaScript = 房子的水电、开关、智能家电（负责交互功能，以后学）
核心特点 ：HTML 不是编程语言，而是标记语言------它用一个个"标签"告诉浏览器："这是标题"、"这是段落"、"这里要换行"。
二、标签的基本规则：像拼积木一样简单
在写内容前，先记住 3 条铁律：
| 规则 | 说明 | 示例 |
|---|---|---|
| 尖括号包裹 | 标签名放在 < > 里 |
<html>、<p> |
| 双标签 | 大多数成对出现：开始标签 + 结束标签（结束标签带 /） |
<h1>内容</h1> |
| 单标签 | 少数标签只有开始，没有结束（自闭合） | <br>、<meta> |
重要习惯 ：HTML 不区分大小写（<H1> 和 <h1> 都行），但行业规范统一用小写，请从一开始就养成习惯。
三、网页的四大支柱：必背的文档结构
每一个标准网页，都像遵循同一张"建筑蓝图"，由四个核心部分组成：
html
我的网页
<!DOCTYPE html> ------ 施工许可证
-
这是什么？ 文档类型声明，必须写在文件第一行（前面不能有空格）
-
通俗理解：就像盖房子前要申请许可证，告诉浏览器："请按照最新的 HTML5 标准来解析我！"
-
注意 ：它不是标签，不需要闭合标签。
<html> ------ 地基地界
-
作用 ：整个网页的根容器，所有其他标签都必须包在里面（像俄罗斯套娃的外层）
-
属性
lang="zh-CN"：告诉浏览器"这个页面是简体中文"，有助于搜索引擎识别和屏幕阅读器朗读。
<head> ------ 隐藏档案室
-
作用 ：存放网页的后台配置 ，这些内容不会显示在网页上，但至关重要。
-
必须放的两样东西：
-
<meta charset="UTF-8">：超级重要！ 设置字符编码，防止中文变成乱码（□□□）。为保万无一失，最好放在<head>内的最前面。 -
<title>页面标题</title>：显示在浏览器标签页上的名字（比如"百度一下，你就知道"）。
-
-
通俗理解：就像房子的产权证、设计图纸，访客看不到，但房子不能没有。
<body> ------ 客厅与房间
-
作用 ：网页的可见内容区，所有你想让用户看到的文字、图片、按钮，都必须写在这里。
-
通俗理解：这是装修好的客厅，摆放家具（内容）的地方。
四、常用文本标签：往客厅里放家具
学会骨架后，我们在 <body> 里添加内容，先掌握最基础的三大文本标签：
1. 标题标签 <h1> 到 <h6> ------ 门牌号
用来定义标题，h1 最大最重要，h6 最小。
html
一级标题（主标题，一个页面通常最好只有一个）
二级标题（章节标题）
三级标题（小节标题）
关键规范：
-
<h1>一个页面通常最好只有一个（像书的封面标题），这有助于搜索引擎理解网页主题，是最佳实践。 -
不要跳级使用（比如用了 h1 直接跳 h3，最好按 h1→h2→h3 顺序）。
2. 段落标签 <p> ------ 文本盒子
用来装大段文字，自动在段落间留出间距。
html
这是第一个段落。浏览器会自动在段落前后添加空白间距，让阅读更舒适。
这是第二个段落。你会发现两段之间有明显的距离，这就是 p 标签的特点。
特点：
-
它会自己占满一整行的宽度，就像一个独立的文本盒子。
-
自动处理：段落内文字过多会自动换行，多个空格会被合并为一个。
3. 换行标签 <br> ------ 强制回车键
在段落内部强制换行，不产生新段落，没有额外间距。
html
这是第一行
这是强制换行后的第二行（还在同一个段落里）
连续两个 br 就像按了两次回车，产生空行效果
重点区分：<br> vs <p>
-
<p>= 换段落（有上下间距，适合文章分段） -
<br>= 换行（无间距，适合诗歌、地址等同一段内的换行） -
<br>是单标签 ：在 HTML5 中，写<br>即可。你有时可能会看到<br />这种写法（源自 XHTML 规范），两种浏览器都能识别，但<br>是更简洁的推荐写法。
五、动手实战：创建你的第一个网页
现在，请打开电脑自带的记事本 （Windows）或文本编辑（Mac），跟我一起操作：
步骤 1：复制完整代码
把下面这段代码一字不差地复制进去：
html
我的第一个HTML页面
欢迎来到 HTML 世界
<h2>什么是 HTML？</h2>
<p>HTML 是网页的骨架，它用标签组织内容。<br>就像搭积木，一块一块搭建出完整的页面。</p>
<h2>今天的收获</h2>
<p>1. 学会了网页的四大结构</p>
<p>2. 掌握了 h1-h6 标题标签</p>
<p>3. 明白了 p 和 br 的区别</p>
<h6>------ 学习笔记 by 初学者</h6>步骤 2：保存为网页文件
-
点击"文件" → "另存为"
-
文件名 ：
index.html（注意后缀必须是.html） -
保存类型 ：选择"所有文件"（.）
-
编码 ：选择 UTF-8（防止乱码的关键！）
-
保存位置：桌面（方便找到）
步骤 3：在浏览器中查看
双击保存的 index.html 文件，它会自动用浏览器打开。你会看到：
-
浏览器标签栏显示"我的第一个HTML页面"
-
页面有层级分明的标题和段落
-
第二段文字内有一行强制换行
🎉 恭喜你！这就是你亲手创建的第一个网页！
六、 新手最常犯的 5 个错误
| 错误 | 后果 | 正确做法 |
|---|---|---|
忘写 <!DOCTYPE html> |
浏览器进入"怪异模式"，显示异常 | 永远放在文件第一行 |
忘写 <meta charset="UTF-8"> 或位置靠后 |
可能导致中文乱码 □□□ | 必须在 <head> 内最前面加上 |
一个页面用多个 <h1> |
不利于搜索引擎优化，结构不清晰 | 全页通常只设 1 个主标题（h1） |
把 <br> 写成 <br></br> |
代码不规范，尽管部分浏览器能容错 | <br> 是单标签，不需要闭合标签 |
| 标签交叉嵌套 | 页面错乱，解析出错 | 必须像套娃一样完全包裹：<p><strong>内容</strong></p> ✔️，<p><strong>内容</p></strong> ❌ |
七、核心知识速记卡
文档结构口诀：
<!DOCTYPE>声明在最前，<html>包两边；
<head>里面做配置，charset和title放里面；
<body>里写内容，用户才能看得见。
文本标签对比：
| 标签 | 类型 | 作用 | 使用场景 |
|---|---|---|---|
<h1>-<h6> |
双标签 | 六级标题，h1最大 | 文章标题、章节名 |
<p> |
双标签 | 段落，有上下间距 | 大段文字、文章正文 |
<br> |
单标签 | 强制换行，无间距 | 诗歌换行、地址换行 |
记住：学 HTML 最好的方法就是动手改代码、刷新浏览器看效果。你现在掌握的是网页开发的根基，继续加油