应优先使用语义化标签（如header、main、section、nav）替代class锚点，因其具备dom稳定性、seo与无障碍优势，且不依赖css或js即可准确定位。
用语义化标签替代 class="header" 这类弱锚点
靠 class="header" 定位页眉，在多人协作或长期迭代中极不可靠：CSS 可能覆盖掉这个 class，设计师改稿时顺手删了 class 却没通知前端，JS 脚本也可能动态移除它。而 header 是标准 DOM 接口，只要结构没动，document.querySelector('header') 就稳稳拿到页眉区域。
实际场景中要注意：
-
header不限于页面顶部，也可用于article或section内部的区块头部，语义更灵活 - 页面级
header应该只有一个；但每个article都可有自己的header - IE8 及更早版本不识别
header等新标签，需引入html5shiv，但仅影响样式渲染，不影响 DOM 结构可用性
避免 div 嵌套超过三层，否则 CSS 选择器极易断裂
常见反模式是 div 包 div 再包 div，最后才塞进一个 article。这种结构导致 CSS 选择器被迫写成 .wrapper .container .content article h2，一旦中间某层 class 名变更，整条链就断。
现代布局（Flexbox/Grid）支持扁平结构，article 完全可以直接作为 main 的子元素。理想嵌套深度应控制在 3 层内，例如：
body > main > articlebody > section > article- 用
data-module="product-list"替代冗余 class 做模块锚点，比class="product-list-wrapper"更不易冲突
用 BEM + data-* 属性实现 HTML 层面的“配置契约”
纯 HTML 没有 props，但可以用约定模拟：组件外层加唯一类前缀（如 cmp-card），内部子元素用 cmp-card__title、cmp-card__body；再通过 data- 属性传递配置，例如：
<div class="cmp-banner" data-theme="dark" data-closable="true"> <div class="cmp-banner__content">限时活动</div> </div>
JS 可读取并响应，CSS 也能用属性选择器控制样式：
[data-theme="dark"] { background: #111; }[data-closable="false"] .cmp-banner__close { display: none; }- 留空容器 + 注释说明用途，如
<div class="cmp-list__items"><!-- 插入列表项 --></div>
别把 main 当布局容器用，否则 SEO 和无障碍会直接报错
main 是浏览器强制识别为主体内容的唯一容器，缺省或重复使用会弱化 SEO 与阅读模式信号。W3C 明确要求每页最多一个 main，违反这条，axe 等无障碍检测工具会直接报错。
真实业务中容易踩的坑：
- 把整个后台管理页的侧边栏 + 顶部导航 + 主内容区都塞进一个
main—— 这会让屏幕阅读器跳过后续内容 - 用
section替代main承载主体，但section必须有标题（h2或更高），否则部分读屏软件忽略，SEO 权重下降 - 多个
nav允许存在（主导航、面包屑、页脚链接），但主导航应严格用nav，分页或辅助导航建议用ol或普通ul，避免语义污染
真正决定复用度的，不是用了多少组件化技术，而是 HTML 结构是否能在没有 JS、没有构建工具、甚至没有 CSS 的情况下，依然被准确识别和定位——语义标签是唯一不依赖约定就能跨团队、跨时间生效的锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
