学html规范是建立对浏览器、辅助工具和团队成员如何解析html的直觉，核心在于结构语义化与标记准确性：doctype决定渲染模式，lang属性影响读屏与翻译，charset需前置防乱码；语义标签须依内容角色而非视觉使用，避免伪语义；注释禁用--连写，属性值用双引号，class命名应表意而非表象。
学HTML规范不是背规则，是建立对“浏览器怎么想”“辅助工具怎么看”“团队成员怎么读”的基本直觉。直接照着 W3C 或 Google 风格指南抄，容易卡在“为什么必须这样”，结果写出来还是 <div class="header"> 套 <code><div class="title">。<h3>从 DOCTYPE 到 lang 属性，漏掉一个就影响全局</h3>
<p>很多初学者以为 <code> 只是仪式感，其实它决定浏览器是否启用标准模式——漏写或写成 <code>（大小写混用），IE 和旧版 Safari 可能退到怪异模式，CSS 盒模型、<code>flex 行为全乱。
也不是摆设：屏幕阅读器靠它切换发音规则，Google 爬虫靠它判断页面语种，连 Chrome 地址栏的翻译按钮都依赖这个值。不写或写错（比如 lang="cn"）会导致翻译失败或语音合成生硬。
- 必须放在第一行，且紧贴
开始标签后，中间不能有空行或注释 -
lang值查 IANA 语言子标签注册表，中文固定用zh-CN（简体）、zh-TW（繁体），不用zh或ch -
<meta charset="UTF-8">必须出现在最前面，否则早期字节被误解析为 ASCII，出现乱码
语义化不是“用新标签代替 div”，而是让结构自带含义
看到 <section></section> 就套用，结果满屏都是 <section></section>，和以前满屏 <div> 没区别——这是最常见误区。语义化的核心是“这个区块在整页中承担什么角色”，而不是“我能不能用这个标签”。<p>比如导航菜单，用 <code><nav></nav> 不是因为它长得像菜单，而是因为它是页面主要导航入口；而页脚里的“友情链接”列表，即使视觉上像导航，也不该用 <nav></nav>，而该用 <aside></aside> 或普通 <ul></ul>。
-
<main></main>页面中仅允许出现一次，且不能嵌套在<article></article>、<aside></aside>、<footer></footer>等内 -
<article></article>表示可独立分发/复用的内容（如博客正文、新闻条目），不是所有“看起来像文章”的区块都算 - 避免
<div role="button"> 这类“伪语义”写法——真要当按钮用，就写 <code><button></button>；需要点击行为再加 JS，别靠 ARIA 补救结构缺陷注释和空格看似小事，但错一处就让整段 HTML 失效
HTML 注释不是 JS 那样随便写
//或/* */。真实线上问题里，<!-- 这里有个 -- -->（中间两个连续短横）会让浏览器认为注释提前结束，后续所有 HTML 被当成文本渲染；更隐蔽的是注释里嵌了-->，哪怕藏在字符串里，也会触发提前闭合。缩进也一样：不是为了好看，而是防止嵌套错位导致
<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>包住<div> 这类非法结构（HTML5 允许部分嵌套，但 <code><p></p>内不能放块级元素）。工具如 Prettier 可自动处理，但得先理解“为什么缩进两格比四格更安全”——因为某些 CMS 或模板引擎会把首行缩进识别为代码块而非 HTML。- 注释只用
<!-- ... -->，内部禁止出现--连写、>单独出现 - 属性值一律用双引号，
class="btn btn-primary"可以，class='btn'或class=btn在某些解析器下会出错 - 自闭合标签如
<img>、<input>后面不加/，HTML5 规范已明确这是可选的，加了反而可能在 XML 解析场景引发歧义
class 和 id 命名不是风格问题，是维护成本开关
写
class="left-box-red"看似直观，但一旦设计改版“左”变“右”、“红”变“灰”，这个类名就变成谎言，后续开发者不敢删、不敢改、只能叠新类——最终 CSS 文件里塞满left-box-red-v2、left-box-red-legacy。真正可持续的命名，是描述“它是什么”，而不是“它长什么样”。比如
class="search-form"比class="blue-input"更可靠；id="user-profile-header"比id="top1"更易定位。- class 名用中划线连接（
user-avatar），不用下划线或驼峰，因为 CSS 选择器不支持_作为单词分隔符 - id 名尽量少用，优先用 class；若必须用，确保全页面唯一，且不带数字后缀（
item-1→item-first） - 避免纯功能类名如
hidden、clearfix——它们应该由 JS 控制或用现代方案（display: none、display: contents）替代
最难的不是记住所有规则，而是在写完
<div> 的瞬间，本能地问一句：“如果删掉所有 CSS 和 JS，这个结构还能被人和机器读懂吗？” 答案决定你写的到底是 HTML，还是带标签的字符串。</div> - 注释只用
