# 页头

纯样式组件：不需要 JS。后台内容区顶部的标题区：返回按钮、标题、说明、操作按钮和一行元信息。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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`、`zh-ph-main`、`zh-ph-title`、`zh-ph-back`、`zh-ph-sec`、`zh-ph-actions`、`zh-ph-meta`、`zh-ph--compact`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `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 |  | 紧凑版：标题、标签页、操作排在一行 |

## 无障碍

- 返回按钮是图标按钮，必须有 aria-label
- 页面的唯一一级标题放在 zh-ph-title 里

## 常见问题

### 页头是什么？

纯样式组件：不需要 JS。后台内容区顶部的标题区：返回按钮、标题、说明、操作按钮和一行元信息。

### 怎么使用页头？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 页头支持键盘和读屏吗？

返回按钮是图标按钮，必须有 aria-label；页面的唯一一级标题放在 zh-ph-title 里。

### 页头需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。