html模板是符合标准结构的.html文件，必须包含、、（含在前、）、三层骨架，缺一不可。
HTML 模板不是某种特殊文件类型，它就是符合标准结构的 .html 文件——只要包含 、、 三层骨架，且 <meta charset="UTF-8"> 和 <title></title> 不缺失，就能被浏览器正确解析并作为网页模板使用。
为什么 <meta charset="UTF-8"> 必须写在
浏览器解析 HTML 时，一旦遇到非 ASCII 字符（比如中文），会立即按当前默认编码渲染；若此时还没读到 <meta charset>，就可能按 ISO-8859-1 或系统本地编码解码，导致乱码。这个标签必须是 中第一个或第二个元素（紧挨着 <title></title> 前或后），不能塞在 <script></script> 后面，也不能放在 里。
-
<meta charset="UTF-8">要比<title></title>更早出现才最稳妥（W3C 推荐） - 如果用编辑器保存为 UTF-8 without BOM，但 HTML 里没写该 meta 标签，仍可能乱码
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">是旧写法，HTML5 中已不推荐
<lang></lang> 属性到底要不要加？
加，而且建议加在 标签上。它不直接影响页面显示，但会影响屏幕阅读器语调、搜索引擎对语言区域的识别、甚至某些 CSS 的 :lang() 伪类匹配。省略后，浏览器可能 fallback 到系统默认语言，导致语音朗读生硬或 SEO 信息不完整。
- 值应匹配实际内容语言，如简体中文用
lang="zh-CN"，繁体用lang="zh-TW" - 不要写成
lang="zh"这种泛化值，部分辅助技术无法准确识别 - 嵌套子元素可覆盖，例如
<p lang="en">This is English</p>
为什么空
不是“空”本身出错，而是很多新手把 <script></script> 放在 里，又没加 defer 或 DOMContentLoaded 监听，结果脚本执行时 还没加载完，document.querySelector('body') 虽能拿到，但里面没有子节点——更常见的是误操作：删光了 内容却忘了补回一个容器元素，导致后续 JS 找不到挂载点。
-
<script></script>放在前是最简单可靠的方案 - 若必须放
，至少加上defer属性（适用于外部脚本） - 现代项目中，
至少保留一个根容器，如<div id="app"></div>，避免直接操作空 body
<doctype html></doctype> 缺失会怎样？
浏览器会进入 Quirks Mode（怪异模式），CSS 盒模型、height 计算、vertical-align 行为等全部退回到 IE5.5 时代的非标准逻辑。你写的 flex 布局可能完全失效，100vh 可能撑不满视口，甚至 margin: 0 auto 居中都偏移。
必须是文件第一行，前面不能有任何字符（包括空格、BOM）- 大小写不敏感，但惯例全大写 + 小写 html 组合，不要写成
- HTML5 中这是唯一合法 DOCTYPE，不需要版本号或 DTD 引用
最容易被忽略的是：所有这些标签位置和顺序问题，都不会报错，浏览器照常渲染——但细微偏差会在多设备适配、SEO 抓取、无障碍访问时集中爆发，而那时你很难联想到是模板骨架本身出了问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
