用data-module替代class/id锚定模块可解决JS查询失效、样式错位等问题，因其不参与样式、不影响可访问性、不随视觉重命名变更；需配合语义标签和<template>实现高可维护性。
用 data-module 替代 class/id 锚定功能模块
JS 查询失效、样式错位、改一个 class 全站崩——根本原因不是代码写得慢，而是锚点不稳定。data-module 是专为模块边界设计的属性，不参与样式、不影响可访问性，也不随视觉重命名而变。
常见错误现象：$('.header-nav') 在新设计中 class 改成 top-bar-menu，脚本静默失败；document.getElementById('product-list') 在循环渲染时只取到第一个节点。
- 每个独立功能区块加根级
data-module="header"、data-module="product-grid"，版本号可同步加data-version="2.3" - JS 统一用
document.querySelectorAll('[data-module="header"]')查询，CI 流程可校验版本是否匹配文档 - 禁止在
data-module值里塞动态内容（如data-module="product-{{id}}"），它代表抽象模块类型，不是实例标识 - 嵌套超三层必须重构——不是警告，是红线。Chrome DevTools 中右键节点 → “Break on” → “Attribute modifications”，能快速暴露冗余包裹层
语义化标签不是加分项，是 DOM 接口契约
把 <div class="nav"> 换成 <code><nav></nav> 不是为了“更规范”，而是为了让浏览器同时构建出无障碍树（Accessibility Tree）。没有它，屏幕阅读器、爬虫、自动化测试工具都只能靠猜。
使用场景：SEO 提升、辅助设备适配、自动化测试定位、团队协作时无需注释解释“这个 div 是导航”。
立即学习“前端免费学习笔记（深入）”；
-
<header></header>、<nav></nav>、<main></main>、<section></section>、<aside></aside>、<footer></footer>必须成对出现，且<main></main>应唯一 - 避免
<div class="header"> 这类无语义包裹；两个连续 <code><section></section>若主题相同，不如合并并用<h2></h2>分隔子区块 -
<article></article>用于可独立分发的内容（如博客、新闻）；<section></section>用于逻辑分组，不可替代<article></article> - 标题层级必须严格：从
<h1></h1>开始，<h2></h2>是<section></section>的首级标题，禁止跳级或用<h3></h3>当首标 - 构建时静态加载推荐 Vite 的
import headerHtml from './header.html?raw'，Webpack 配html-loader - 运行时
fetch加载后，若片段含<script>，需手动创建并插入，否则逻辑断链 -
<img src="logo.png">在fetch返回的字符串中会 404，除非已设<base href="/>或路径写成绝对 - 禁用
innerHTML +=拼接，每次都会重新解析整个字符串，且丢失已有事件监听器 - 根目录只放
index.html；css/、js/、images/、pages/四个标准目录必须存在 -
images/下按用途再建子目录（如icons/、banner/），避免所有图挤在一个文件夹 - 多页面统一导航推荐前端动态注入：用
nav-loader.js定义const navHTML = `<nav>...</nav>`，而非服务端包含或重复写 HTML -
partials/存放模块化 HTML 片段（如header.html、footer.html），配合<template>+fetch加载，确保复用与隔离
<template> 是 HTML 片段的唯一合法容器
把页头 HTML 写在 <div style="display:none"> 里，或拼字符串插入 <code>innerHTML，短期省事，长期必踩坑：样式未加载、脚本不执行、相对路径 404、无 DOM 生命周期控制。
性能影响：内联字符串会触发多次解析与重排；<template> 不渲染、不计算样式、不触发资源加载，JS 克隆后插入才是干净起点。
目录结构和文件组织决定后期改版成本
一个没规划的 index.html 和一堆散落在根目录的 JS/CSS，等于给每次改版埋雷。目录结构不是为了整齐，是为了让“改哪里、动什么、影响谁”一目了然。
容易踩的坑：图片路径写死、CSS 引入顺序混乱导致覆盖失效、多页面导航逐页复制粘贴。
data-module 就会退化成另一个 class，语义标签会被当成“可有可无的装饰”，<template> 会被绕开直奔字符串拼接——这些不是技术选择问题，而是协作契约是否被真正执行的问题。
