html编码规范的核心是减少歧义、避免浏览器误解析、保障协作效率；需强制写doctype和lang，class用语义化小写短横线命名，块级标签显式闭合，属性按class→id→data-→src/href/for→type→alt/title→aria-/role顺序并统一双引号。
不用“学规范”，直接照着改代码，习惯就出来了。 所有 HTML 编码规范的本质，是减少歧义、避免浏览器猜错、让协作不翻车。你不需要背条文，只需要在写 的第一行、写 class 的第一个单词、插入第一张 <img> 时，做对那几件关键小事。
怎么写第一行：DOCTYPE 和 lang 不可省略
很多新手删掉 或漏写 <code>lang，以为“页面照样能显示”。但实际后果是：<input type="date"> 在某些旧版 Safari 下直接不渲染；屏幕阅读器无法正确切换单词发音语种；IE11 可能退化到怪异模式（Quirks Mode），导致盒模型计算全乱。
必须顶格写在文件最开头，前面不能有任何空格或注释-
中的值要匹配实际语言，中文站点别写成en或留空 - 如果项目含多语言切换，
lang值需动态更新（比如用 JS 改document.documentElement.lang），不能只靠初始静态值
class 和 id 怎么命名才不踩坑
命名不是审美问题，是维护成本问题。class="left-box-2" 这类名字，三个月后你自己都得查 DOM 才知道它干啥；而 class="article-meta" 一眼可知用途，且 CSS、JS、测试都能靠它稳定定位。
-
class名必须全小写，单词间用-（不是_或驼峰），例如user-avatar，禁止userAvatar或user_avatar - 禁止用样式描述命名：
class="red-text"、class="float-left"—— 一旦设计改了红色或布局，这个 class 就成了“谎言” -
id必须全局唯一，且尽量少用；若用于锚点跳转（如<a href="#section2"></a>），确保对应元素存在且id="section2"拼写完全一致（区分大小写）
标签闭合和嵌套：浏览器不会替你补全逻辑
HTML5 允许省略某些结束标签（如 、
-
<div><p>text</p></div> <p>more</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>—— 浏览器自动修正为<div><p>text</p></div> <p>more</p>，但 JS 操作div.children时拿到的节点顺序和预期不符 - 服务端模板（如 Django、EJS）在生成嵌套结构时，未闭合标签会导致整段输出错位，调试极难
- 校验工具（如 W3C Validator）报错，CI/CD 流水线可能直接拒绝合并
建议：所有块级标签（<div>、<code><p></p>、<section></section>、<header></header> 等）显式写闭合；自闭合标签（<img>、<input>）统一用 <img src="x" alt=""> 形式，不加 /（HTML5 不需要 <img>）。
属性顺序和引号：细节决定协作效率
团队里有人写 <input type="text" id="name" class="form-input">，有人写 <input class="form-input" type="text" id="name">，表面看没区别，但 diff 工具会把整行标为变更，Code Review 时浪费时间。
- 推荐属性顺序：
class→id→data-*→src/href/for→type→alt/title→aria-*/role - 所有属性值必须用双引号包裹，禁止单引号或无引号：
class=header是非法的，class='header'虽能运行但不符合标准，且某些构建工具（如 HTML minifier）会报错 -
alt属性不能为空白字符串（alt=""可以，表示图像纯装饰；但alt=" "含空格则会被读屏软件读作“空格”，反而干扰）
真正容易被忽略的，不是“要不要写 alt”，而是写完之后，有没有真打开屏幕阅读器试听一遍——很多所谓“符合规范”的页面，在 VoiceOver 下念出来根本不知所云。
