大型项目HTML模板必须物理拆分与语义组织并重：按业务页面拆为独立HTML文件，抽离公共组件，使用语义化标签控制嵌套深度，统一目录结构与路径规范，并严格遵守模板继承规则。

大型项目里，HTML模板结构不能靠复制粘贴硬撑，必须从物理拆分和语义组织两头入手——拆得清楚，才能改得安心；结构清晰，才能读得明白。

按业务页面物理拆分，每个 URL 对应一个真实 HTML 文件

别再把所有内容堆在 index.html 里。中大型项目必须拆成多个独立页面文件，比如 dashboard.html、users.html、settings.html。每个文件对应一个可直接访问的 URL，刷新不丢上下文，SEO 友好，也方便测试和协作。

• 所有页面共享的页头、导航、页脚，绝不能重复写二十遍——必须抽离为独立文件（如 components/header.html）
• 用服务端 includes（PHP）、构建工具（Eleventy/Vite）或模板引擎（Jinja2/Django）引入公共片段，而不是靠 JS fetch 拼接
• 避免用 加载公共区域：影响首屏性能、破坏 SEO、无法被爬虫正确解析

用语义化标签定义骨架，拒绝无意义嵌套

模板结构不是“怎么写都能跑”，而是“怎么写才好维护”。

、

、

、

不是可选装饰，是浏览器和辅助技术理解页面逻辑的基础。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 必须且只能出现一次，它是整个页面唯一主内容容器
• 专管导航，不要包在
  里——直接写
• 嵌套深度控制在三层以内；连续四行以上无 class 的
  基本就是冗余包裹
• 用
  替代
  ，用

  +

  包图文组合，语义更准、样式更稳

  统一资源路径与目录结构，杜绝“到处找文件”

  路径混乱是小项目快速失控的起点。根目录下堆满文件看着省事，实际一加到第五个页面就开始 404。必须建立稳定、可预测的目录约定。

  • 小项目（≤5 页面、单人维护）：根目录放 index.html，再建 css/、js/、images/、pages/ 四个文件夹
  • 中大型项目：必须用 src/（源码） + dist/（产出）结构，配合构建工具自动处理路径和资源引用
  • 所有内部链接用相对路径：pages/contact.html，不是 /pages/contact.html（后者本地双击直接失败）
  • 共用的 meta 标签、字体、图标等公共资源，统一抽到 _includes/head.html 或模板继承的 base.html 中

  模板继承要守死规则，别让语法错误拖垮整个页面

  用 {% extends %} 不是加个标签就完事，它有硬性约束。Django / Flask / Jinja2 都一样：出错不是“功能没生效”，而是整个模板直接崩溃。

  • {% extends 'base.html' %} 必须写在子模板最开头，前面不能有任何空格、换行、BOM 或注释
  • 一个子模板只允许一个 {% extends %}，不支持多重继承
  • {% block %} 是预留替换区，不是写默认内容的地方；父模板里别塞完整 HTML，否则子模板一覆盖就全丢
  • 常见报错如 “Could not parse the remainder” 或 “TemplateSyntaxError”，八成是顶部多了空行或用了中文引号