高质量HTML命名需满足可读、可推断、可搜索三条件：用业务语义如product-card而非样式名float-left；层级用BEM显式表达如nav__link--active；全小写+中划线分隔，禁用数字前缀与拼写错误。
高质量 HTML 不是靠“写得漂亮”，而是靠“改起来不崩溃”——命名冲突、结构嵌套错乱、语义缺失，三者任一出问题，半年后你自己都看不懂。
class 和 id 名怎么起才不会三天后后悔
用 header-left-nav 比用 div3 强，但还不够。真正容易维护的类名要满足三个条件：可读、可推断、可搜索。
- 避免纯功能描述，比如
float-left或mt-16—— 这类名把样式逻辑塞进结构层，CSS 一换，HTML 就得跟着改 - 优先用业务或内容语义，比如
product-card、user-avatar、search-suggestion-list，而不是box或item - 层级关系靠 BEM 或类似约定显式表达，比如
nav__link--active而不是nav-link-active，避免 CSS 选择器过度依赖 DOM 深度 - 全小写 + 中划线分隔，不带数字前缀、不缩写（
usr不如user），不拼错（btn是常见例外，但btnn或bton就是隐患）
为什么 <main> 不是可选项，而 <div> 往往是坏味道
<main> 是浏览器和辅助技术识别“页面核心内容”的关键锚点；漏掉它，屏幕阅读器可能跳过正文，SEO 也可能降权。而 <div> 泛滥，本质是语义懒惰。
- 每个
<div>都该被问一句：“它真不能换成<article>、<section>或<aside>吗？” -
<header>和<footer>必须出现在<body>内，且通常只各一个（除非嵌套在<article>里） -
<nav>应包裹导航链接集合，不是所有<a>都算 —— 页脚版权链接、面包屑都不属于<nav> - 用 W3C Validator 检查时，如果报
Element div not allowed as child of element main in this context，大概率是你在<main>里塞了不该塞的<div>
<meta charset="UTF-8"> 放错位置会导致整个页面中文变方块
它必须是 <head> 中**第一个**有实际作用的标签（注释不算）。晚于任何 <title> 或其他 <meta>，某些旧版浏览器会按默认编码（如 ISO-8859-1）解析前面的内容，导致标题、JS 字符串里的中文直接乱码。
立即学习“前端免费学习笔记（深入）”；
- 错误顺序：
<title>你好</title><meta charset="UTF-8">→ 标题“你好”已按错误编码解析 - 正确顺序：
<meta charset="UTF-8"><title>你好</title> - 不用写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 冗余且易出错 - 服务端响应头若已声明
Content-Type: text/html; charset=utf-8，HTML 里仍需保留该<meta>，因部分离线场景或本地打开时依赖它
lang 属性不是摆设，它影响语音朗读、字体回退甚至搜索引擎切词
<html lang="zh-CN"> 告诉浏览器：“这段文本是简体中文，按中文规则处理”。漏掉它，Chrome 可能用英文 TTS 读中文，iOS 语音助手可能把“北京”念成“Bei Jing”而非“Běijīng”。
- 区域子标签要精确：
zh-HK（繁体香港）、zh-TW（繁体台湾）、zh-CN（简体大陆），别混用 - 多语言页面中，局部内容可用
lang覆盖，比如<p lang="en">API Reference</p> - 不要写
lang="zh"—— 缺少区域信息，字体渲染和断行可能不符合预期 - VS Code 插件或 linter（如 html-validate）能自动检查
lang是否缺失或格式错误，建议接入 CI
最常被忽略的其实是“改代码时没人敢动的那部分”——比如一个用了三年的 <div class="wrapper">，没人记得它到底包了什么，也没人敢删。语义化和命名不是为了第一天写得爽，而是为了让第 300 次修改时，你还能一眼看懂自己当年埋的坑在哪里。
