语义化标签、规范缩进、功能导向类名和自动化格式化是提升HTML可维护性的四大核心。使用<header><nav><main>等标签明确结构意图并增强可访问性；统一2空格缩进体现嵌套关系；类名应表达“是什么”如search-submit而非red-btn；Pretterr等工具确保格式一致，但语义判断仍需人工把控。
用语义化标签代替能直接降低理解成本看到一堆嵌套的 <div class="wrapper"><div class="inner"><div class="content">，没人能一眼看出结构意图。换成 <header>、<nav>、<main>、<article>、<aside>、<footer>，代码自己就“说话”了。
这些标签不是装饰，浏览器和屏幕阅读器会据此构建 DOM 和可访问树。比如 <nav> 会被读屏软件识别为“导航区域”，而 <div class="nav"> 不会。
-
<main> 页面中只能出现一次，且应包裹核心内容
-
<section> 必须有明确主题，建议配 <h2> 或更高级别标题
- 避免把
<div> 当万能胶：表单不用 <div class="form">，改用 <form>；按钮不用 <div role="button">，直接用 <button>
缩进与换行必须体现嵌套层级，而不是随意断行
HTML 不依赖换行渲染，但人依赖缩进来识别父子关系。缩进错位比语法错误更难 debug —— 浏览器不报错，你却要花三分钟找漏掉的 </div>。
推荐统一用 2 个空格（非 Tab），原因很实在：tab 在不同编辑器/IDE 中可能显示为 2、4、8 格，协作时容易混乱；而空格是确定的。
立即学习“前端免费学习笔记（深入）”；
- 每个块级元素（如
<header>、<section>、<article>）独占一行
- 子元素缩进一层，闭合标签与开始标签垂直对齐（不是紧贴内容后）
- 内联元素（
<span>、<a>、<strong>）可紧凑写在段落中，除非内容过长需换行
反例：<p>欢迎<strong>登录</strong>我们的网站</p> 没问题；但 <p>这是一段很长的说明文字，其中包含一个<a href="/privacy">隐私政策链接</a>，用户需仔细阅读</p> 建议在 <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>，老实用 <section> 或 <div> 配语义类名
Prettier 等格式化工具不是可选项，而是必需品
靠人眼维持缩进、引号、属性顺序的一致性，长期来看不可靠。尤其团队项目里，有人用单引号、有人省略布尔属性值、有人把 class 放最后——合并冲突时全是噪音。
VS Code 装 Prettier 插件 + 配置 .prettierrc，就能一键统一风格。关键配置项包括：
-
htmlWhitespaceSensitivity: "css"：按 CSS 盒模型逻辑处理空白（推荐）
-
singleQuote: false：HTML 属性值强制双引号（W3C 推荐，且兼容 JSX）
-
tabWidth: 2：与手动缩进习惯对齐
- 搭配
editor.formatOnSave 开启自动保存即格式化
注意：Prettier 不解决语义问题，它只管“怎么写好看”。该用 <nav> 还是 <div>，得靠人判断——这也是最容易被跳过的一步：格式再整齐，语义错了，可读性还是假繁荣。
看到一堆嵌套的 <div class="wrapper"><div class="inner"><div class="content">，没人能一眼看出结构意图。换成 <header>、<nav>、<main>、<article>、<aside>、<footer>，代码自己就“说话”了。
这些标签不是装饰，浏览器和屏幕阅读器会据此构建 DOM 和可访问树。比如 <nav> 会被读屏软件识别为“导航区域”，而 <div class="nav"> 不会。
-
<main>页面中只能出现一次，且应包裹核心内容 -
<section>必须有明确主题，建议配<h2>或更高级别标题 - 避免把
<div>当万能胶：表单不用<div class="form">，改用<form>；按钮不用<div role="button">，直接用<button>
缩进与换行必须体现嵌套层级，而不是随意断行
HTML 不依赖换行渲染，但人依赖缩进来识别父子关系。缩进错位比语法错误更难 debug —— 浏览器不报错，你却要花三分钟找漏掉的 </div>。
推荐统一用 2 个空格（非 Tab），原因很实在：tab 在不同编辑器/IDE 中可能显示为 2、4、8 格，协作时容易混乱；而空格是确定的。
立即学习“前端免费学习笔记（深入）”；
- 每个块级元素（如
<header>、<section>、<article>）独占一行 - 子元素缩进一层，闭合标签与开始标签垂直对齐（不是紧贴内容后）
- 内联元素（
<span>、<a>、<strong>）可紧凑写在段落中，除非内容过长需换行
反例：<p>欢迎<strong>登录</strong>我们的网站</p> 没问题；但 <p>这是一段很长的说明文字，其中包含一个<a href="/privacy">隐私政策链接</a>，用户需仔细阅读</p> 建议在 <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>，老实用<section>或<div>配语义类名
Prettier 等格式化工具不是可选项，而是必需品
靠人眼维持缩进、引号、属性顺序的一致性，长期来看不可靠。尤其团队项目里，有人用单引号、有人省略布尔属性值、有人把 class 放最后——合并冲突时全是噪音。
VS Code 装 Prettier 插件 + 配置 .prettierrc，就能一键统一风格。关键配置项包括：
-
htmlWhitespaceSensitivity: "css"：按 CSS 盒模型逻辑处理空白（推荐） -
singleQuote: false：HTML 属性值强制双引号（W3C 推荐，且兼容 JSX） -
tabWidth: 2：与手动缩进习惯对齐 - 搭配
editor.formatOnSave开启自动保存即格式化
注意：Prettier 不解决语义问题，它只管“怎么写好看”。该用 <nav> 还是 <div>，得靠人判断——这也是最容易被跳过的一步：格式再整齐，语义错了，可读性还是假繁荣。
