HTML基本结构是浏览器解析页面的强制契约：<!DOCTYPE html>必须首行唯一声明，<html lang="zh-CN">确保多语言支持，<head>中<meta charset="UTF-8">须在<title>前防乱码，<meta name="viewport">保障响应式，<body>不可自闭合且为JS挂载必需。

HTML基本结构不是可选“模板”，而是浏览器解析页面的强制契约：缺任何一个核心标签，都可能触发怪异模式、乱码或 SEO 失效。

为什么 <!DOCTYPE html> 必须放在第一行且不能省略

它不是注释，也不是 HTML 标签，而是向浏览器发出的“用 HTML5 标准渲染”的明确指令。如果缺失或写在第二行，旧版 IE 会退化到怪异模式（Quirks Mode），导致 box-sizing、flex、甚至 margin 计算全部错乱。

• 必须独占第一行，前面不能有任何空格、BOM 或注释
• 大小写敏感：只能是 <!DOCTYPE html>，<!doctype html> 虽然被多数浏览器容忍，但不符合规范
• 不带引号、不加斜杠、不接其他属性——HTML5 中它就是最简形式

<html> 的 lang 属性不是摆设

它直接影响屏幕阅读器发音、搜索引擎语义判断，甚至部分 CSS 伪类（如 :lang(zh)）的行为。不写 lang，等于告诉辅助技术“这页语言未知”，对视障用户极不友好。

• 中文页面务必用 <html lang="zh-CN">，而非 zh 或 zh-cn（后者是过时写法）
• 多语言子页面应动态切换，比如英文页用 lang="en"，不能靠 JS 后补——lang 需在首次渲染前就存在
• 若整个站点是双语，但当前页是中文，仍应设为 zh-CN，不要留空或写 auto

<head> 里哪些 <meta> 是硬性依赖

除了 <title>，真正不可省的是 <meta charset="UTF-8"> 和 <meta name="viewport" content="width=device-width, initial-scale=1.0">。前者防乱码，后者保响应式基础。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

立即学习“前端免费学习笔记（深入）”；

• charset 必须在 <head> 最早位置（通常第二行），晚于它出现的任何文本都可能被错误解码
• viewport 对移动端不是“优化项”，而是必要项：没有它，手机浏览器默认按 980px 宽度渲染，文字小到无法阅读
• <title> 虽不强制，但缺失会导致浏览器标签页显示文件名（如 index.html），影响书签、SEO 和用户识别

<body> 为空时，页面真的“没内容”吗

不是。即使 <body> 里什么都没写，浏览器仍会渲染一个空白视口——但这不代表安全。很多前端框架（如 Vue、React）依赖 <body> 作为挂载点，若它被意外注释、误删或写成 <body/>（自闭合），JS 将直接报错 Cannot find element #app。

• <body> 不允许自闭合，必须写成 <body></body>
• 即使只放一个空 <div id="root"></div>，也比留空更可靠
• 不要在 <body> 外写任何可见内容（比如把 <p> 放在 </html> 后面），那些标签会被浏览器自动“修复”进 <body>，但修复逻辑各引擎不一致，容易埋坑

最容易被忽略的其实是顺序：DOCTYPE → html → head（含 charset 在前）→ body。这个链条一旦错位，比如把 <meta charset> 拖到 <title> 后面，就可能让标题本身被乱码污染——而你根本看不到错误提示。