必须顶格首行且前无任何字符，否则触发怪异模式导致布局错乱；、、三者缺一不可，顺序与位置均须严格遵循标准。
必须放在第一行，且前面不能有任何字符（包括空格、BOM、注释），否则浏览器会进入怪异模式，导致盒模型、<code>width计算、vertical-align行为全部异常——这是新手最常踩却最难排查的坑。
怎么写一个合法又健壮的 HTML5 根结构
不是随便套个 就算完事。真实项目里，这三样缺一不可：
-
：别只写lang="zh"，iOS 语音朗读和中文输入法候选词都依赖完整区域码 -
<meta charset="UTF-8">必须紧贴开头，哪怕只晚一行，<title></title>里的中文就可能乱码 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">：没它，移动端页面会默认缩放成“小地图”，用户得双指放大才能看清
错误示例：<!-- 备注 --> → 怪异模式；正确写法就是干干净净一行：<code>
语义化标签怎么嵌套才不翻车
用 <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 替代一堆 <div class="header">，不是为了“看起来高级”，而是为了让屏幕阅读器、搜索引擎、甚至 CSS 的 <code>:has() 选择器能真正理解结构。
-
<main></main>必须且只能出现一次，且不能嵌在<article></article>或<section></section>里 -
<nav></nav>只放导航链接，别把搜索框、登录入口塞进去——它们该用<form></form>或<aside></aside> - 每个
<section></section>或<article></article>内部必须有标题（<h2></h2>起），跳级（比如直接<h3></h3>）会影响无障碍阅读顺序
为什么不要用 <frameset></frameset> 或老式 <frame>
这些标签在 HTML5 中已被完全废弃，现代浏览器虽未报错，但存在硬伤：
-
<frameset></frameset>和互斥，写了前者，内容直接被忽略 - 所有
<frame>页面共享同一个 URL，前进/后退失效，SEO 彻底归零 - 跨域时父页 JS 完全无法访问子 frame 的
document.title或尺寸，连判断加载完成都困难
真要嵌内容，用 <iframe></iframe> + overflow: hidden + 显式 width/height，但注意：它只是视觉拼接，不是逻辑框架。
用 CSS Grid 搭基础布局时最易漏的细节
比起浮动或 Flex，Grid 做框架更直观，但两个点常被忽略：
-
grid-template-columns: 240px 1fr比auto 1fr更稳——auto会被内容撑宽，侧边栏突然变胖 - Grid 容器的子元素（比如
<main></main>）默认不继承width: 100%，文字溢出或背景色断掉，得手动加width: 100% - IE11 需要额外写
display: -ms-grid和对应旧语法，现在多数项目已放弃兼容，但若真要支持，不能只靠 Autoprefixer
复杂点在于：框架不是写完就结束，而是要预判内容层级。比如 <main></main> 里是否要嵌 <router-view></router-view> 或 <outlet></outlet>？那它就得是 JS 控制的壳，而不是静态 HTML 结构。
