应使用语义化标签替代div套娃，按功能命名class，为图片iframe补全alt/title，合理控制脚本样式加载时机，确保html承担明确语义责任。
用语义化标签替代 <div> 套娃
<p>纯靠 <code><div> 和 <code><span></span> 堆结构，会让 HTML 失去表达力，也增加后期维护成本。浏览器、屏幕阅读器、搜索引擎都依赖语义标签理解内容层级和意图。
比如导航栏写成 <div class="nav">，不如直接用 <code><nav></nav>；文章主体用 <div class="content">，换成 <code><main></main> 或 <article></article> 更准确。
-
<header></header>/<footer></footer>用于页面或区块级的头部/尾部，不是所有带 logo 或版权的<div> 都该套它 <li> <code><section></section>需有明确主题和标题（<h2></h2>–<h6></h6>），空包或仅用来清浮动的<section></section>是滥用 -
<aside></aside>不等于“侧边栏 CSS 类”，它代表与主内容相关但可独立存在的旁支信息（如术语解释、引用来源） - 不要用
class="btn-primary-lg"，改用class="cta-button"或class="submit-form-button" - 状态类（如
is-hidden、is-loading）可以保留，但需确保 JS 控制时只增删这类类，不碰功能类 - 如果项目用 BEM，坚持
block__element--modifier规则，别混用 Bootstrap 类名逻辑 - 装饰性图片（如分割线、背景花边）用
alt=""（空字符串），不是省略或填“无” - 图表类图片，
alt应概括关键数据结论（如“2025 年用户留存率提升 12%，高于行业均值”），详细数据放<figure><figcaption></figcaption></figure>或后文说明 -
<iframe></iframe>必须设title属性，值要具体（如title="嵌入的客户评价视频，来自 YouTube"），不能是“视频”或留空 - 非关键 JS（如统计、埋点、交互增强）用
defer或async，并确保不在DOMContentLoaded前操作 DOM - CSS 文件尽量内联首屏关键样式（
<style></style>），其余用<link rel="preload" as="style">提前获取 - 不要在
中间插入<script></script>（尤其没加defer的），它会阻塞后续 HTML 解析，导致“白屏时间延长”
避免在 HTML 中硬编码样式类名
像 class="red-text"、class="float-left-800px" 这类命名，把表现细节塞进结构层，一旦设计改版，就得全局搜替换，还容易引发样式冲突。
推荐按「功能或内容角色」命名：class="author-name"、class="error-message"、class="search-input"。这样 CSS 改动不影响 HTML 含义，JS 选中逻辑也更稳定。
为图片和 iframe 补全 alt 与 title 的实际用途
alt 不是可选项，也不是 SEO 关键词堆砌位。它的核心作用是：当图片加载失败、被禁用、或由读屏软件读取时，提供等效的内容描述。
title 则是辅助性提示，鼠标悬停才显示，对可访问性贡献极小，不应替代 alt。
控制 <script></script> 和 <link rel="stylesheet"> 的加载时机
把所有脚本扔在 里，或所有 CSS 放底部，都会拖慢首屏渲染。现代网页的可读性不仅指文字清晰，也包括内容“可见即可用”的节奏感。
真正影响可读性和维护性的，往往不是某一行代码写得够不够炫，而是每个标签是否承担了它该承担的语义责任，每个属性是否表达了它不可替代的意图。这些选择在开发初期看不出差别，但半年后接手的人，或第一次用键盘导航的用户，会立刻感受到分量。
