符合w3c标准的html文档需严格满足结构合法性、语义准确性和解析容错边界：必须使用小写作为首行，紧随其后；须为内首个标签（除注释外），次之；语义标签如、等须按规范使用，不可仅图样式替代。
符合W3C标准的HTML文档不是靠“加个DOCTYPE”就完事的，关键在结构合法性、语义准确性和解析容错边界——浏览器会宽容，但校验器不会。
必须写对的和根元素
这是整个文档合法性的起点。漏掉或写成（大小写混用）、<code>（过时DTD）都会让浏览器进入怪异模式，导致CSS盒模型、字体渲染等行为不一致。
实操建议：
- 严格使用小写：
（注意末尾无空格、无换行） -
必须紧跟其后，且显式声明lang属性，例如： - 不要嵌套
，也不要在外写<meta>或<title></title>
W3C对内元素顺序有隐式要求：字符集声明必须在任何可能触发渲染或脚本执行的标签之前；<title></title>必须是第一个可访问内容标签。
常见错误现象：中文乱码、页面标题不显示、SEO抓取失败。
正确顺序示例（不可省略或调换前两项）：
<meta charset="UTF-8"><title>页面标题</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="style.css">
注意：<meta charset>必须是中第一个标签（除注释外），否则浏览器可能已按默认编码解析后续内容。
语义化标签不能只图“看起来像”
用<div class="header">代替<code><header></header>，或把<nav></nav>塞进<footer></footer>里，虽能通过校验，但破坏了ARIA隐式角色和辅助技术流顺序。
使用场景判断要点：
-
<main></main>只能出现一次，且不能嵌套在@#@#@#@#@#@#@#@#@#@0只是第一步。真正容易被忽略的是：校验器不会报错但实际影响兼容性的点。 <p>比如：</p> <ul> <li>使用<code><picture></picture>但未提供<img>作为fallback，旧版Safari会留白 -
<input type="email">在非Chrome浏览器中不自动验证格式，需配合required和JS兜底 - 自定义
data-属性名含大写字母（如data-UserId），虽合法，但JS中需用dataset.userid访问（自动转为小写）
W3C标准文档本身不规定JavaScript行为，但DOM API与HTML结构强耦合——一个没闭合的<p></p>可能导致后续document.querySelector选不到预期元素，这种问题校验器发现不了，只能靠结构意识和测试覆盖。
