Hero section 首屏大图区（Hero）
/HEER-oh SEK-shun/ · noun · 内容类模式 · #096
落地页上紧接页头的第一大块：一句说明产品是什么的大标题、一行补充说明、一两个行动按钮，通常还有一张大图或一段视频。是用户不用滚动就能看到的那部分。
别名：首屏、hero区、首屏大图、头图、主视觉区。
你可能会这样叫它
- “网站首页最上面的大图”
- “落地页第一屏”
- “首页大标题那一块”
- “网页顶部的大横幅”
- “不用滚动就能看到的部分”
……它的名字是 首屏大图区（Hero）（Hero section）。
常见问题
Hero 区是什么意思？
指网页（通常是首页或落地页）紧接页头的第一大块区域，放主标题、一句补充说明、主要行动按钮，常常还有大图或视频。它要让访客在滚动之前就明白这是什么、下一步该做什么。中文里也常叫首屏或头图。
代码里叫什么
| Web (HTML) | <section> <h1> 没有专门的元素，用一个包含页面 h1 和主要行动按钮的 section |
|---|---|
| Web (CSS) | min-height: 100svh object-fit: cover |
| iOS / Android | 没有对应组件，App 一般在页面顶部用大标题或头图 |
复制给 AI 编程工具
在落地页顶部、紧接页头的位置加一个 Hero 区：一句十个词以内说清产品做什么的大标题，作为页面唯一的 h1；一句补充说明；一个主要行动按钮和一个次要文字链接；旁边或下方放一张产品截图。在笔记本屏幕上不超出第一屏，图片立即加载并写死尺寸，任何背景上的文字对比度都要足够。