纯HTML可实现现代化与易维护性，关键在于语义化标签组织、BEM类名规范、扁平结构设计及JS/CSS协同规划；避免div汤、内联样式和脚本，预留扩展点与无障碍支持。
纯 HTML 无法实现“现代化”与“易维护性”——它只是结构层，不处理逻辑、状态、复用或响应式交互。真正决定页面质量的是你如何组织 class、如何划分语义边界、是否预留扩展点，以及是否与后续 JS/CSS 协同设计。
用语义化标签而非 div 堆砌
很多“现代化”页面反而在结构上退化：全用 <div class="card"> 替代 <article>、<nav>、<section>。这会让可访问性变差，也增加 CSS 选择器耦合度。
- 导航区块必须用
<nav>，不是<div role="navigation"> - 主内容区优先用
<main>，且整个页面只出现一次 - 卡片列表建议包裹在
<section>中，并为每张卡片用<article>（尤其含独立标题/时间/作者） - 避免嵌套过深：超过 4 层
<div>就该检查是否该拆组件或换语义标签
class 命名必须支持局部作用域与增量修改
写 class="btn-primary" 看似简洁，但一旦要加悬停态、禁用态、尺寸变体，就变成 class="btn-primary btn-hover btn-lg btn-disabled"——这不是可维护，是失控。
- 采用 BEM 变体更务实：比如
card主块，card__title元素，card--featured修饰符 - 所有 class 必须能脱离上下文独立存在；
sidebar__item-active比active更安全 - 禁止用
red-text、margin-top-20这类样式直译名——改设计时你得全局搜替换，而不是改 CSS - 预留 JS 钩子：给需要交互的节点加
data-js="dropdown-trigger"，而不是靠class="dropdown-toggle"绑定行为
内联样式和 script 标签是技术债高发区
style="color: #333" 和 <script>...</script> 直接写在 HTML 里，短期快，长期疼。它们无法被缓存、无法被 lint、无法做 tree-shaking，还破坏 SSR/SSG 流程。
立即学习“前端免费学习笔记（深入）”；
- 所有样式必须外链到
<link rel="stylesheet" href="base.css">，哪怕只有一行 - JS 逻辑必须通过
<script src="app.js" defer>加载；defer是底线，type="module"更佳 - 如果真要动态插入样式（如主题色），用
document.styleSheets或<style>标签 + ID 控制，而非内联 style 属性 - 模板字符串拼接 DOM（
innerHTML = <div>${data}</div>）极易 XSS，优先用textContent+appendChild，或明确使用DOMPurify.sanitize()
DOM 结构必须为渐进增强留出退路
所谓“高质量”，不是加载完 JS 才能看内容，而是即使 JS 失败、CSS 未加载、屏幕阅读器接管，核心信息仍可抵达用户。
- 表单控件永远带
<label for="email">，不用placeholder替代标签 - 图片必须有
alt，空图用alt=""（不是省略），图标图用aria-hidden="true"+role="img" - 用
<details><summary>实现折叠区块，原生支持无 JS 展开 - 不要依赖
display: none隐藏关键内容——它对屏幕阅读器也隐藏；用clip-path或sr-only类替代
最常被忽略的其实是「DOM 的生命周期意识」：一个节点被 JS 动态创建后，是否会被正确销毁？事件监听器有没有清理？data- 属性有没有随状态更新？这些细节不写在 HTML 里，却由 HTML 结构是否清晰直接决定。
