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