HTML模板需语义化、无歧义嵌套、零冗余：必含DOCTYPE、lang、UTF-8、title；用header/nav/main/aside/footer替代div堆砌；img需alt、a用相对路径、form必配label；预留[inject:css/js]锚点便于扩展。

直接写能跑的 HTML 模板不难，难的是半年后别人（或你自己）打开文件还能快速看懂结构、改得安心。核心就一条： 标签下必须有明确语义、无歧义嵌套、零冗余标签。

必须包含的最小结构块

浏览器不报错 ≠ 结构合理。漏掉任意一项，后续加 CSS 或 JS 时容易莫名失效。

• 放第一行，不能省、不能换行、不能写成 —— 少个大写 D，某些旧 WebView 会进怪异模式
• 必须带 lang 属性，且值要符合 BCP 47（zh-CN 可，zh 或 cn 不可）
• 必须出现在 最前面，不能塞在 后面 —— IE 和部分安卓 WebView 会按 ISO-8859-1 解码，中文全变方块
• 必须存在，哪怕先写 ，空 会导致 SEO 抓取失败

body 里别用 div 堆出整页结构

用

是新手最常写的“能用但不该用”的写法。它让机器和人都无法判断这块内容到底是什么角色。

• 顶部区域一律用
  ，不是因为“好看”，而是屏幕阅读器靠这个跳转，搜索引擎靠这个识别页面主干
• 导航菜单必须包在
  里，且内部用
  ，不能用
  —— 否则键盘 Tab 键无法顺序聚焦
• 正文主体强制用
  包裹，侧边栏用
  ，页脚用
  ；三者并列，不互相嵌套
• 避免
  套娃，每层

  都得有明确理由：是为 CSS 布局隔离？还是为 JS 绑定 ID？否则删掉

  图片、链接、表单这些细节最容易翻车

  它们看着小，但一个 alt 缺失或 href 路径写错，整个模板在无障碍或跨环境部署时就崩了。

  • 的 src 和 alt 必须同时存在；装饰性图片写 alt=""，不能省略属性本身
  • 用相对路径，开头带 ./ 或 /；写成 contact.html（无点斜杠）在某些服务器上 404
  • 内每个 必须配 ，for 值和 input 的 id 严格一致 —— 否则点击文字无法聚焦输入框
  • 列表项只允许直接子元素是
  • ；往
    里塞
    

    DeepBI DHTML 页面生成器

    生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

    下载
    或
    ，浏览器会自动补
  • ，但补的位置不可控

    模板不是写完就扔，要留好扩展缝

    真正难维护的不是当前代码，而是“下周要加个搜索框”“下个月要支持英文版”时，你发现所有结构都卡死了。

    在 末尾加一行注释：；在 底部加：。这两处就是留给构建工具插入样式和脚本的锚点，不硬编码路径，不手动改文件 —— 否则每次打包都要人肉替换。