HTML本身不支持模块化语法，所谓“HTML模块化”本质是通过语义化标签划分结构边界、<template>或Web Components复用片段、构建工具编译合并、SSI服务端包含等路径实现，并非直接import HTML文件。
HTML 本身不支持模块化语法，所谓“模块化”是靠结构划分、文件组织、加载机制和构建流程共同实现的——不是加个 import 就能生效，更不能直接 import './header.html'，否则会报 TypeError: Failed to resolve module specifier。
用语义标签先划出天然模块边界
这是最基础也最容易被跳过的一步。不用 JS、不配工具，仅靠 HTML5 标签就能让结构具备模块语义：
-
<header>包页面级标题/Logo，别塞搜索框或用户菜单（那些属于交互组件，应归<nav>或独立<aside>） -
<nav>只放链接，里面混<button>或表单会破坏导航语义 -
<main>必须且只能出现一次，不能嵌在<article>或另一个<main>里 -
<section>要有明确主题（如“产品特性”），空的或只含一段文字+一张图的，优先考虑<article> -
<aside>内容必须与邻近<section>或<article>相关，全站广告位不属于它
复用 HTML 片段的三种可行路径
想把 header.html、footer.html 拆出来复用，得选对技术路径，否则要么报错，要么无法调试：
-
静态站点 + 无构建工具：用
<template>+ JS 克隆注入。把结构写进<template id="header-template"><header>...</header></template>，再用document.importNode(template.content, true)安全克隆（比cloneNode(true)更稳，尤其含表单时） -
需要服务端参与：启用 SSI（如 Apache 的
Options +Includes），主页面写<!--#include file="footer.html" -->，注意文件后缀得是.shtml或服务器配置允许 -
现代前端项目：用构建工具（Vite/Webpack）+ 模板引擎（Pug、Handlebars）或组件化框架（React/Vue）。此时
header.html实际是编译期合并，运行时不存在独立 HTML 文件
别用已废弃的 <link rel="import">，所有主流浏览器已移除支持；也别在 file:// 协议下直接 fetch，会触发 CORS 错误——开发时必须起本地服务器（npx serve 或 python3 -m http.server）。
立即学习“前端免费学习笔记（深入）”；
样式隔离不能只靠文件拆分
把 card.css 单独建个文件 ≠ 样式模块化。class 名仍是全局的，.title 在多个模块里冲突照旧：
- 纯静态页无构建流程：用 BEM 命名（如
.card__title）+ 手动加命名空间前缀（如.u-card__title），配合 PostCSS 自动加前缀 - 有构建工具（Vite/Webpack）：启用 CSS Modules，关键配置是
css-loader的modules: true和localIdentName: "[name]_[local]_[hash:6]"；但 HTML 中不能写class="card__title"，必须通过 JS import 后取真实 class 名（styles.card__title） - 别漏掉路径匹配规则：要排除
node_modules和公共样式（如reset.css），否则第三方库样式会被重命名崩掉
Web Components 是唯一真正封装的 HTML 模块
只有 customElements.define() 注册的自定义元素（如 <site-header>），才同时封装结构、样式、行为，并通过 Shadow DOM 隔离样式：
- 构造函数里必须调用
super()，漏掉会报Failed to construct 'CustomElement': Please use the 'new' operator - DOM 操作不能写在
constructor里（此时元素未挂载），改用connectedCallback - 要响应属性变化（如
<my-card title="Hello">），得声明static get observedAttributes()并实现attributeChangedCallback - Shadow DOM 内部样式不会泄漏，但需手动
slot透传内容，不能靠innerHTML硬塞
真正模块化的难点不在怎么写，而在怎么保证结构、样式、脚本三者同步迁移——复制一个 <site-header> 到新页面，却忘了带它的 JS 定义或 Shadow DOM 样式，模块就当场失效。
