html页面必须以开头且无前置字符，配合、、和构成标准结构，否则触发怪异模式或导致乱码、错位、js异常等问题。
HTML 页面结构不是“随便写写就能跑”，缺了 或 <code> 根标签，浏览器就可能退化到怪异模式，中文乱码、样式错位、JS 行为异常都可能由此而来。
必须写在第一行的
这个声明不是 HTML 标签，而是告诉浏览器：“请用 HTML5 标准解析本页”。不写、写错位置（比如缩进或前面有空格）、写成旧式声明（如 ），都会触发怪异模式（Quirks Mode）——此时 <code>box-sizing、height: 100% 等行为和标准模式完全不同，调试时会误以为是 CSS 写错了。
实操建议：
- 严格放在文件最开头，前面不能有任何字符（包括空格、BOM、注释）
- 大小写不敏感，但惯例全大写加空格：
- 不要写成
<doctype html></doctype>或（部分编辑器会自动转大写，但别依赖）
不设 lang 不影响页面显示，但会影响屏幕阅读器发音、搜索引擎语义识别、甚至某些 CSS 伪类（如 :lang(zh)）和字体回退逻辑。中文页写 lang="en"，拼音可能被读成英文音；写 lang="" 或留空，等于没声明。
实操建议：
- 中文内容统一用
lang="zh-CN"（非zh或zh-cn，后者不符合 BCP 47 规范） - 如果页面含多语言区块（如英文引用），可用局部
lang="en"覆盖，例如：<blockquote lang="en">...</blockquote> - VSCode 中装 “Auto Rename Tag” 插件可避免
忘闭合
<meta charset="UTF-8">、<meta name="viewport" content="width=device-width, initial-scale=1.0">、<title></title> 这三项，少一个就埋一个坑：
-
<meta charset="UTF-8">缺失 → 中文显示为方块或问号（尤其 Windows 记事本另存为时默认 ANSI） - 没
viewport→ 移动端页面被缩放成小字，用户得双指放大才能看，SEO 也扣分 - 无
<title></title>→ 浏览器标签栏空白，不利于书签管理、搜索结果展示、微信内嵌页标题显示
注意：<meta charset> 必须在 <title></title> 之前（规范要求），否则部分老浏览器可能误判编码。
所有用户可见内容必须写在 内。有人把 <script></script> 放 末尾却没加 defer，结果 JS 执行卡住页面白屏——这不是结构错误，但和结构认知偏差直接相关。
实操建议：
- 初学阶段，把所有内容（文字、图片、链接）只往
里放，别试探“能不能放别处” - 若需在
引入 JS，务必加defer（顺序执行）或async（异步并行），除非你明确需要同步阻塞 -
内容为空（仅空格或换行）时，页面就是纯白，不是 bug，是预期行为
最容易被忽略的点：很多人复制代码时漏掉 和 闭合标签，浏览器虽会自动补全，但 DOM 树结构已变，后续用 JavaScript 操作 document.body 可能取到意外节点——别靠浏览器容错，自己写全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
