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