class="left-box"类名抓狂因其描述样式位置而非内容角色，导致css改动即失效、他人难理解、搜索无业务上下文；应改用语义化命名如search-form或user-avatar，并禁用数字后缀、显式层级、遵循html语义结构与缩进规范。
为什么 class="left-box" 这类命名会让半年后的你抓狂
它描述的是样式位置，不是内容角色。CSS 一改，class 就失效；别人接手时得翻样式表才能猜它干啥；搜索 left-box 找不到业务上下文。真正可维护的命名必须回答“这是什么”，而不是“它长什么样”。
- 用
search-form替代float-right-box—— 搜索功能不会因为布局变右变左而消失 - 用
user-avatar而不是circle-img—— 头像可能某天改成方形，但角色不变 - 禁用数字后缀：
nav1、box2是临时思维的残迹，删掉重命名 - BEM 不是必须，但至少做到层级显式：用
header__logo而非header-logo，避免 CSS 选择器意外穿透
语义化标签不是“加分项”，而是 DOM 结构的硬约束
<main></main> 只能出现一次，且必须包裹页面核心内容；<nav></nav> 只该包导航链接，页脚版权不算；<section></section> 必须有主题，最好带 <h2></h2>。浏览器和读屏软件靠这些标签构建可访问树，写错等于主动屏蔽部分用户。
- W3C Validator 报
Element div not allowed as child of element main in this context？大概率是你在<main></main>里塞了不该塞的<div>，先查是否漏了 <code><article></article>或<section></section> -
<header></header>和<footer></footer>必须在内，嵌套在<article></article>里可以有多个，但顶层只应各一个 - 别把
<form></form>写成<div class="form"> —— 表单提交、校验、焦点管理全靠原生语义支持 <h3>缩进与换行不是“看着舒服”，而是防止闭合错位的防御机制</h3> <p>HTML 不依赖缩进渲染，但人依赖缩进来识别父子关系。缩进错位比语法错误更难 debug：浏览器不报错，你却要花三分钟找漏掉的 </p> <ul> <li>统一用 4 个空格（不是 Tab），所有主流规范（Google、腾讯云、百度前端）都强制要求</li> <li>每个块级元素独占一行，子元素缩进一层，闭合标签与开始标签垂直对齐，例如：<pre class="brush:php;toolbar:false;"><main><br><section><br><h2>标题</h2> <br></section><br></main></pre> </li> <li> <code><style></style>和<script></script>内部缩进，第一级要和标签本身对齐，不是从标签内容起算 - 行尾不能有空格——编辑器开启“显示不可见字符”功能，一眼就能揪出
meta charset="UTF-8" 放错位置会导致中文直接变方块
它必须是 中第一个有实际作用的标签（注释不算）。晚于 <title></title> 或其他 <meta>，旧版浏览器会按默认编码（如 ISO-8859-1）解析前面的内容，标题、JS 字符串里的中文全乱码。
- 正确顺序：
<br><meta charset="UTF-8"><br><title>页面标题</title><br><meta name="viewport" content="width=device-width"><br>
- 所有属性值必须用双引号包裹：
src="logo.png"，不是src=logo.png或src='logo.png' - 布尔属性（
disabled、required）显式写全：required="required"，别省略或写成required=""
<section></section> 还是 <article></article>，该不该为某个卡片加 role="region"，这些没有绝对答案，但每次犹豫时，问问自己：“这个标签会不会让屏幕阅读器说错话？别人看代码能不能三秒明白它承载什么业务？”
