html文档必须以和开头，语义化标签不可替代，属性须按规范顺序书写且引号统一，表单与图片需严格遵循无障碍合规要求。
HTML文档开头必须写且紧跟<code>
没这行，浏览器就可能进怪异模式，CSS盒模型、JS获取尺寸、甚至Flex布局都可能出错——尤其IE和旧版Edge。很多“样式不生效”“高度算不准”的问题，源头就在这两行缺失或写错。
常见错误现象：
（小写doctype，部分旧工具会忽略）-
没加lang属性，导致屏幕阅读器发音不准、SEO语义弱 -
lang值写成zh或cn，实际应为zh-CN或zh-HK等IETF标准码
实操建议：
- 所有HTML文件第一行固定为
（大小写不限，但推荐全大写） - 第二行必须是
，国际化项目按实际语言切换，如en-US - 用VS Code + Prettier插件自动补全这两行，避免手误
语义化标签不是“可选装饰”，而是DOM结构的契约
用<div class="header">代替<code><header></header>，短期看不出问题，长期会导致无障碍支持失效、搜索引擎降权、甚至Vue/React服务端渲染时SSR语义丢失。
使用场景判断很简单：只要这个区域有明确功能角色，就该用对应语义标签：
- 页面顶部导航栏 →
<nav></nav>，不是<div class="nav"> <li>主要内容区块 → <code><main></main>，且整个文档只出现一次 - 侧边栏或广告位 →
<aside></aside>，而非<div id="sidebar"> <li>文章段落 → <code><p></p>，别用<div>加<code>margin模拟容易踩的坑：
- 嵌套错误：比如把
<main></main>放在<header></header>里，违反HTML5大纲算法 - 标题跳级：
<h1></h1>后面直接<h3></h3>，破坏语义层级，影响屏幕阅读器跳转 - 滥用
<section></section>：它需要自带标题（<h2></h2>等），否则不如用<div> <h3>属性顺序和闭合规则直接影响团队协作效率</h3> <p>当多人并行修改同一份HTML，如果<code>class有时写前面、有时写后面，data-属性位置不统一，diff工具会刷出大量“无意义变更”，Code Review成本陡增。参数差异很小，但执行成本很高：
- 正确顺序：
class→id→data-*→src/href→alt/title→role/aria-* - 自闭合标签如
<img>、<input>，HTML5中/可省略，但统一写<img src="x" alt="">能避免和XHTML混用时出错 - 所有属性值必须双引号，
class=menu或class='menu'都是隐患
性能影响不大，但兼容性风险真实存在：某些老版本构建工具（如Webpack 4 + html-webpack-plugin旧版）会因引号不统一报解析错误。
表单和图片的最小合规底线不能妥协
这不是“最佳实践”，是硬性要求。漏掉任意一项，就可能被W3C验证器标红，或在WCAG 2.1 AA级审计中直接Fail。
必须做到：
- 每个
<input>、<textarea></textarea>、<select></select>都有配套<label for="xxx"></label>，禁止仅靠placeholder提示 - 所有
<img>带alt属性：alt=""表示装饰图，alt="描述文字"表示有意义图片 -
<button></button>必须有type属性：type="button"（默认提交）、type="submit"、type="reset"，缺省值在不同浏览器中行为不一致
容易被忽略的细节：
-
<form></form>没设method和action，纯前端表单也建议显式写method="get"或method="post" - SVG内嵌图标没加
aria-hidden="true"，会被屏幕阅读器逐个读出路径命令 - 响应式图片用
<picture></picture>时，<img>仍需alt，它是fallback兜底
真正麻烦的从来不是写对一行代码，而是让所有人持续写对——所以要把这些规则固化进ESLint + prettier-eslint + HTMLHint的CI流水线里，而不是靠人盯。
- 正确顺序：
- 嵌套错误：比如把
