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