应使用语义化标签如<header>、<nav>、<main>、<section>、<aside>、<footer>划分模块边界，明确内容角色；避免滥用<div>和<section>，确保<main>唯一且直接包裹主体，<header>/<footer>可嵌套于<article>或<section>内，<nav>仅用于导航链接组。
怎么用语义化标签划分模块边界
模块化不是靠一堆 <div> 堆出来的，而是用 <header>、<nav>、<main>、<section>、<aside>、<footer> 这些标签明确表达“这是什么”。比如一个产品页里，“产品参数表”不是随便套个 <div class="box">，而是 <section> —— 它代表一个独立主题区块；“相关推荐”放在 <aside> 里，浏览器和爬虫立刻知道它和主内容有关但可分离。
常见错误是把 <section> 当成万能容器：一个页面塞十几个 <section>，却没有实际主题区分。结果是结构看似“模块化”，实则语义失效，SEO 和屏幕阅读器都读不懂。
-
<main>全页只能有一个，且必须直接包裹主体内容（不能嵌套在<div>里） -
<header>和<footer>可以出现在<article>或<section>内部，表示该模块自己的头尾 -
<nav>不等于所有链接集合，只用于导航目的的链接组（如顶部菜单、分页）
如何复用头部/页脚这类公共模块
纯静态 HTML 没服务端 include，但可以用 <template> + 简单 JS 拼装，或手动复制粘贴后靠构建工具统一替换。零基础建议先用前者，避免后期改 10 个文件。
例如，在 index.html 底部加一段脚本：
立即学习“前端免费学习笔记（深入）”；
<script>
document.querySelectorAll('[data-include]').forEach(el => {
const path = el.dataset.include;
fetch(path)
.then(res => res.text())
.then(html => el.innerHTML = html);
});
</script>然后在需要插入页脚的地方写：<footer data-include="footer.html"></footer>。注意：footer.html 里只放纯 HTML 片段（不要 <html>、<head>），且需同域或本地服务器运行（file:// 协议下 fetch 会跨域失败）。
- VS Code 用户可装插件 “Live Server” 启本地 HTTP 服务，绕过 file:// 限制
- PyCharm 默认开的是 HTTP 服务，直接双击打开 HTML 就能用 fetch
- 如果不想写 JS，就老老实实用文本编辑器批量替换——但每次改页脚，得同步改所有 HTML 文件
模块样式怎么不互相污染
关键不是“怎么写 CSS”，而是“怎么命名 + 怎么组织”。BEM 是最轻量有效的方案：每个模块用唯一根类名（如 product-card），内部元素写成 product-card__title，修饰态写成 product-card--featured。
这样做的好处是：哪怕你把 <section class="product-card"> 复制到另一个页面，它的样式也不会被其他页面的 .title 或 .card 类意外覆盖。
- 别用泛化类名如
.title、.box、.content—— 它们迟早会在某个页面里冲突 - 每个模块的 CSS 最好单独存为
product-card.css，再在 HTML 中<link rel="stylesheet" href="css/product-card.css"> - 如果用
* { margin: 0; padding: 0; box-sizing: border-box; }重置，记得把它放在所有模块 CSS 之前，否则重置会被后续样式覆盖
移动端适配时模块怎么响应式堆叠
模块化布局最大的坑，是 PC 上用 display: flex 横向排导航+主内容+侧边栏，到了手机上忘了断点重排，结果侧边栏跑出屏幕外，或者文字挤成一团。
真正有效的响应式，是在每个模块内部定义行为，而不是全页面一刀切：
-
<main>和<aside>外层包一个<div class="layout-main-sidebar">，PC 下flex，手机下flex-direction: column -
<section>内部的卡片列表，用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，比固定25%更可靠 -
<header>里的 logo 和 nav，在小屏下用display: none隐藏 nav，改用汉堡菜单（哪怕只是静态按钮，也预留 DOM 结构）
viewport 设置必须写死：<meta name="viewport" content="width=device-width, initial-scale=1.0">。漏掉这行，所有响应式规则在 iPhone 上直接失效——页面会按 980px 渲染，缩得很小，用户得双指放大才能看。
