doctype声明必须位于第一行且无前置空格或注释，否则触发怪异模式；html标签须带lang属性（如zh-cn）以支持无障碍与seo；charset必须在viewport前且为utf-8；优先使用header、main等语义化标签。
DOCTYPE 声明必须写在第一行，且不能带任何前置空格或注释
浏览器靠 判断是否启用 HTML5 标准模式。如果漏写、写错（比如写成 <code> 虽然合法但不推荐）、或前面有空格/换行/注释，页面会触发怪异模式（Quirks Mode），导致盒模型、字体继承等行为不可控。
常见错误现象：
- 明明写了
box-sizing: border-box，但 padding 仍撑大元素宽度 -
margin: 0 auto居中失效 - 中文显示为方块或乱码（间接影响）
html 标签要带 lang 属性，否则屏幕阅读器和 SEO 会打折
不是可选项。它告诉浏览器和辅助工具：这个页面主体语言是简体中文。省略后，语音朗读可能用英文音调读中文，搜索引擎也可能误判内容地域性。
使用场景：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 政府、教育、电商类网站必须符合无障碍规范（WCAG）
- 多语言站点需按实际切分，如港澳用
lang="zh-HK"，台湾用lang="zh-TW" - VS Code 插件（如 Auto Rename Tag）依赖该属性做语义推断
head 里 charset 和 viewport 必须紧挨着写，顺序不能反
<meta charset="UTF-8"> 必须出现在 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 之前。因为浏览器解析 是从上到下，charset 决定了后续所有字节如何解码——如果 viewport 在前，而 charset 缺失或滞后，早期解析就可能把中文 meta 值当成乱码处理。
参数差异：
-
charset只能出现一次，且必须是UTF-8（不要用utf8或UTF8） -
viewport的initial-scale=1.0在移动端必不可少；PC 端可省略，但建议保留以统一行为
body 内容区优先用语义化标签，别一股脑堆 div
直接写 <div class="header"> 不报错，但会丢失结构信息。现代浏览器、Lighthouse 审计、甚至部分爬虫都依赖 <code><header></header>、<main></main>、<footer></footer> 这类语义标签识别内容层级。
容易踩的坑：
-
<main></main>在整个文档中只能出现一次，且不能嵌套在<article></article>或<aside></aside>内 -
<nav></nav>应包裹导航链接，不是所有横向菜单都算<nav></nav>（比如页脚一排友情链接建议用<footer></footer>+<p></p>） - 用
<section></section>前先问：这部分有没有独立标题？没有就用<div> 更诚实 真实项目里最常被忽略的，其实是 <code><meta charset="UTF-8">的位置和的强制存在——它们不产生视觉效果，但一旦出错，调试成本远高于加几行 CSS。
