UI 组件是什么 — 从 HTML 标签到 shadcn/ui

HTML 是用尖括号开合的盒子 — 标签、head 与 body

想象一个网站。最上面是标志和菜单，下面是大横幅、左右滑动查看的案例轮播、咨询申请栏。最底部汇集了营业信息和隐私政策链接的区域，叫作页脚。在浏览器（Chrome、Safari 这类打开网页的程序）里它看起来像一幅画，但背后其实有一段写下这个结构的代码。那段代码就是 HTML。

HTML 用尖括号定下了约定。像 <html> 这样在尖括号里写名字，盒子就打开；像 </html> 这样在名字前加斜杠（/），同名的盒子就关上。这一对叫作标签。盒子里还能放别的标签，所以外层标签叫父，内层标签叫子。最外层的父固定是 html 标签。

html 里的第一层子元素有两个：看不见的 head 和看得见的 body。课程把这两个名字比作信纸。信纸顶部放标志和收件人的位置叫信头，同样，head 里放的是不会画到画面上的页面基本信息：搜索引擎理解这个页面所需的信息、指向这个页面要调用的其他文件的连接等。body 顾名思义是身体，也就是我们看到的整个画面。

head 里有两个代表性标签。记录页面基本信息的 meta 标签是个例外，没有关闭标签，一个就结束。title 标签有开有合，中间写的文字会成为浏览器上方标签页里显示的页面标题。

也可以亲眼看看。在任意网页按 F12（以 Chrome 为准；Mac 按 Cmd+Option+I，或在右上角三个点菜单的工具项里打开），就会打开一个叫开发者工具的窗口，显示这个页面的 HTML。不过在用氛围编程做出来的项目文件里，几乎看不到这样的 HTML 原文。因为现在普遍的做法是在别的框架上写代码，等放上互联网的时候再一次性组装成 HTML。

<html>
  <head>
    <meta charset="utf-8">
    <title>咨询申请</title>
  </head>
  <body>
    <!-- 看得见的画面全部在这里 -->
  </body>
</html>

标签名随便起也能用，为什么大家都用同样的名字 — 语义化标记

放在 body 里的标签名，其实随便起也能运行。讲师举例说，用自己名字的缩写开合一个 <yss> 标签也可以。可是用开发者工具打开多个网站，就会发现同样的标签名反复出现。

原因是搜索。在 SEO（搜索引擎优化，让搜索引擎更好地找到并理解你的页面）和 GEO（生成式引擎优化，让 AI 回答问题时以你的页面为依据）里，页面结构是否按约定来写很重要。因为搜索引擎和 AI 需要只看标签名就能认出这一块是菜单还是输入表单。于是形成了用大家都在用的名字来写的约定，这叫语义化标记（写出含义清楚的标签）。

对照一开始想象的网站来看：最上面的菜单条叫导航栏，里面点一下就跳转的每个菜单叫导航项，标签用 nav。一格一格分开的区域是 section。像咨询申请栏那样输入、选择、提交的一组是 form，也就是在谷歌做问卷时用的 Google 表单里的那个表单。

form 里输入短文字的框是 input，和 meta 一样没有关闭标签。按的按钮是 button。form 里有一个位置，记录按下提交后输入值要送到哪里。像页脚里的使用条款、隐私政策那样点了会跳到别的页面的链接是 a；列表则用 ul 包住整体，每一项写成 li。

不守约定，画面照样能显示。约定是告诉读页面的一方这一块是什么意思的标记。在没有氛围编程的年代，人们边用边学这些名字；课程说，它们数量并不多，与其说是背下来，不如说看几次就熟了。

属性与 class — style 写得太长，于是搬到 CSS

在标签名后面、尖括号关上之前，还可以再写设置值。以 名称=值 成对书写的设置叫属性（attribute）。属性名原则上也可以随便起，但和标签一样，有大家常用的名字。

最有代表性的属性是 class。先看 class 为什么会出现。只有 HTML 的年代，写出结构就够了。可是人们想让页面更好看。在常用来划分画面区域的 div 标签（division 的缩写，意为区块）上加 style 属性，写上 background: red，这个区块的背景就会涂成红色。

问题在于装饰不会只停在一个背景色。内边距、边框、和其他标签的距离、是左右排开还是上下堆叠，全写上去，一个标签就会无限变长。人读起来吃力，同样的装饰还会在一个又一个页面里重复。于是把装饰信息搬到 CSS（Cascading Style Sheets，只放装饰的独立文档）里，给每组装饰起名，标签里只写这个名字。写这个名字的位置就是 class。用开发者工具随便打开一个网站，几乎每个标签都带着 class，原因就在这里。

也有约定了特殊功能的属性。给显示图片的 img 标签加上 src 属性并写上地址，存放在那个地址的图片就会显示在画面上。这和第 06 篇的案例卡片接上了。如果卡片里的图片是管理员上传的，那么填进 src 的图片地址，也是存储在数据库（像电子表格一样按行和列存放值的地方）里的值。

<!-- 把装饰直接写进 style 属性会变长 -->
<div style="background: red; padding: 16px; border: 1px solid black; display: flex;">菜单</div>

<!-- 装饰搬到 CSS，标签里只写名字 -->
<div class="nav-bar">菜单</div>

<!-- img 的 src 属性 = 图片存放的地址 -->
<img src="https://example.com/case-01.jpg">

组件 — 给卡片、对话框这类常用部件起的名字

就像标签有约定的名字，画面部件也有大家共用的名字。这叫组件。第 06 篇的案例列表里，装着标题、客户、图片、日期的方块反复出现，这叫卡片。HTML 里并没有 card 这个标签，是大家约定把那种样子叫作卡片。按下提交时漏填了内容、弹出警告窗口，那个窗口就是对话框。

把在画面上表达某种意图时常用的部件预先做好，就是组件；种类多到可以按字母从 A 排到 Z。不管做什么几乎都一定会用到，所以拿别人预先做好的来用，是如今普遍的开发方式。

氛围编程里最常碰到的是 shadcn/ui。课程把名字末尾的 cn 解释为 className 的缩写，也就是上一节讲的 class 名。就像 style 太长就归成 class 一样，它是把 class 名组合预先做好、能以组件为单位拿来用的库（拿来就用的部件合集）。做同样事情的合集还有很多别的名字，讲师以前常用的 Bootstrap 就是其中之一。那时要背这类合集使用的 class 命名规则，课程说现在已经没这个必要。补充一句，名字里的 shadcn 是做这个库的人的网名。shadcn/ui 代码里用来合并 class 名的工具函数叫 cn()，所以课程的解释可以当作方便记忆的说法。

不必背，但名字要知道。课程把这叫作 UI（用户看得见、按得到的画面元素）传达力。对 AI 说「把案例展示得好看点」和说「把案例排成卡片，漏填就提交时用对话框提示」，得到的结果是不一样的。知道部件名字，就能把想要的画面说出来，也能看着 AI 做出的画面指出少了什么。

今天要做的只有一件事。打开 shadcn/ui 网站（ui.shadcn.com），点开菜单里的 Components。从 A 到 Z 的组件会一路列出来。一个个点开看看，逐一想想这个部件是为了表达什么意图而预先做好的。

用数据和状态观察你常用的应用

把组件一个个点开，会看到共同点：大多数不是在处理数据，就是随数据改变样子。第 05 篇的咨询申请表单沿着把输入值存进数据库的流程走，第 06 篇的案例卡片筛选则靠装着「现在要显示什么」的状态（state，画面记住的当前选择值）来运转。

这就是课程推荐的视角：先认定画面背后有存放在数据库里的数据，还有让画面这样显示的状态，再去看画面。这样一来，平时用的应用里会看到很多有意思的东西。

打开 Airbnb，看看里面的按钮怎么动。打开 Threads 看看。打开平时用的应用，仔细观察里面运转的 UI。可以这样问：这个列表是哪种数据的数组（用方括号括起来的一串值）？这个标签页是不是只是换了外观的单选按钮（多个里只能选一个的按钮）？现在按下的选择由什么状态记住？

把观察到的东西交给 AI 时，把组件名和数据、状态一起写上。下面是按这种方式改写第 06 篇案例卡片区块的请求示例。

「屏幕背后的数据」系列到此结束。第 01～04 篇跟着 ERD（画出数据分到哪些表、表之间怎么连接的设计图）课程看数据怎样存储，第 05～07 篇跟着 HTML 课程看这些数据在画面上呈现为什么样子。课程最后说，了解 HTML 是对氛围编程的策划与设计长期有用的知识。能用部件名和数据、状态来描述画面，交给 AI 的工作也会相应变得准确。

帮我做一个案例区块。使用 shadcn/ui 组件。
- 每个案例用卡片（Card）展示。卡片里有标题、客户、图片、日期。
- 案例数据读取管理员登记的内容。不要写死在画面里。
- 每个案例都有一个画面上看不到的类型值（A·B·C）。
- 在卡片列表上方用标签页（Tabs）把全部·A·B·C 摆出来。不要藏在下拉菜单里。
- 当前选中的标签页用状态管理，一次只能选一个。