页头
纯样式组件：不需要 JS。后台内容区顶部的标题区：返回按钮、标题、说明、操作按钮和一行元信息。
纯样式 核心包
示例
产品发布会回顾
已发布代码
<header class="zh-ph">
<nav aria-label="当前位置"><ol class="zh-crumb"><li><a href="#">首页</a></li><li aria-current="page">文章详情</li></ol></nav>
<div class="zh-ph-main">
<div class="zh-ph-title"><button class="zh-ph-back" aria-label="返回"><i data-i="chevron-left"></i></button><h4>产品发布会回顾</h4><span class="zh-tag success">已发布</span></div>
<div class="zh-ph-actions"><button class="zh-btn">预览</button><button class="zh-btn primary">编辑</button></div>
</div>
<dl class="zh-ph-meta"><div><dt>作者</dt><dd>李明</dd></div><div><dt>更新</dt><dd>2026-10-04</dd></div></dl>
</header>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
zh-ph | <header>（class） | 页头容器，上方一般放面包屑 | |
zh-ph-main | 容器 | 标题和操作按钮所在的一行，空间不够会换行 | |
zh-ph-title | 容器 | 里面放 <h4>，可带 zh-ph-back 返回按钮与 zh-ph-sec 副标题 | 手机宽度隐藏副标题 |
zh-ph-actions | 容器 | 里面放 zh-btn | 右侧操作区 |
zh-ph-meta | <dl> | 多个 <div><dt>…</dt><dd>…</dd></div> | 标题下面的一行元信息 |
zh-ph--compact | .zh-ph | 紧凑版：标题、标签页、操作排在一行 |
样式类
zh-ph zh-ph-main zh-ph-title zh-ph-back zh-ph-sec zh-ph-actions zh-ph-meta zh-ph--compact
无障碍
- 返回按钮是图标按钮，必须有 aria-label
- 页面的唯一一级标题放在 zh-ph-title 里
常见问题
页头是什么？
纯样式组件：不需要 JS。后台内容区顶部的标题区：返回按钮、标题、说明、操作按钮和一行元信息。
怎么使用页头？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。
页头支持键盘和读屏吗？
返回按钮是图标按钮，必须有 aria-label；页面的唯一一级标题放在 zh-ph-title 里。
页头需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。