HTML文档结构的核心是规范性而非美观性，必须严格遵循：1. <!DOCTYPE html>须顶格首行；2. <html lang="zh-CN">需明确语言标签；3. <meta charset="UTF-8">须置于<head>最前；4. <meta name="viewport">不可省略；5. <title>、<head>、<body>均不可缺。
HTML文档结构不是“怎么写好看”，而是“不写错就赢了一半”——漏掉<!DOCTYPE html>或<html lang="zh-CN">，浏览器立刻进怪异模式，CSS和JS行为全乱。
为什么<!DOCTYPE html>必须顶格写在第一行
它不是可选注释，是强制开关。浏览器靠它决定用标准模式还是怪异模式渲染页面。一旦前面有空格、BOM头、注释或换行，<!DOCTYPE html>就失效。
- 错误写法：
<!-- 注释 --><!DOCTYPE html>、\n<!DOCTYPE html>、<?php echo '<!DOCTYPE html>'; ?> - 正确写法：文件开头**绝对第一字符**就是
<!，小写，无空格，无缩进 - 影响：怪异模式下，
box-sizing默认为content-box、width:100%可能撑破容器、document.body.scrollTop返回0等
<html lang="zh-CN">里的lang属性不能省
它不只是给屏幕阅读器看的。搜索引擎靠它判断内容语言，浏览器靠它选字体回退策略（比如中文字体缺失时是否 fallback 到日文/韩文字体），甚至影响某些 CSS 伪类（如:lang()）匹配。
-
lang="zh"太模糊，推荐用lang="zh-CN"（中国大陆）、lang="zh-TW"（台湾）等 BCP 47 标准值 - 不要写成
lang="cn"或lang="ch"——这些不是合法语言标签 - 如果页面含多语言段落，可在局部元素上覆盖，例如：
<p lang="en">Hello</p>
<meta charset="UTF-8">必须放在<head>最前面
它的位置决定了浏览器解析后续 HTML 的编码起点。放晚了，<title>里的中文可能已乱码，且无法挽回。
立即学习“前端免费学习笔记（深入）”；
- 必须紧贴
<head>开始标签后，顺序优先于<title>、<meta name="viewport">等所有其他<meta> - 不能写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">——这是 HTML4 写法，HTML5 只认charset属性 - UTF-8 是唯一推荐值；
GBK或GB2312在现代项目中等于埋雷
<meta name="viewport">不是移动端才需要
哪怕你只做 PC 端后台系统，也得加。否则 Chrome / Edge 在高 DPI 屏幕（如 MacBook Retina、Windows 缩放 125%+）下会自动缩放页面，导致字体模糊、布局错位、点击区域偏移。
- 最小可用写法：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 不要加
user-scalable=no——这会让残障用户无法放大页面，违反 WCAG - 如果禁用缩放，iOS Safari 会忽略
initial-scale，反而更不可控
最容易被忽略的点：整个结构里没有一个标签是“可选但建议加”的——<title>缺了 SEO 归零，<body>缺了浏览器会自动补但 DOM 树异常，连<head>都必须显式写出。所谓“最简结构”，其实是“最少不可删项”。
