HTML本质是结构描述与语义表达语言，非编程语言；须唯一且不嵌套于其他语义标签内；验证仅在提交时触发；/关乎可访问性、打印与性能。

HTML 不是“一门编程语言”，它没有逻辑控制、没有变量运算，它的核心技术本质是结构描述与语义表达——浏览器靠它构建 DOM 树，屏幕阅读器靠它理解内容层级，搜索引擎靠它识别主次信息。脱离这个前提去谈“HTML 技术栈”，容易把标签当积木乱搭。

为什么

不能随便套在

外面

很多新手写完页面发现键盘导航跳不到正文、SEO 工具提示“无主内容区域”，问题常出在语义断裂。

是 WAI-ARIA 和 HTML5 规范明确定义的“页面唯一主要内容容器”，一个文档里只能出现一次，且不能嵌套在

、

、

等已有语义的区块内。

• ✅ 正确：直接包裹核心文章或表单区域，如

  用户注册

  ...
• ❌ 错误：
  ...
  —— 外层
  削弱了

  的语义权重，相当于给身份证套了个塑料袋再递出去
• ⚠️ 注意：
  不影响视觉样式，但会影响 document.querySelector('main') 的可预测性，以及 Safari + VoiceOver 组合下的焦点流顺序

的验证到底在哪发生

浏览器原生验证（Constraint Validation API）只在表单提交时触发，oninput 或 onchange 事件中不会自动校验。很多人以为加了 type="email" 就能实时拦截非法输入，结果用户输完“abc@”就点提交，才弹红框——体验断层就在这儿。


Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
• ✅ 实操建议：用 checkValidity() 主动触发验证，配合 setCustomValidity() 控制错误文案
• ✅ 场景适配：移动端需监听 input 事件（而非 change），因为软键盘收起不一定会触发 change
• ⚠️ 兼容陷阱：type="date" 在 iOS Safari 上仍渲染为文本框，且不支持 min/max 的 JS 动态更新，必须初始化时写死属性值

的 / 不只是为了好看

这些标签直接影响表格的可访问性与打印行为。没有

的表格，NVDA 屏幕阅读器无法重复播报表头；没有 的长表格，在分页打印时可能把表头和数据割裂到不同页。

• ✅ 必须包含：

内至少一个 应在 中，其余数据行应包裹在 内（ 可选）

✅ 性能提示：对超大表格（>1000 行），用

包裹后，JS 操作 tbody.rows 比遍历整个 table.rows 快约 20%（实测 Chrome 124）

⚠️ 常见错误：用

模拟表格布局，然后加 role="table" —— 这种“伪语义”无法通过 WCAG 2.1 AA 认证，且多数辅助技术不识别

真正卡住人的从来不是“怎么写”，而是“为什么必须这么写”——比如

必须紧贴 开始，否则会被某些读屏软件忽略；比如 aria-label 和 alt 不能同时出现在同一个 上，否则后者会被前者完全覆盖。这些细节不写进 DOM 规范的犄角旮旯里，但天天在真实项目里冒泡。