不符合标准的html页面虽能渲染，但会损害语义、可访问性、seo及跨设备兼容性；必须以开头（无bom、注释或空格），需带有效lang属性，表单控件须关联，禁用内联样式和标签，坚持语义化标签使用。
不符合标准的 HTML 页面，浏览器会渲染，但可能在语义、可访问性、SEO 或跨设备兼容性上出问题——不是“能用就行”，而是“用得对才稳”。
用 开头，且必须是第一行
没有它，或它前面有空格、注释、BOM 字节，浏览器就会触发怪异模式（Quirks Mode），getBoundingClientRect()、flex 行为、甚至 margin 合并都可能和预期不一致。
- ✅ 正确写法：
- ❌ 常见错误：文件开头有 UTF-8 BOM（尤其 Windows 记事本保存时）、
<!-- 注释 -->在 DOCTYPE 前、多行空格 - 检查方法：用 VS Code 打开，右下角看编码是否显示“UTF-8 with BOM”；终端运行
file -i your.html看是否有charset=bom
lang 属性，且值要真实有效
屏幕阅读器靠这个切换语音引擎，搜索引擎靠它判断内容语言。设成 lang="en" 却写满中文，会导致标点朗读错、拼音提示失效。
- 中文页面统一用
lang="zh-CN"（简体）、lang="zh-TW"（繁体），不要写lang="zh"这种不带区域的泛化值 - 若页面含多语言片段（如英文引文），给对应元素加
lang="en"，例如：<p>鲁迅说：<span lang="en">"Hope is a thing with feathers..."</span></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
- 注意：
lang不等于hreflang，后者只用于<link>标签中声明替代语言版本
表单控件必须关联 <label></label>，禁用“裸 input”
没 <label></label> 的 <input type="checkbox"> 或 <input type="text">，对键盘用户不可聚焦、对屏幕阅读器不可识别，WCAG 2.1 直接判失败。
- ✅ 推荐用显式
for/id关联：<label for="email">邮箱地址</label> <input type="email" id="email" name="email">
- ✅ 更简洁的嵌套写法（无需
id）：<label>邮箱地址 <input type="email" name="email"></label>
- ❌ 禁止：
<input type="text" placeholder="用户名"><!-- 没 label，placeholder 不是 label -->
- 注意：
placeholder是提示，不是标签；title属性不能替代<label></label>
避免内联样式和 <font></font> 标签，CSS 优先级要可控
用 style="color:red" 写十处，后期改主题色就得全局搜替换；用 <font color="red"></font>，HTML5 已废弃，Chrome 120+ 虽仍渲染，但 Lighthouse 会报严重可维护性问题。
- 所有样式走外部 CSS 文件，或至少
<style></style>块内；style属性仅用于 JS 动态计算后必须覆盖的极少数场景（如拖拽位置） - 不用
!important控制优先级——应通过更具体的 CSS 选择器（如.form__input--error）或合理使用data-属性来管理状态样式 - 字体设置必须包含回退链：
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;，不能只写"Helvetica"
真正难的不是写出合法 HTML，而是让每个标签承担它该有的语义责任——<button></button> 就不该用 <div onclick> 模拟，<code><article></article> 里不该塞无关导航。这些细节不报错，但会在某次无障碍审计、某次 SEO 收录波动、某个旧版 Safari 上突然暴露出来。
