HTML文档必须以<!DOCTYPE html>开头、设置lang属性、charset为UTF-8、viewport元标签，四者协同决定解析模式、语义理解、字符解码和视口缩放，缺一不可。
HTML 是定义网页结构的国际标准，不是编程语言，也不执行逻辑——它只负责告诉浏览器“这是标题”“那里是一张图”“这一块是导航栏”。你写的每一对 <h1></h1>、每一个 <img src="">，都在构建页面的语义骨架。浏览器照着这个骨架渲染，搜索引擎靠它理解内容，读屏软件凭它朗读信息。
为什么必须用 <!DOCTYPE html> 开头
没有它，浏览器可能退回到“怪异模式（Quirks Mode）”，导致 box-sizing、flex 布局、甚至 margin 计算都和预期不一致。这不是警告，是实际发生的兼容性断裂。
-
<!DOCTYPE html>必须严格写在第一行，前面不能有空格、注释或 BOM 字符 - 它不区分大小写，但惯例全大写加空格，如
<!DOCTYPE html>，不是<!doctype HTML> - HTML5 之后不再需要引用 DTD 文件，
<!DOCTYPE html>就是全部——别加SYSTEM或 URL
<html lang="zh-CN"> 中的 lang 属性真有用吗
有用，而且影响直接：屏幕阅读器靠它切换语音引擎，拼写检查器据此启用中文词典，搜索引擎也用它判断页面主语言。设错或留空，会导致无障碍体验降级、SEO 权重稀释。
- 中文站点推荐用
lang="zh-CN"（简体）、lang="zh-TW"（繁体），不用lang="zh"这种泛化值 - 可局部覆盖：比如一段英文引文写成
<blockquote lang="en">...，浏览器和辅助工具会识别切换 - 不要写成
language="zh-CN"——那是过时的 Netscape 属性，现代 HTML 只认lang
<meta charset="utf-8"> 放错位置就乱码
它必须出现在 <head> 内、且越靠前越好（最好第二行）。如果被 <title> 或其他标签挡住，某些浏览器（尤其是旧版 IE 和部分移动端 WebView）会先按默认编码（如 GBK）解析，等读到 charset 时已晚——标题、脚本路径、甚至内联 <style> 都可能崩出 。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须写成
<meta charset="utf-8">，不是charset=utf-8（少尖括号）或<meta content="utf-8" charset>（属性名颠倒） - UTF-8 是唯一推荐值；
gbk、iso-8859-1等已淘汰，不兼容 emoji 和多数中文生僻字 - 服务器 HTTP 响应头中的
Content-Type若声明了不同编码，会覆盖该 meta 标签——需前后一致
<meta name="viewport"> 不只是给手机看的
它控制的是整个视口（viewport）的缩放行为，影响桌面端高 DPI 屏幕、平板分屏、甚至 Windows 缩放设置下的渲染精度。没它，Chrome 在 200% 缩放下可能把 375px 宽的容器当成 750px 渲染，导致布局错位。
- 标准写法是
<meta name="viewport" content="width=device-width, initial-scale=1.0">；漏掉initial-scale=1.0，iOS Safari 会强制放大文字 -
width=device-width表示视口宽度 = 设备逻辑像素宽度（非物理像素），这是响应式的基础锚点 - 不要加
user-scalable=no——它破坏可访问性，且在 iOS 10+ 上已被忽略
真正容易被忽略的，是这些标签之间的协作关系：<DOCTYPE> 决定解析模式，lang 影响语义理解，charset 控制字节解码，viewport 管理坐标系统——它们共同构成浏览器加载页面的第一道指令集，缺一不可，改错一个，后续所有 CSS 和 JS 都可能在错误前提下运行。
