<!DOCTYPE html>必须位于文件最开头且全小写，强制浏览器启用HTML5渲染模式；<meta charset="UTF-8">须置于<head>内首行，确保中文不乱码；标签统一小写、编码声明与文件实际编码必须一致。
HTML 是网页的骨架，不是编程语言，也不处理逻辑——它只负责用标签把文字、图片、链接这些内容“归类”“分块”“标结构”。你写的每一段 <p>、每一个 <h1>、每一张 <img>，都在告诉浏览器：“这部分是标题”“这部分是段落”“这张图放这儿”。没它，浏览器就只能干看纯文本；有了它，才谈得上样式（CSS）和交互（JavaScript）。
为什么必须写 <!DOCTYPE html>？
这行不是可有可无的注释，而是强制浏览器启用 HTML5 渲染模式。不写或写错（比如漏空格、大小写混乱），旧版 IE 或某些移动端 WebView 会退回到“怪异模式（Quirks Mode）”，导致 <section>、<article> 等语义化标签失效，盒模型计算出错，甚至 margin 和 padding 表现不一致。
- 必须全小写，且
html前后不能加引号或空格：<!DOCTYPE html>✔️，<!doctype HTML>❌ - 必须放在文件最开头，前面不能有任何字符（包括空行、BOM 头）
- HTML5 只接受这一种写法，
<!DOCTYPE HTML PUBLIC ...>是 HTML4 的，已淘汰
<html>、<head>、<body> 这三块能不能省？
可以省略 <html> 和 <head> 的结束标签（浏览器会自动补全），但绝不能省略它们的开始标签；<body> 同理。不过，省略 ≠ 推荐——尤其对新手：
- 不写
<head>，你就没法加<meta charset="UTF-8">，中文立刻乱码 - 不写
<body>开始标签，某些编辑器语法高亮会错乱，VS Code 可能报“no body element”警告 - 所有现代框架（如 Vite、Next.js）生成的 HTML 模板都显式写出这三层，保持一致性更利于协作
<meta charset="UTF-8"> 放错位置会怎样？
它必须出现在 <head> 内、且越靠前越好（最好第二行，紧随 <html> 之后）。如果放在 <title> 后面，或被注释挡住，部分浏览器（特别是旧版 Safari 和 Android WebView）会在解析到中文时已按默认编码（如 ISO-8859-1）解码过一次，再切编码也救不回乱码。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<head><title>页面</title><meta charset="UTF-8"></head>→ 标题里的中文可能已损坏 - 正确顺序：
<head><meta charset="UTF-8"><title>页面</title></head> - 注意：
charset属性值必须是"UTF-8"（带短横线），写成"utf8"或"UTF8"无效
标签大小写、空格、换行，真不影响运行吗？
HTML 规范确实不区分大小写，<P> 和 <p> 浏览器都认。但实际协作中，大小写混用会埋坑：
- CSS 选择器是大小写敏感的：
p { color: red; }不会匹配<P>元素 - 服务端模板（如 PHP 的
echo <P>）或构建工具（如 Webpack 的 HTML 插件）可能依赖统一格式做静态分析 - 团队代码审查通常强制小写，违反会被 CI 拦截；
<Img src="">这类写法在 ESLint + prettier 配置下直接报错 - 换行和缩进虽不影响解析，但嵌套过深（如
<div><div><div><p>）不缩进，调试时根本找不到哪层漏了 </div>
真正容易被忽略的，是文档编码声明与文件实际保存编码必须严格一致：编辑器存成 UTF-8 with BOM，但 <meta charset="UTF-8"> 却没写，或者反过来——文件用 ANSI 保存却硬写 UTF-8 声明。这种错不会报错，只会让中文静默变方块。检查方式很简单：用 VS Code 打开文件，右下角看当前编码，再核对 <meta> 标签。
