语义化标签、规范缩进、功能导向类名和自动化格式化是提升html可维护性的四大核心。使用等标签明确结构意图并增强可访问性；统一2空格缩进体现嵌套关系；类名应表达“是什么”如search-submit而非red-btn；pretterr等工具确保格式一致，但语义判断仍需人工把控。
用语义化标签代替能直接降低理解成本看到一堆嵌套的 <div class="wrapper"><div class="inner"><div class="content">，没人能一眼看出结构意图。换成 <code><header></header>、<nav></nav>、<main></main>、@#@#@#@#@#@#@#@#@#@0，用户需仔细阅读 建议在 <a></a> 前后换行，避免视觉缠绕。
类名命名必须表达“是什么”，而不是“长什么样”
写 class="red-btn" 或 class="float-right" 是给自己埋雷。样式变了，类名就失效或误导；别人接手时，得翻 CSS 才敢动 HTML。
真正可维护的命名聚焦功能或内容角色，比如 class="search-submit"、class="user-avatar"、class="error-message"。BEM 是成熟路径，但哪怕只做到“名词+用途”，也比纯样式名强得多。
- 避免缩写（
usr、btn）、拼音（yonghu）、序号（box1、div3）
- 复杂组件可在起始和结束处加注释，如
<!-- .product-card --> 和 <!-- /.product-card -->
- 不要为了“语义化”硬套标签：一段普通说明文字，没到独立文章级别，就别用
<article></article>，老实用 <section></section> 或 <div> 配语义类名<h3>Prettier 等格式化工具不是可选项，而是必需品</h3>
<p>靠人眼维持缩进、引号、属性顺序的一致性，长期来看不可靠。尤其团队项目里，有人用单引号、有人省略布尔属性值、有人把 <code>class 放最后——合并冲突时全是噪音。
VS Code 装 Prettier 插件 + 配置 .prettierrc，就能一键统一风格。关键配置项包括：
-
htmlWhitespaceSensitivity: "css"：按 CSS 盒模型逻辑处理空白（推荐）
-
singleQuote: false：HTML 属性值强制双引号（W3C 推荐，且兼容 JSX）
-
tabWidth: 2：与手动缩进习惯对齐
- 搭配
editor.formatOnSave 开启自动保存即格式化
注意：Prettier 不解决语义问题，它只管“怎么写好看”。该用 <nav></nav> 还是 <div>，得靠人判断——这也是最容易被跳过的一步：格式再整齐，语义错了，可读性还是假繁荣。</div>
看到一堆嵌套的 <div class="wrapper"><div class="inner"><div class="content">，没人能一眼看出结构意图。换成 <code><header></header>、<nav></nav>、<main></main>、@#@#@#@#@#@#@#@#@#@0，用户需仔细阅读 建议在 <a></a> 前后换行，避免视觉缠绕。
类名命名必须表达“是什么”，而不是“长什么样”
写 class="red-btn" 或 class="float-right" 是给自己埋雷。样式变了，类名就失效或误导；别人接手时，得翻 CSS 才敢动 HTML。
真正可维护的命名聚焦功能或内容角色，比如 class="search-submit"、class="user-avatar"、class="error-message"。BEM 是成熟路径，但哪怕只做到“名词+用途”，也比纯样式名强得多。
- 避免缩写（
usr、btn）、拼音（yonghu）、序号（box1、div3） - 复杂组件可在起始和结束处加注释，如
<!-- .product-card -->和<!-- /.product-card --> - 不要为了“语义化”硬套标签：一段普通说明文字，没到独立文章级别，就别用
<article></article>，老实用<section></section>或<div> 配语义类名<h3>Prettier 等格式化工具不是可选项，而是必需品</h3> <p>靠人眼维持缩进、引号、属性顺序的一致性，长期来看不可靠。尤其团队项目里，有人用单引号、有人省略布尔属性值、有人把 <code>class放最后——合并冲突时全是噪音。VS Code 装 Prettier 插件 + 配置
.prettierrc，就能一键统一风格。关键配置项包括：-
htmlWhitespaceSensitivity: "css"：按 CSS 盒模型逻辑处理空白（推荐） -
singleQuote: false：HTML 属性值强制双引号（W3C 推荐，且兼容 JSX） -
tabWidth: 2：与手动缩进习惯对齐 - 搭配
editor.formatOnSave开启自动保存即格式化
注意：Prettier 不解决语义问题，它只管“怎么写好看”。该用
<nav></nav>还是<div>，得靠人判断——这也是最容易被跳过的一步：格式再整齐，语义错了，可读性还是假繁荣。</div> -
