视觉层次靠结构、尺寸、颜色、间距系统控制；HTML语义标签（如h1/h2、main/aside、strong/span）天然传递权重，配合font-size、font-weight、color明度、margin-bottom等CSS属性精准建立优先级，需兼顾响应式与无障碍。
视觉层次不是靠“加效果”堆出来的，而是靠结构、尺寸、颜色、间距这四样东西的系统性控制。做不好，用户第一眼就找不到重点；做得太刻意，反而显得廉价。
怎么用HTML标签天然建立视觉优先级
语义化标签本身就在传递层级信号，<h1></h1> 比 <h2></h2> 重，<main></main> 比 <aside></aside> 主，<strong></strong> 比 <span></span> 强——这些不是样式建议，是浏览器和读屏软件默认识别的权重规则。
常见错误现象：用 <div class="title"> 冒充 <code><h2></h2>，或把所有标题都设成 <h3></h3> 后靠CSS强行调大小。结果是SEO弱、无障碍支持差、后期改版时连哪块该放大都得翻CSS查。
- 一个页面只用一个
<h1></h1>，它必须是内容核心，比如产品名或页面主题 -
<section></section>和<article></article>不是“换汤不换药”的<div>，前者表示主题分组，后者表示可独立传播的内容单元（如一篇博客） <li>用 <code><em></em>表达语气强调，用<strong></strong>表达信息重要性，别全用<span></span>+ class -
h1字号建议 ≥ 2rem，h2≥ 1.5rem，字号差至少 0.5rem，否则人眼难区分层级 - 正文用
color: #333，次要文字用#666，辅助说明用#999，别靠“灰色深浅”猜着调 - 段落之间用
margin-bottom留白，别用padding或空行 —— 后者破坏语义流，且在响应式下易错位 - 主操作区（如购买按钮）单独提一层DOM，不要和描述文字挤在同一个
<div> 里 <li>用 <code>grid-template-areas明确划分 “图片 / 标题 / 描述 / 价格 / 操作” 区域，比纯数值轨道更利于保持视觉节奏 - 同一行内多个元素，用
gap控制间距，别用margin-right—— 否则最后一项多出空白，破坏对齐预期
CSS里哪些属性真正影响视觉权重
字体大小、粗细、颜色明度、行高、上下间距，这五项对人眼判断“哪个更重要”起决定作用。阴影、圆角、边框这些是锦上添花，不是主因。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
性能/兼容性影响：过度依赖 box-shadow 或 filter: blur() 做层次感，在低端安卓机或旧版Safari上容易掉帧；而 font-weight、margin-bottom 这些是零成本、全兼容的。
Flexbox/Grid布局中如何避免层次被拉平
当所有卡片都用 display: flex + align-items: center，又统一设了 padding: 16px，视觉上就变成“一堆平等模块”，失去主次。层次感必须在布局阶段就嵌入，不能全靠最后加个 border-left: 4px solid #007BFF 补救。
使用场景：电商卡片列表、仪表盘指标区块、登录页表单与提示文案并存时，最容易出现“所有东西看起来一样重要”的问题。
最常被忽略的一点：视觉层次不是静态的。用户在小屏上滑动时，原本靠左右位置区分的主次，会变成上下顺序；而你写的 flex-direction: row 在媒体查询里没切到 column，那整套层次逻辑就崩了。做之前先想清楚“这个优先级，在 320px 宽度下还成立吗”。
