一份标准html文档必须包含、、和四个基础标签，它们构成网页骨架：为根元素，定义元数据，指定页面标题，承载可见内容，缺一可能导致渲染异常或不符合w3c标准。
HTML文档必须包含哪些基础标签才能正常渲染
缺了关键标签，浏览器可能不报错但会降级处理——比如没，页面就进 quirks mode；没<code>，屏幕阅读器和搜索引擎对语言的判断就失效。
必须放在第一行，且不能有任何字符（包括空格、BOM）前置-
是唯一根元素，lang属性建议设为zh-CN或zh-SG，别留空或写zh -
里至少要有<meta charset="UTF-8">，否则中文极大概率乱码；<meta name="viewport" content="width=device-width, initial-scale=1.0">不是可选，是移动端适配的硬门槛 -
<title></title>虽不影响渲染，但缺失会导致 SEO 掉权、书签显示“无标题”，且 Chrome 标签页默认显示 URL
body里用div还是语义化标签？什么时候该换
不是“能用div就用div”，而是“没语义就别套div”。一个<div class="header">在机器眼里就是个无意义盒子，而<code><header></header>直接告诉浏览器：“这是页眉区域”，搜索引擎和读屏软件立刻能定位。
-
<header></header>只用于页面顶部全局性内容（如 logo + 主导航），不是每个区块标题都叫 header -
<main></main>必须且只能出现一次，且不能嵌套在<article></article>或<section></section>内；它包裹的是用户打开这个页面真正想看的内容 -
<aside></aside>不是“右边栏”的同义词，而是与当前上下文相关但可剥离的补充信息（如作者简介、延伸阅读），纯广告位建议用<div role="complementary"> <li>嵌套超过三层的<code><div>要警惕：先问自己“这层容器有没有独立语义？能不能被<code><section></section>或<article></article>替代？”DOM层级太深导致页面卡顿，怎么快速定位和优化
浏览器解析 HTML 是深度优先遍历，DOM 层级每多一层，CSS 选择器匹配成本就指数上升。实测中，
.a .b .c .d p这种四层选择器，在低端设备上滚动时重排明显变慢。- 用 Chrome DevTools 的 Elements 面板按
Ctrl+Shift+C悬停查看实时嵌套深度，重点关注连续出现的<div>节点 <li>单个<code><section></section>下子元素超过 50 个时，滚动卡顿概率陡增；考虑用DocumentFragment批量插入动态列表项 - Flex 或 Grid 布局能直接干掉 2–3 层包裹容器——例如三栏布局，用
display: grid比套三层<div class="row"><div class="col">更轻量 <li>避免把整个页面塞进一个<code><div id="app">再靠 JS 渲染，首屏核心内容必须同步输出到 HTML <h3>script和link放错位置，为什么比JS语法错误更致命</h3> <p>一个没加<code>defer的<script src="app.js"></script>如果放在里，会立刻中断 HTML 解析：浏览器一边下载 JS，一边停着不动，连都没生成，用户看到的就是白屏。-
<script></script>放在底部仍是安全底线，但现代写法优先用defer（保证执行顺序）或async（不保证顺序，适合统计脚本） -
<link rel="stylesheet">必须放在，否则 CSS 加载前 DOM 已渲染，造成 FOUC（样式闪烁） - 关键资源（如首屏字体、核心 CSS）可用
<link rel="preload">提前拉取，但注意它不阻塞渲染，需配合as属性指定资源类型 - 不要在
里写内联 JS，尤其含document.write()的代码，它会清空整个页面
lang属性缺失和<main></main>误嵌套——这两处出错，SEO 和无障碍几乎直接归零。 -
- 用 Chrome DevTools 的 Elements 面板按
