大型项目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 拼接
- 避免用
<iframe></iframe>加载公共区域：影响首屏性能、破坏 SEO、无法被爬虫正确解析
用语义化标签定义骨架，拒绝无意义嵌套
模板结构不是“怎么写都能跑”，而是“怎么写才好维护”。
-
<main></main>必须且只能出现一次，它是整个页面唯一主内容容器 -
<nav></nav>专管导航，不要包在<div class="nav"> 里——直接写 <code><nav aria-label="主导航"></nav> - 嵌套深度控制在三层以内；连续四行以上无 class 的
<div> 基本就是冗余包裹 <li>用 <code><section></section>替代<div class="section">，用 <code><figure>+<figcaption></figcaption></figure>包图文组合，语义更准、样式更稳统一资源路径与目录结构，杜绝“到处找文件”
路径混乱是小项目快速失控的起点。根目录下堆满文件看着省事，实际一加到第五个页面就开始 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”，八成是顶部多了空行或用了中文引号
