HTML无布局属性，排版必须用CSS；align、width等已废弃，应使用flex（一维）和grid（二维）布局，并结合语义化标签提升可访问性与SEO。
HTML 本身没有“布局属性”，所有排版控制都依赖 CSS；写 align、width、bgcolor 这类 HTML 属性不仅无效，还会让代码难以维护、可访问性变差。
为什么不能用 align 或 width 做布局
这些是 HTML4 时代的内联表现属性，早已被 W3C 废弃。现代浏览器虽不报错，但会忽略或降级处理——比如 align="center" 在 <div> 上完全无效，width="50%" 在非表格元素上也无作用。
- 语义污染：把样式逻辑塞进 HTML 标签，破坏结构与表现分离原则
- 无法响应式：百分比值在不同上下文中行为不一致，且无法配合媒体查询
- 覆盖困难：内联样式权重过高，后期用 CSS 覆盖需加
!important，埋下技术债
display: flex 和 display: grid 是唯二该学的布局机制
它们不是“可选项”，而是当前所有主流项目默认采用的布局基础。选哪个取决于维度需求：
- 一维排列（如导航栏、按钮组、表单字段对齐）→ 用
display: flex - 二维网格（如仪表盘、图文混排、固定侧边栏+自适应主区）→ 用
display: grid - 别嵌套
flex做网格：三列等宽 + 每列内再分两行？直接上grid-template-areas，更清晰、更可控
示例：一个带页眉、侧边栏、主内容、页脚的响应式框架
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<div class="layout">
<header>Header</header>
<aside>Sidebar</aside>
<main>Content</main>
<footer>Footer</footer>
</div>
<style>
.layout {
display: grid;
grid-template-areas:
"header header"
"aside main"
"footer footer";
min-height: 100vh;
}
header { grid-area: header; }
aside { grid-area: aside; }
main { grid-area: main; }
footer { grid-area: footer; }
</style>
语义化标签不是装饰，是布局的起点
用 <header>、<nav>、<main>、<aside>、<footer> 替代一堆 <div class="header">，不只是为了“看起来规范”：
- 屏幕阅读器能准确识别区域角色，提升可访问性
- 搜索引擎更易提取内容层级，影响 SEO 权重分配
- CSS 选择器更简洁：
main > article比.content .post更稳定、不易误伤 - 某些浏览器原生支持
:focus-within等伪类在语义标签上的行为，浮动div不保证
真正卡住初学者的，从来不是 flex 的 justify-content 怎么写，而是没意识到 HTML 标签本身就有默认显示行为（比如 <p> 自带 margin、<h1> 是块级、<span> 是内联）。先理解这个，再叠加 CSS，才能稳住排版节奏。
