语义标签是天然模块边界，非装饰性元素；<header>等标签自带语义、无障碍角色与默认行为，无需JS即可生效，且必须严格遵循内容逻辑与层级规范。
语义标签不是装饰，是天然模块边界
用 <header>、<nav>、<main>、<section>、<aside>、<footer> 划分结构，不是为了“看起来更现代”，而是直接获得浏览器和辅助技术认可的模块边界。它们自带语义、默认样式行为、无障碍角色，且无需 JS 或构建工具就能生效。
常见错误现象：
-
<nav>里塞了登录按钮、用户头像下拉菜单——这些不是导航项，应移出或单独封装 -
<main>嵌套在<article>里——违反层级逻辑，会被开发者工具标为错误 - 多个独立内容区块共用一个
<section>，却不加<h2>等标题——语义缺失，搜索引擎和屏幕阅读器无法识别主题
使用场景中要注意：
-
<section>必须有明确主题（如“用户评价区”），否则优先用<div> -
<aside>不等于“右边那栏”，它必须与邻近的<article>或<section>内容相关；全站广告位应放在<footer>或独立<section> - 每个
<article>应能脱离当前页面被 RSS 抓取——如果删掉它整个页面逻辑就断了，那它大概率不该是<article>
data-component 比 class="header" 更可靠
类名本质是给 CSS 用的，容易被覆盖、重命名或误删；而 data-component 是专为 JS 标记作用域设计的，稳定、语义明确，且完全免疫样式干扰。
立即学习“前端免费学习笔记（深入）”；
为什么不用 id="header"：
- 同一页面多次渲染同个模块（如商品卡片列表）时，
id重复会导致document.getElementById()只返回第一个，逻辑中断 -
class="header"可能被全局 CSS 规则意外影响（比如.header img { opacity: 0.8 }），而data-component="header"不会
实操建议：
- 模块根元素统一加
data-component="navbar"、data-module="user-card"、data-version="2.1"—— 后者可用于 CI 阶段校验模板与 JS 逻辑是否版本匹配 - 禁用内联样式和内联事件（如
onclick="doSomething()"），所有交互由 JS 通过data-component查询后绑定 - 避免用
class="card"这种泛化命名；改用class="cmp-card"前缀 + BEM 子类（如cmp-card__title），配合构建工具自动注入版本前缀（cmp-card-v2__title）
template 标签不是占位符，是运行时模具
<template> 不参与 DOM 渲染、不触发样式计算、不加载内部资源（图片、字体），JS 取内容时也更干净——它不是“隐藏的 div”，而是浏览器原生支持的轻量级模具。
常见误区：
- 写
<template id="card"><div>{{title}}</div></template>后直接插进页面——占位符不会自动替换，也不会执行脚本 - 在
template.content上直接操作 DOM——它不属于当前文档树，修改无效 - 用
display:none的<div>替代<template>——仍会解析 CSS、触发布局计算，性能损耗明显
正确用法：
- 提取内容只需
template.content.cloneNode(true)，比正则或 DOM 操作更可靠 - 含
<input>或<select>时，用document.importNode(template.content, true)替代cloneNode()，避免表单状态重置 - 若需动态填充，用
data-bind属性标记目标节点（如<h3 data-bind="title"></h3>），再由 JS 遍历替换，而非依赖innerHTML插值（会丢失事件绑定）
构建阶段加载比 fetch 更可控
浏览器原生 import './header.html' 会直接报 TypeError: Failed to resolve module specifier；运行时 fetch('./header.html') 虽可行，但存在硬伤：本地双击打开时因 file:// 协议触发 CORS、<script> 不执行、相对路径 404、无缓存、不可预编译。
真正可行的路径是绑定构建流程：
- Vite 中用
import headerHtml from './header.html?raw'，Webpack 需配raw-loader或html-loader - 组件文件统一放在
src/components/下，命名带版本号（如navbar.v2.html），避免多人修改冲突 - 禁止在组件 HTML 内硬编码 CSS 类名；所有样式通过 BEM + 构建时自动注入 scoped class 前缀
最容易被忽略的是：模块化不是把 HTML 拆成一堆文件就完了——关键在谁负责初始化、传参、更新、销毁。一个没定义生命周期、没处理属性变更、没隔离样式的 <template>，只是可复制的文本，不是组件。
