现代HTML布局核心是结构清晰、易于维护与快速迭代：合理使用语义化标签明确层级职责，Flexbox处理一维排列，Grid负责二维网格，组件化需统一样式规范与命名前缀，并以内容驱动响应式设计，兼顾可访问性与DOM顺序一致性。
现代HTML页面布局不是“怎么排好看”，而是“怎么拆清楚、改得动、换得快”——结构没理清，样式再 fancy 也扛不住一次需求变更。
用语义化标签替代 div 堆砌，但别只换标签名
把 <div class="header"> 换成 <header> 不等于完成语义化。关键在层级和职责是否匹配：
-
<header>应该只出现在页面顶部或某个区块顶部，不能嵌套另一个<header> -
<main>必须全局唯一，且不能被<article>或<section>包裹 -
<nav aria-label="主导航">比裸<nav>更稳妥，尤其对屏幕阅读器 - 如果只是视觉分组、无明确语义（比如一个卡片容器），
<div>仍是合理选择，硬套<section>反而干扰语义解析
Flexbox 和 Grid 不是二选一，而是按维度分工
一维排列（行或列）交给 Flexbox，二维网格（行列都要控）交给 Grid——混用时容易踩坑：
- 不要对
<main>直接设display: grid然后在里面又给子元素设display: flex，除非真需要嵌套布局；多数情况下，主结构用 Grid，内部卡片/按钮组用 Flex 更清晰 -
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))是响应式卡片墙的底线写法，但要注意父容器必须有明确宽度（比如width: 100%或max-width），否则auto-fill会失效 - Flexbox 的
flex-wrap: wrap配合min-width能模拟 Grid 行为，但无法控制列数，也不支持跨行对齐
组件化不是“抽成文件就完事”，样式收口必须前置
很多团队把 header.html、card.html 单独拆出来，结果各处 Button 的 padding 和 border-radius 还是不一致——问题出在样式没先统一：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 所有按钮类名必须走同一套命名前缀，比如
btn、btn-primary，禁用header-btn和modal-btn这类上下文耦合类名 - 颜色、间距、圆角等基础变量优先用 CSS 自定义属性（
--spacing-sm、--color-brand），而不是散落在各组件 CSS 中 - 抽组件前先跑一遍“重复结构审计”：用浏览器 DevTools 的 Elements 面板搜索
class="card"，看是否真在 ≥2 个页面出现；只用一次的模块，留在页面内更轻量
响应式不是靠 media query 堆断点，而是内容驱动的流式收缩
写 @media (max-width: 768px) 很容易，但真正难的是让内容自己“知进退”：
-
<picture>+srcset+sizes必须配对使用，单写srcset不生效；sizes值要跟实际布局宽度匹配，比如侧边栏收起后主内容占满全宽，sizes就得从"50vw"切到"100vw" - 用
em写断点（如@media (max-width: 48em)）比px更健壮，它随用户字体设置缩放，避免高倍屏下断点错位 -
hidden属性比display: none更语义化，适合渐进式披露场景；但注意它不可继承，也不能用 CSS 动画过渡
最容易被忽略的一点：布局重构后，键盘 Tab 顺序和屏幕阅读器读取顺序必须和视觉顺序一致。用 order 或 flex-direction: row-reverse 调整视觉位置时，务必同步检查 tabindex 和 DOM 顺序，否则无障碍就断了。
