HTML骨架

每个网页都有一副隐藏的骨架

📖知识引入

🏷️标签成对出现

HTML用尖括号写成：<html>开始、</html>结束，像括号必须配对。忘了「关门」（闭标签），后面的内容全会乱套！

🗂️三大件：html/head/body

html是整栋楼；head是楼顶招牌（放标题等看不见的信息）；body是住户房间（放所有看得见的内容）。每个网页都是这个套路。

🌳树形结构

标签一层套一层，像家谱：html是爷爷，head和body是爸爸，h1、p是孩子。浏览器按这棵「家谱树」理解网页。

📏常用标签就十几个

h1-h6标题、p段落、img图片、a链接、div分区……记住这十几个，就能看懂大部分网页结构。

🤖AI最懂骨架

你描述结构（「上面导航、中间大标题、下面三段介绍」），AI秒写标签。你只要能看懂AI写的树，就算入门！

💡

HTML标签像套娃：开标签和闭标签必须成对！

🔍解剖一个网页的骨架

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>大家好，我是小明</h1>
    <p>这是我用AI做的第一个网页！</p>
  </body>
</html>

看懂这棵树，你就看懂了HTML：

<html> 👴 爷爷（整栋楼）
 ├── <head> 👨 爸爸1（楼顶招牌）
 │    └── <title> 标签页上的标题
 │
 └── <body> 👨 爸爸2（住户楼层）
      ├── <h1> 页面上的大标题
      ├── <p> 一段文字
      └── <p> 又一段文字

⚠️ 分辨小测验：

head里的内容→显示在浏览器标签页

body里的内容→显示在页面正中间

这就是为什么网页标题有的在「标签页」、有的在「页面里」—— 它们根本住在不同的房间！

右边的代码就是一个最小完整网页，双击保存运行，看看效果！

🎯小测验

第1题：网页中所有看得见的内容应该放在哪个标签里？

第2题：「<p>你好</p>」这种写法体现了HTML的什么特点？

第3题：标签页上显示的网页标题来自哪里？

📝本课知识点

✓标签成对：<开始>…</结束>
✓html是整栋楼，head放信息，body放内容
✓HTML是一棵层层嵌套的树
✓常用标签十几个就能入门
✓AI写骨架，你负责看懂和验收

第6课完成！继续探索下一课吧 🚀

🧱

上一课

第5课

下一课

第7课

🧱