健壮的html靠结构正确、语义清晰、容错性强、可验证四点落地：必须声明doctype和lang属性，严格使用语义化标签（如header、main、h1），img必设alt，属性值统一用双引号，meta charset须为head内首项。
直接上结论：健壮的 HTML 不是靠“写得漂亮”撑起来的，而是靠「结构正确、语义清晰、容错性强、可验证」四点落地。任何脱离浏览器解析行为和实际协作场景的“美观缩进”或“标签洁癖”，都可能让代码在 IE11、旧版 Safari 或屏幕阅读器里突然失效。
DOCTYPE 和 lang 属性必须显式声明
不写 ，浏览器会退化到怪异模式（Quirks Mode），盒模型、<code>getBoundingClientRect() 行为、甚至 flex 布局都会出偏差；不设 lang，语音合成工具读不出中文，翻译插件无法识别语言，SEO 也会弱化。
必须是文档第一行，不能有空格或注释前置-
推荐用带地区码的格式，比zh更精准 - 避免
或留空 —— 这等于没设，部分辅助技术会 fallback 到系统默认语言
语义化标签不是装饰，是解析依据
浏览器、搜索引擎、自动化测试工具（如 axe、Lighthouse）都依赖语义标签做结构推断。用 <div class="header"> 代替 <code><header></header>，会导致 document.querySelector('header') 查不到，role="banner" 自动绑定失效，甚至影响 outline 键盘导航顺序。
- 主标题必须且仅用一次
<h1></h1>；子标题严格按层级用<h2></h2>–<h6></h6>，跳级（如<h1></h1>后跟<h3></h3>）会破坏大纲树 -
<main></main>应包裹页面核心内容，且每个页面只出现一次；没有它，屏幕阅读器可能无法快速定位主体 -
<img>的alt属性不可省略 —— 即使是装饰图，也要写alt=""（空字符串），而不是删掉属性或写alt="图片"
自闭合标签和属性书写有真实兼容差异
HTML5 允许 <img src="a.jpg"> 不写斜杠，但某些 XML 工具链（如 JSDOM 测试环境、部分 CMS 导出器）或老旧构建脚本仍会报错；属性不用双引号在多数现代浏览器能运行，但在 <a href="/path?k=v&w=x"></a> 这类含 & 的 URL 中会提前截断。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 统一用
<img src="a.jpg" alt="">形式，不加/，也不写<img>—— 这是 HTML5 官方推荐写法 - 所有属性值必须用双引号，包括布尔属性：写
disabled="disabled"，别写disabled（虽然合法，但易被误删或与 JSel.disabled = true混淆） -
class和id值禁止用中文、空格、特殊符号；连字符-可用，下划线_在部分 CSS 预处理器中可能触发意外行为
head 中的 meta 和资源加载顺序影响首屏表现
<meta charset="UTF-8"> 必须是 内第一个元素，否则浏览器可能已按错误编码解析了前面的 <title></title> 或 <script></script>；JS 放 底部虽是老经验，但在现代 SPA 场景下，defer 或 type="module" 才是更可控的选择。
-
<meta charset="UTF-8">前不能有任何内容（包括空行、BOM 字节），否则部分 Android WebView 会忽略它 - CSS 必须放在
中，且早于<script></script>—— 否则 JS 执行时可能读不到样式计算结果（如getComputedStyle返回空） - 避免
<link rel="stylesheet" href="a.css" media="print">这类非关键 CSS 放在 head 顶部，它会阻塞渲染，应改用onload动态注入
最常被忽略的一点：健壮性不体现在“我写的 HTML 能过 W3C 验证”，而在于“当后端模板漏掉一个
