Lesson 3.1
前端基础知识
先建立页面认知，再进入前端 vibe coding
先建立页面认知，再进入前端 vibe coding
知道什么叫结构、标签、容器、选择器，你才能把页面要求讲清楚，不会只说“帮我做个好看的页面”。
理解 HTML / CSS / JS 各自负责什么，就能快速判断改动点，不会把样式问题、结构问题、逻辑问题混在一起。
读懂 AI 产出的代码，是以后继续迭代、排查问题、做交互演示的基础，不然只能碰运气。
从三件套关系入手，过渡到 HTML 结构，再进入选择、样式和交互逻辑。
同一个页面会随着能力叠加，从结构草图，逐步变成可交互的产品界面。
负责把标题、按钮、内容区这些页面骨架先搭出来，让浏览器知道每块内容应该放在哪里。
负责把已经存在的结构变得更有层次，决定颜色、间距、大小、布局和整体视觉质感。
负责让页面对点击、输入和状态变化做出响应，把静态界面变成真正可操作的产品页面。
`title`、`meta`、`link`、`script` 这些信息放在这里，负责告诉浏览器怎么理解和准备这个页面。
这里承载用户真正会看到的页面内容，下面再继续拆成不同的功能区域。
菜单、辅助说明、侧边信息。
页面主要内容都在这里组织。
继续往下拆成一个个内容容器。
官网首页、课程介绍页、活动落地页
从上到下介绍信息，带用户顺着页面阅读。
强调品牌、卖点、案例与转化入口。
内容按顺序往下展开，阅读路径最直接。
商品详情页、内容详情页、案例解析页
一侧放辅助信息，一侧承载主要内容。
让重点内容更集中，信息关系更清楚。
辅助区和主内容区分开后，信息层次更稳定。
后台系统、管理台、数据工作台
导航稳定存在，主内容区频繁切换。
提升操作效率，方便在多个功能间跳转。
导航固定在左侧，右侧专门承载列表、表单和数据内容。
容器的作用是包裹内容、组织结构，让页面里的内容块有归属、有层级。
浏览器一看就知道这块内容承担什么角色。
先把内容包起来，具体作用再靠 class、上下文和样式来说明。
更适合承接大块内容区域，负责搭页面骨架。
更适合包住文字里的局部内容或小部件。
页面或区块的顶部容器，通常承接品牌、标题、导航或开头信息。
页面最核心的主内容区域，用户最主要阅读和操作的内容通常放这里。
把一段相关内容组织成一个主题区块，常用于页面中的分段模块。
相对独立、可以单独存在的一块内容，常见于卡片、文章、动态、列表项。
主内容旁边的辅助区，用来放说明、目录、侧边导航、推荐信息。
页面或模块的结尾容器，通常放版权、补充链接、收尾说明。
最常见的无语义区块容器，当你只需要“包一层”来做布局或分组时使用。
最常见的无语义行内容器，适合包裹文字中的局部片段或小状态。
不用一次记住全部，但至少先建立“这个标签大概属于哪一类”的感知。
这组标签主要负责把页面切成一个个大的区域或内容块。
这组标签通常跟着文字流动，用于强调、链接、插图或强制换行。
这组标签经常和 JavaScript 一起出现，因为用户会在这里输入、点击和提交。
先看页面骨架里最常见的 4 个结构标签。
页面或区块的开头区域。
常用于承接标题、Logo、导航，让浏览器知道“这里是开头”。
导航链接所在的区域。
当一组链接主要承担“切换页面或切换区块”的作用时，用 `nav` 更清晰。
页面最核心的主内容区。
正文、详情页主体、主工作区通常放这里，一页里一般只保留一个 `main`。
按主题分段的内容区块。
适合把页面切成“课程介绍”“案例展示”“用户评价”这种清晰模块。
继续看结构层里另外 4 个高频容器标签。
一块相对独立的完整内容。
文章、动态卡片、商品项这类“单独拿出来也能成立”的内容适合用它。
主内容旁边的辅助区域。
目录、推荐内容、说明栏、后台左侧导航，通常都可以落在 `aside` 里。
页面或模块的收尾区域。
版权信息、补充链接、联系方式，通常都放在结尾位置。
最常见的通用区块容器。
当你只是想包一层做布局、分组或套样式，但没有更明确语义时，用 `div`。
这 4 个标签负责页面里的标题、段落、列表和局部包裹。
从大到小的标题标签。
适合给页面和模块建立层级，`h1` 通常最大，`h6` 最小。
普通段落文本。
一段完整说明文字、介绍文案、正文说明，通常都放在 `p` 里。
无序列表和列表项。
当一组内容天然是“并列条目”时，用列表会比多个段落更清晰。
通用的行内包裹标签。
适合只包住一句话里的某个词、数字、状态，用来单独加样式或标记。
这组标签更偏向强调、跳转、插图和简单分隔。
强调重要内容。
适合突出重点词、关键提醒，默认一般会更醒目。
表示语气上的强调。
适合让某个词更突出，但语义上比 `strong` 更偏“强调语气”。
可点击的超链接。
用于跳转到其他页面、章节、下载地址，链接文本通常就放在标签内部。
在页面中插入图片。
图片地址一般通过 `src` 提供，说明文字通常写在 `alt` 里。
最后一组是换行分隔和表单交互标签。
换行和分隔线。
`br` 常用于强制换行，`hr` 常用于视觉分隔内容区块。
表单容器和字段说明。
`form` 用来包住整组输入，`label` 用来告诉用户这个输入框是干什么的。
输入框和按钮。
用户输入内容常用 `input`，触发提交、查询、确认等操作常用 `button`。
下拉选择框和选项。
当用户只能从固定选项里选一个或几个值时，`select` 很常见。
HTML 先把内容和结构摆出来，接下来再通过样式和交互，让同一份结构变得更好看、更可操作。
CSS 负责颜色、字体、间距、边框、布局这些视觉效果，让原本只有结构的内容更像真实页面。
JavaScript 负责点击、输入、切换、显示隐藏这些变化，让页面对用户操作做出响应。
为了方便对同一类内容批量增强，CSS 和 JS 往往都会先用选择器选中 HTML 里的元素，再统一加样式或绑定行为。
.card / #title / button同样是“选中元素”，类名选择、标签选择、id 选择的适用范围并不一样。
命名方式：前面加 `.`，后面接类名。
适用场景：一组同类型内容需要统一样式或统一行为时最常用。
命名方式：直接写 HTML 标签名。
适用场景：想给某一类基础标签统一默认样式时很方便。
命名方式：前面加 `#`，后面接 id 名。
适用场景：页面里只有一个非常明确的唯一元素需要被选中时使用。
用户先发生一个动作，页面才会进入交互流程。
JavaScript 先知道“哪个元素被点了、输了、切换了”。
根据当前状态决定接下来该显示、隐藏、切换还是提交。
把结果作用到页面上，让用户立刻看到变化。