HTML网页开发须遵循“结构先行、路径可控、渲染可验”顺序：先写完整DOCTYPE→html→head→body骨架，确保meta charset紧贴head开头、viewport正确设置；资源路径须严格匹配文件系统大小写与相对位置；JS脚本应置于前，调试必用DevTools的Console、Network、Elements三面板验证。

制作 HTML 网页不是从

开始敲，而是按“结构先行、路径可控、渲染可验”的顺序推进。跳过顺序直接写内容，90% 的问题出在路径错、编码丢、DOM 未就绪——比如 显示空白，<script src="app.js"></script> 报 undefined is not a function，根本不是代码写错了，是执行时机或文件位置不对。

先建骨架再填内容：DOCTYPE → html → head → body 必须完整

缺任何一层都会导致渲染异常或中文乱码。常见错误包括： 漏写或放在 后面（必须紧贴 开头）、 写成小写 或前面加空格——浏览器可能降级为怪异模式； 标签漏闭合，VS Code 不报错但某些旧浏览器会截断后续内容。

• 必须独占第一行，无空格、无注释、大小写敏感
• 是 中第一个子元素，否则中文显示为方块
• 要加，否则手机打开就是缩放后的小字页面
• 里不要空着——哪怕只放一个

  test

  ，也比没内容更容易验证是否加载成功

资源路径必须与文件系统严格对齐：相对路径区分大小写且不认 file:// 协议

本地双击打开 HTML 文件时，浏览器用的是 file:// 协议，它不支持服务器路由，也不解析相对路径中的大小写差异。Windows 上 images/logo.png 和 Images/logo.png 是两个路径；Mac/Linux 更严格，大小写全错就 404。

DeepBI DHTML 页面生成器

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

下载

• 要求 photo.jpg 和 HTML 文件在同一目录
• 要求存在 ./css/style.css，不能写成 href="/css/style.css"（/ 在 file:// 下指向磁盘根目录）
• <script src="js/app.js"></script> 必须放在 前，否则 document.body 还没生成，JS 拿不到 DOM 元素
• VS Code 中用 Live Server 插件启动服务，能绕过 file:// 限制，推荐新手从这一步开始调试

验证必须用浏览器 F12 实时看：Elements、Console、Network 缺一不可

双击打开 ≠ 正常运行。很多问题只在开发者工具里暴露：net::ERR_FILE_NOT_FOUND 显示路径错，Uncaught ReferenceError: xxx is not defined 说明 JS 变量未声明或加载失败，Elements 面板里看不到 标签？那可能是标签没闭合或被前面的语法错误吞掉了。

• 右键 → “检查”打开 DevTools，优先切到 Console 查报错，再看 Network 确认图片/CSS/JS 是否 200 加载成功
• Elements 面板里展开 ，确认你写的标签是否真实存在——如果没出现，不是浏览器不支持，是 HTML 结构有误（比如
  里嵌了
  且没闭合）
• 不要依赖“看起来像”，要确认 src、href 的实际解析路径：右键图片 → “在新标签页中打开图像”，看地址栏路径是否符合预期

真正卡住人的从来不是标签怎么写，而是文件在哪、浏览器怎么读、错误在哪报。每加一个资源，就查一次 Network；每改一行结构，就刷一次 Elements；每次双击打不开，先看 Console 有没有红色报错——顺序不是流程图上的箭头，是调试时你眼睛盯住的三个面板。