必须使用<!DOCTYPE html>且独占首行、全小写、无前置字符，否则浏览器进入怪异模式，document.compatMode返回"BackCompat"，导致盒模型、Flex布局等行为异常。
DOCTYPE 必须独占首行且全小写
漏掉、写错位置或大小写混用，浏览器会直接进入怪异模式（Quirks Mode），document.compatMode 返回 "BackCompat"，盒模型、Flex 布局、margin 行为全乱。
-
<!DOCTYPE html>必须是文件第一行第一个字符，前面不能有任何空格、BOM、注释或 PHP 输出 - 禁止写成
<!-- 注释 --><!DOCTYPE html>、<?php echo '<!DOCTYPE html>'; ?>或<!doctype html> - 旧式写法如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">已过时，HTML5 只认<!DOCTYPE html>
lang 属性影响屏幕阅读器和搜索引擎判断
lang 不是“可选装饰”，设错会导致语音朗读用英文念汉字拼音、拼写检查失效、Google 搜索结果语言标注错误。
- 根元素必须带
lang，推荐精确值：<html lang="zh-CN">（大陆简体）、<html lang="zh-TW">（台湾繁体） - 禁用
lang="cn"、lang="ch"、lang="zh"这类非 BCP 47 合规值 - 局部切换语言可用：
<p lang="en">Hello</p>，但不要滥用
meta charset 必须紧接 DOCTYPE 后且无 BOM
它决定浏览器解析 HTML 的初始编码。放错位置或文件含 BOM，中文、emoji 一出现就乱码，后续再声明也救不回来。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<meta charset="UTF-8">必须在<head>内最前——第二行，紧接<html>开始后 - 禁止写成
<meta charset="utf8">（缺横杠）或<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（HTML5 中冗余） - 编辑器保存时选 “UTF-8 without BOM”，VS Code 默认可能带 BOM，需手动关掉
main 标签有硬性约束不能乱用
它不是 <div class="main"> 的语义替代品，而是无障碍导航的关键锚点，违反规则会导致键盘用户无法跳转主要内容区。
立即学习“前端免费学习笔记（深入）”；
-
<main>在整个文档中只能出现一次 - 不能嵌套在
<header>、<footer>、<nav>、<aside>内部 - 必须直接包裹主体内容，且不能与
<article>或<section>混淆用途：一个页面只有一个“主要内容区”，其余是补充或独立模块
实际验证时，别只靠肉眼检查。W3C Validator（validator.w3.org）会明确报出 lang 缺失、meta charset 位置错误、main 嵌套违规等具体问题——这些地方改起来快，但一旦忽略，后期调试成本远高于初期多敲两行。
