doctype必须顶格写且为，lang属性需填对并动态更新，块级标签必须显式闭合，class名须语义化且用小写短横线，id须全局唯一。
DOCTYPE 必须顶格写，前面不能有空格或注释
浏览器看到开头不是 ，会直接进入怪异模式（Quirks Mode），<code><input type="date">、flex 布局、甚至盒模型计算都可能出错。这不是“看起来差不多”，而是真实渲染逻辑退化。
必须是文件第一行，且前面**零字符**——删掉 BOM、删掉注释、删掉空行- 别写成
或 <code>：大小写虽不报错，但部分校验工具和 CI 流水线会警告 - 旧项目迁移时，如果已有
..>，直接换成即可，HTML5 完全兼容
lang 属性不是摆设，得填对且动态更新
影响屏幕阅读器发音、字体回退策略、搜索引擎语种识别。填错或留空，中文站点被当成英文处理，标点符号间距、拼音断词都可能异常。
- 静态页填
zh-CN（简体中文）、zh-TW（繁体）或en-US，别用zh这种模糊值 - 多语言站点必须用 JS 动态改：
document.documentElement.lang = 'ja-JP'，不能只靠初始值 - 服务端渲染（如 Next.js、Nuxt）需确保每个页面响应头的
Content-Language与lang一致，否则辅助技术会混乱
所有块级标签显式闭合，别信“HTML5 允许省略”
省略
-
<p>段落1</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器"><img src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="overflowclass">HTML汇报生成器</a> <p class="overflowclass">🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p> </div> <a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>段落2</p>—— 显式闭合，JS 取parent.children顺序确定 - 自闭合标签统一用
<img src="x" alt="">，不用<img src="x" alt="">（HTML5 不需要斜杠） - 语义标签如
<header></header>、<section></section>同样要闭合：<section><h2>标题</h2> <p>内容</p></section>
class 名禁止用样式描述，必须语义化小写短横线
class="red-btn" 或 class="float-left" 是典型反模式。设计改色后 class 名就失效，JS 用它做逻辑判断会误判，团队协作时没人敢动这个“谎言 class”。
- 命名基于“它是什么”，不是“它长什么样”：用
user-avatar，不用circle-img；用article-meta，不用small-gray-text - 全小写 + 短横线：
search-input✅，searchInput❌，search_input❌ - id 尽量少用，必须全局唯一；锚点跳转时确保
href="#contact"和id="contact"拼写、大小写完全一致
lang 的动态同步和块级标签闭合在模板嵌套中的连锁崩塌——不是单个标签写错，而是漏掉一处，整片结构在 SSR 或 JS 操作时无声失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
