HTML网页开发须遵循“结构先行、路径可控、渲染可验”顺序：先写完整DOCTYPE→html→head→body骨架，确保meta charset紧贴head开头、viewport正确设置；资源路径须严格匹配文件系统大小写与相对位置；JS脚本应置于前，调试必用DevTools的Console、Network、Elements三面板验证。
制作 HTML 网页不是从 <h1></h1> 开始敲，而是按“结构先行、路径可控、渲染可验”的顺序推进。跳过顺序直接写内容，90% 的问题出在路径错、编码丢、DOM 未就绪——比如 <img src="logo.png" alt="制作HTML网页按什么顺序做？完整开发逻辑梳理" > 显示空白，<script src="app.js"></script> 报 undefined is not a function，根本不是代码写错了，是执行时机或文件位置不对。
先建骨架再填内容：DOCTYPE → html → head → body 必须完整
缺任何一层都会导致渲染异常或中文乱码。常见错误包括：<meta charset="UTF-8"> 漏写或放在 <title></title> 后面（必须紧贴 开头）、<doctype html></doctype> 写成小写 或前面加空格——浏览器可能降级为怪异模式；<code> 标签漏闭合，VS Code 不报错但某些旧浏览器会截断后续内容。
-
<doctype html></doctype>必须独占第一行，无空格、无注释、大小写敏感 -
<meta charset="UTF-8">是中第一个子元素，否则中文显示为方块 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">要加，否则手机打开就是缩放后的小字页面 -
里不要空着——哪怕只放一个<p>test</p>，也比没内容更容易验证是否加载成功
资源路径必须与文件系统严格对齐：相对路径区分大小写且不认 file:// 协议
本地双击打开 HTML 文件时，浏览器用的是 file:// 协议，它不支持服务器路由，也不解析相对路径中的大小写差异。Windows 上 images/logo.png 和 Images/logo.png 是两个路径；Mac/Linux 更严格，大小写全错就 404。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<img src="photo.jpg" alt="制作HTML网页按什么顺序做？完整开发逻辑梳理" >要求photo.jpg和 HTML 文件在同一目录 -
<link rel="stylesheet" href="css/style.css">要求存在./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 面板里看不到 <img alt="制作HTML网页按什么顺序做？完整开发逻辑梳理" > 标签？那可能是标签没闭合或被前面的语法错误吞掉了。
- 右键 → “检查”打开 DevTools，优先切到
Console查报错，再看Network确认图片/CSS/JS 是否 200 加载成功 -
Elements面板里展开，确认你写的标签是否真实存在——如果没出现，不是浏览器不支持，是 HTML 结构有误（比如<p></p>里嵌了<div> 且没闭合） <li>不要依赖“看起来像”，要确认 <code>src、href的实际解析路径：右键图片 → “在新标签页中打开图像”，看地址栏路径是否符合预期
真正卡住人的从来不是标签怎么写，而是文件在哪、浏览器怎么读、错误在哪报。每加一个资源，就查一次 Network；每改一行结构，就刷一次 Elements；每次双击打不开，先看 Console 有没有红色报错——顺序不是流程图上的箭头，是调试时你眼睛盯住的三个面板。
