不能嵌套在里，因w3c规定其必须是文档级唯一主容器，不得作为任何节根元素（如、）的子元素，否则破坏可访问性树和seo识别。

HTML5 的语义标签只是表象，真正决定结构健壮性的是隐式内容模型与元素嵌套约束——不理解这点，@#@#@#@#@#@#@#@#@#@0 —— 分页不是主要导航，应使用 <div role="navigation"> 或普通 <code><div> <li>后果：AT（辅助技术）用户会收到冗余提示，比如“导航区域，共 3 项”，实际只有 1 个链接</li> <li>检测建议：用 axe 浏览器插件扫描，它会标记出“<code><nav></nav> contains too few links” 类警告

自定义元素（Custom Elements）绕不开 is 和 extends 的继承限制

想用 <my-button></my-button> 替代 <button></button>？那得用 extends="button" 并调用 customElements.define()，否则无法继承原生按钮的表单提交、空格回车触发、禁用状态等行为。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 错误示范：<my-button></my-button> 独立定义，没继承 HTMLButtonElement —— 它不会响应 form 提交，disabled 属性也不生效
• 必须步骤：定义类时 extends HTMLButtonElement；注册时传入 { extends: "button" }；HTML 中写成 <button is="my-button"></button>
• 坑点：Safari 对 is="" 的支持仍不稳定，生产环境慎用；更稳妥的做法是封装为 Web Component + shadow DOM，再透传原生属性

结构逻辑的复杂点不在标签怎么写，而在“浏览器如何解释嵌套关系”——这取决于 DTD 规则、AAM（Accessible Name and Description Computation）、以及 HTML 解析器对“节根”“流内容”“短语内容”的隐式分类。改一个标签容易，改掉思维惯性难。