UI 组件 · 文字
标题
Heading
也叫：标题文字、小标题、区块标题、h1~h6、Title、Headline
页面和各块内容上方的标题文字（h1~h6），比正文更大更粗，说明下面这块讲什么，也构成整页的大纲。
点「标注」看每个部分叫什么。
怎么跟 AI 说
改成你的业务内容再发整理这个页面的标题层级：页面主标题用唯一的 h1（28px、字重 600、行高 1.3），各内容区块的标题用 h2（20px、600），区块里的小节用 h3（16px、600），不要跳级。标题和下方内容间距 8~12px，和上一块内容间距 32px。标题只写一行要点，不超过 20 个字，需要解释的放到标题下面的正文段落里。样式统一写在 CSS 里，不要用加粗的 div 或 span 冒充标题。
发给
01判断
你的内容是这样吗？
对照两列，确认标题是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
用加粗放大的 div 冒充标题，看起来像，但读屏软件和搜索引擎认不出层级
- 02
为了字号乱用标签：一页好几个 h1，或者 h2 下面直接跳到 h4
- 03
标题写成两三行的长句，扫读时抓不住重点
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
一行短文字，用 h1~h6 标签表示层级，常带一行灰色副标题，或在右侧放「查看全部」链接。
组成部分点一下，在上面的线框里标出来
识别特征
- 1比周围文字明显更大、更粗的一行短文字
- 2下面紧跟着一段正文、一组卡片或一个表格
- 3同一页里几处标题分成几档字号，越靠上层级越高、字越大
04解释
详细解释
标题是一段内容的名字：页面最上面的大标题、每个区块上方的小标题、卡片里的标题都算。HTML 用 h1~h6 六级标签表示层级：h1 是整页的主题，h2 是各大块，h3 是块里的小节。浏览器、搜索引擎和读屏软件都按这套层级理解页面结构，所以不光要字大，还要用对标签。
它和 页头 的区别：页头是一整块区域，里面除了标题还有面包屑、说明和按钮；标题只是其中那一行字。它和 正文段落 的区别在作用：标题要短，一眼扫过去就知道这块讲什么；解释和细节写进正文。
一页只有一个 h1，层级按顺序往下用，不要为了字号跳级（h2 下面直接用 h4）。想要某个字号就改样式，不要换标签。标题尽量一行、20 个字以内；它和下方内容的距离要比和上方内容的距离小，让人一看就知道它属于下面那块。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
component-heading- DOM 选择器
插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。
h1h2h3h4h5h6[role="heading"].ant-typography:is(h1, h2, h3, h4, h5).arco-typography:is(h1, h2, h3, h4, h5, h6)[class*="MuiTypography-h"].n-h[data-slot="card-title"].card-title.modal-title
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
headingtitleheadlinesection-titlesection-heading
- 组件名
React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。
HeadingTitleHeadlineSectionTitleCardTitle
- 语义标签和角色
弱信号，要和其他线索一起才算识别出来。
<h1><h2><h3><h4><h5><h6>role=heading
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30