HTML5页面只需DOCTYPE声明及html、head、body基本结构；关键在于meta charset、viewport、title等标签的正确配置，而非所谓“框架”。
HTML5 页面不需要“框架”也能跑，但你可能真需要一个最小结构
浏览器只认符合规范的 HTML 文档，<!DOCTYPE html> + <html> + <head> + <body> 就够了。所谓“HTML5 框架”，其实是开发者自己约定的一套基础结构，用来避免每次从零写 <meta charset="utf-8">、viewport、基础 CSS 重置这些重复动作。
常见错误现象：页面中文乱码、手机上文字小得看不清、CSS 样式在不同浏览器表现不一致——往往不是缺框架，是漏了这几个关键标签。
-
<meta charset="utf-8">必须放在<head>最前面，否则浏览器可能按 ISO-8859-1 解析，中文直接变 -
<meta name="viewport" content="width=device-width, initial-scale=1">不加的话，移动端会默认以 980px 宽度渲染，文字缩成一团 -
<title>虽然不报错，但没它，浏览器标签页显示空名，SEO 和书签都受影响
用 html5-boilerplate 还是手写？看这三点再决定
html5-boilerplate 是最常被搜到的“HTML5 框架”，但它不是库，也不是模板引擎，只是一个经过大量实战验证的静态 HTML/CSS/JS 起始包。它的价值不在“功能”，而在“避坑”。
使用场景：你要上线一个静态官网、活动页、后台管理首页这类不依赖构建工具的页面；或者想快速验证一个交互原型，又不想花时间调字体、清 margin、处理 IE 兼容。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 它默认包含
normalize.css（不是reset.css），保留有用的默认样式，比如表单控件外观、标题层级缩放比例 - 内置了针对旧版 IE 的条件注释和 polyfill 加载逻辑，比如
<!--[if lt IE 9]>...<![endif]-->，现在多数项目可删，但若需支持 IE8，留着比自己写稳 - 它的
.htaccess和404.html是为 Apache 静态部署准备的，如果你用 Vite、Next.js 或 Nginx，这部分基本不用，硬套反而出问题
<script> 放哪儿？别被“最佳实践”带偏，先看执行时机
很多教程说“JS 放 </body> 前”，但这是有前提的：脚本不操作 DOM，或 DOM 已加载完成。如果 JS 里写了 document.getElementById("app") 却放在 <head>，运行时返回 null —— 因为 <div id="app"> 还没解析到。
性能影响很实际：阻塞渲染。浏览器遇到 <script src="xxx.js">，会暂停 HTML 解析，去下载、执行 JS，等它完了才继续画页面。
- 纯逻辑脚本（如工具函数、埋点 SDK）：放
<head>+defer属性，保证顺序执行且不阻塞渲染 - 依赖 DOM 的初始化脚本（如
new Chart(...)）：放</body>前，或用DOMContentLoaded事件包裹 - 第三方异步脚本（如百度统计、Google Analytics）：用
async，但注意它不保证执行顺序，多个async脚本谁先下完谁先跑
别把“HTML5 框架”当成黑盒，真正要盯住的是这三个地方
很多人下载了 html5-boilerplate 或某模板，改完内容就上线，结果在 iOS Safari 上字体发虚、在 Chrome 新版里表单边框异常、在微信内嵌浏览器里 touch 事件不触发——问题不出在框架本身，而出在你没动的那几行配置。
-
<meta name="theme-color" content="#fff">：控制 Android 地址栏颜色，不设默认是灰色，和白底页面一起看特别突兀 -
<link rel="icon" href="favicon.ico">：路径必须存在，404 不报错但会多一次 HTTP 请求，影响首屏速度 -
<html lang="zh-CN">：不只是 SEO，屏幕阅读器靠它切换语音引擎，漏写会导致读音错乱（比如把“北京”读成英文发音）
复杂点在于：这些标签看着简单，但一旦和其他系统耦合（比如 CMS 自动生成 head、CDN 强制注入 meta），就容易被覆盖或重复插入。上线前用浏览器开发者工具的 Elements 面板，手动展开 <head> 看一眼，比任何检查工具都管用。
