最简可行HTML模板必须含lang、charset、语义化根容器和明确content flow：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>页面标题</title></head><body><header></header><nav></nav><main></main><footer></footer></body></html>
lang、charset、语义化根容器和明确的 content flow**——缺任何一项，后续加 CSS 或 JS 都可能踩坑。
为什么 <html lang="zh-CN"> 不是可选项
没设 lang，屏幕阅读器会按默认语言（通常是英语）朗读中文，标点停顿错乱；搜索引擎也可能降权页面相关性；部分 CSS 属性（如 text-transform: capitalize）在无 lang 时行为不可靠。
它不是“锦上添花”，而是让整个页面进入正确语言上下文的开关。
<meta charset="UTF-8"> 必须放在 <head> 最前面
浏览器解析 HTML 是从上到下流式进行的。如果 <meta charset="UTF-8"> 写在 <title> 后面，前面的 <title> 里的中文就可能被按系统默认编码（如 GBK）解码，出现乱码，且无法挽回。
实操中只记一条：在 <head> 里，这行必须是第二行（第一行是 <meta> 前只能有 <title>？不，<title> 还得往后排）。
别用 <div id="wrapper"> 当主容器
现代布局依赖语义与 CSS 上下文，<div> 本身不携带任何结构含义，对 SEO、无障碍、甚至 Flex/Grid 的父子关系都无帮助。容易导致：
• 后续想加 display: flex 时，发现父容器没设 display，子元素 flex: 1 完全无效
• 屏幕阅读器无法识别区域功能（比如“这是主要内容区”）
• 团队协作时，别人得靠注释猜你这个 div 是 header 还是 layout shell
应直接用 <body> 下一级语义标签：<header>、<nav>、<main>、<footer>——它们天然就是块级、可样式化、可被 JS 选中，且无需额外 class。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
Flex 布局失效？先查父容器有没有 display: flex
新手常把 flex: 1 往子元素上猛加，但忘了 Flex 是“上下文驱动”的：只有父容器显式设了 display: flex（或 inline-flex），子元素的 flex 属性才生效。
常见错误场景：
• 给 <main> 加了 flex: 1，但没给它的父级（比如 <body> 或某个 <div>）设 display: flex
• 父容器用了 display: grid，却还指望子元素响应 flex 属性
• 在媒体查询里改了子元素 flex 值，但忘了同步检查父容器是否仍在 Flex 上下文中
解决方法：打开浏览器开发者工具，选中目标子元素 → 查看 Computed 标签页 → 搜索 display，确认其 computed 值是否为 flex 或 inline-flex；如果不是，问题一定出在父级。
立即学习“前端免费学习笔记（深入）”；
真正难的不是写出能渲染的 HTML，而是写出**浏览器不纠错、辅助技术不误解、后续样式不打架、换人维护不懵圈**的结构。每多一个没语义的<div>，每少一个 lang，都在悄悄增加调试成本。 
