是语义容器，不带默认样式，可多层嵌套：全局头部放logo与主导航，内容区块头部仅放标题与元信息；不必嵌入，应独立包裹导航链接，logo等非导航内容须分离；简约大气依赖合理结构、足够留白（如padding≥1.5rem）、flex布局对齐及避免固定高度。
<header></header> 标签本身不带默认样式，也不自动包含导航或品牌元素——它只是语义容器。真正决定“简约大气”的，是内部结构选择、CSS 控制粒度，以及是否误用或滥用语义标签。
用 <header></header> 前先确认它该出现在哪一层
一个页面可以有多个 <header></header>：一个在 顶层（网站全局头部），另一个嵌在 @#@#@#@#@#@#@#@#@#@0。
CSS 控制简约感的关键参数
“大气”往往来自留白与视觉节奏，而不是字体大小或阴影强度：
– padding 至少设为 1.5rem（约 24px），避免文字贴边；
– 使用 display: flex + justify-content: space-between 对齐 logo 和 nav，比 float 或 inline-block 更稳定；
– 避免给 <header></header> 设固定 height，让它随内容自然撑开；
– 导航链接的 line-height 和 padding 要匹配，否则 hover 时文字会跳动；
– 移动端折叠菜单前，先测试 flex-wrap: wrap 在小屏下的换行行为，别依赖 JS 才触发布局调整。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
容易被忽略的兼容性细节
HTML5 语义标签在 IE9+ 完全支持，但老版本 IE 需要 document.createElement 补丁——不过现在基本不用考虑：
– 真正麻烦的是 Safari 对 flex 的旧语法残留（如 -webkit-box），尤其在 iOS 12–13；
– 如果用 gap 控制导航项间距，记得加 row-gap/column-gap 分开写，某些安卓 WebView 仍不识别简写 gap；
– <header></header> 内部如果用了 <picture></picture> 或 <svg></svg> 作为 logo，务必设 width 和 height 属性，否则加载中会塌陷导致布局抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
