浏览器乱码或排版错位主因是缺失或写错，导致进入怪异模式；必须在第一行且无bom/空格，同时中需含、和三项。
为什么浏览器一打开就乱码或排版错位
绝大多数这类问题，根源不在 CSS 或 JS，而在 缺失或写错。没有它，浏览器默认进入怪异模式（Quirks Mode），<code>、、 的解析规则全乱套——比如 margin 计算方式不同、盒模型退化、甚至 UTF-8 字符集不生效。
实操建议：
必须是文档第一行，前面不能有任何空格、注释或 BOM 字节- 不要写成
（大小写不敏感但习惯大写）或 <code>..>（HTML5 不需要 DTD） - 用 VS Code 打开文件时，右下角检查编码是否为 UTF-8 —— 如果显示 “UTF-8 with BOM”，要转成纯 UTF-8
看似“不可见”，但它控制着页面能否正确加载、显示、适配设备。漏掉关键项，轻则字体发虚、重则整个页面白屏。
必须包含的三项：
-
<meta charset="UTF-8">：决定文本解码方式，缺了中文直接变 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">：没有它，移动端页面会缩成一团，用户得双指放大才能看 -
<title></title>：不仅影响浏览器标签页文字，还参与 SEO 和书签生成，空<title></title>会被搜索引擎降权
可选但强烈建议加的：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<link rel="icon" href="/favicon.ico">：否则地址栏显示默认图标，品牌感弱 -
<link rel="stylesheet" href="style.css">：CSS 放是为了阻塞渲染，避免 FOUC（内容闪动）
所有用户可见内容，必须严格放在 内。把 <p></p>、<img> 或内联脚本直接写在 里，浏览器不会报错，但会自动把它们移到 开头——这会导致预期外的 DOM 顺序、样式继承异常、甚至 JS 执行时机错乱。
典型踩坑场景：
- 在
里写<script>console.log('hi')</script>：执行时还没解析，查document.body是null - 把
<div id="app"></div>放在和之间：浏览器修复后 DOM 结构变成<div id="app"></div>，但开发者调试时看到的源码和实际 DOM 对不上 - 用
<main></main>或<header></header>替代<div> 时，忘了它们语义上仍是 <code>的子元素，不能跨出边界HTML5 结构元素（
<header></header>、<nav></nav>、<main></main>）不是“可有可无的装饰”这些标签不改变视觉，但直接影响辅助技术、SEO 和维护成本。搜索引擎和屏幕阅读器靠它们识别页面主次关系；团队协作时，
<main></main>比<div class="content"> 更明确表达“这是唯一主体内容”。 <p>注意兼容性与约束：</p> <ul> <li> <code><main></main>在一个页面中只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav>内 -
<nav></nav>应只包裹导航链接，不要把搜索框、登录入口硬塞进去（它们属于<header></header>） - IE11 及更早版本不支持
<main></main>，需配document.createElement('main')或用<div role="main"> 降级 <li>结构元素本身不带默认样式，但部分浏览器会给 <code><main></main>加display: block，而<section></section>默认就是块级，不用额外设
真正容易被忽略的，是文档结构对自动化工具的影响——爬虫、Lighthouse、无障碍检测器都依赖语义化标签做判断，而不是靠 class 名猜意图。写对 和 的边界，比调好一个动画更影响长期可维护性。
