HTML入门骨架
先看见网页上到底有什么
暂时不谈职业角色，只谈你看见什么：屏幕上的界面几乎由三种元素组成—— Frame（框）（包住一组东西的区域）、文字、图形。
这一套东西在设计工具里分别对应Frame、Text、Rectangle。
那浏览器怎么知道哪里是框、哪里是字？答案就藏在 HTML 的写法里——下一节揭开。
视觉三原语对照表
| 视觉上 | 干什么 | HTML 里大致是 |
|---|---|---|
| 框（Frame） | 框住一组东西；可以再套框 | 容器标签： |
| 字（Text） | 落字：标题、正文、按钮文案 |
|
| 图形 | 矩形色块、图标、插图、照片 |
|
容器标签就是视觉里的「框」
第 1 节说的「框」，在 HTML 里就是容器标签：<div>、<section>、<header>。它们在结构上做同一件事：框住一组内容，可以再套一层。外观靠 CSS、不靠标签名；名字的差别主要是语义（如 header ≈ 页头、section ≈ 分区），方便读代码和无障碍。
那 <div> 和 <header> 差在哪？渲染出来都是框，长得一模一样——差别只在语义。<div> 是「说不清这块算什么」的通用框；而 <header>（页头）、<nav>（导航）、<main>（主内容）、<article>（一篇独立内容）、<footer>（页脚）这些语义标签，等于给框贴了角色名牌，让浏览器、屏幕阅读器、搜索引擎都认得出每块是什么。所以初学全用 <div> 没问题——就像图层面板里全叫 Frame 1、Frame 2，结构照样搭得出来；进阶再把对应位置换成语义标签，代码对人好读、对机器也友好。想知道每个 <div> 该换成哪个语义标签？见
这篇《用语义标签替代 div》讲得很全 ↗。
同一张卡片：左边是视觉的图层树（框套框），右边是浏览器看到的 HTML 标签树——缩进、嵌套、名字，一一对应。悬停任一侧，另一侧会一起亮起。
<div class="card"><div class="header"><h3>标题</h3><p>一段描述…</p></div><button>了解更多</button></div>
一棵图层树。框套框，每个图层有名字、有层级、有缩进。
一棵标签树。<div> 套 <div>，每个标签有名字、有层级、有缩进——一模一样的事。
什么是标记语言先从 Markdown 说起
上一节你已经见过 <div>、<section> 这些标签——它们就是用尖括号包住一个名字。这种给内容贴标签的写法从哪来？答案就藏在你早就会的一种语言里：Markdown。# 标了「这是标题」、- 标了「这是列表项」、** 标了「这是重点」——给内容贴上角色，机器才知道怎么呈现它。
这套「用符号标出角色」的做法，就叫标记语言。HTML 是另一种标记语言：把符号换成带角括号的标签，描述的是同一套结构——<h1> 对应 #、<li> 对应 -、<strong> 对应 **。
同一张小店，Markdown 和 HTML 各写一遍，结构一模一样：
HTML 标签有上百个，但套路就一个——<标签>内容</标签>，要带额外信息（地址、图源）就加属性。不用背，需要时查 MDN 的 HTML 元素参考 ↗ 即可。