HTML5 语义与组件

搭建嵌套的 details/summary 结构，生成纯 HTML 折叠面板，支持自定义图标和开放状态。

HTML details 折叠生成器

创建 input + datalist 组合，动态添加选项并测试过滤行为和兼容性。

HTML datalist 测试输入建议

编写或粘贴 AMP HTML 代码，实时校验是否符合 AMP 规范并显示错误。

HTML AMP HTML 校验规范

分析表单 HTML，检查是否每个 input 都有正确关联的 label，并指出使用 aria-label 的替代情况。

HTML 关联标签表单验证

输入 Emmet 缩写，实时显示展开后的 HTML 结构，学习高级 Emmet 技巧。

HTML Emmet HTML 缩写语法

演示如何动态更新 datalist 选项以实现搜索建议，并处理键盘选择。

HTML datalist HTML5 演示自动建议

为输入字段选择正确的 autocomplete 值，生成符合规范的 HTML 代码以优化浏览器自动填充。

HTML autocomplete 填充属性表单

列出从text到color的所有input type，旁边实时展示控件的原生渲染，表单开发参考。

HTML input 演示类型表单

使用原生HTML Popover属性创建提示、菜单与对话框，展示四种触发方式及样式定制。

HTML API HTML Popover 弹出

上传图片，点击绘制不规则链接区域，生成HTML <map>代码。

HTML Image Map 多边形热区生成

无需JavaScript，构建纯HTML5折叠面板，添加自定义图标与动画样式，输出语义化代码。

HTML details HTML5 summary 折叠

可视化配置原生 dialog 元素，添加表单并设置方法，生成完整 HTML/CSS/JS 代码。

HTML dialog 模态框生成器

可视化配置<dialog>元素外观与行为，生成现代化、无障碍友好的模态框代码。

HTML dialog HTML 模态框生成器

自定义原生 <dialog> 元素的样式、动画和遮罩效果，一键复制生成语义化且无障碍的模态框代码。

HTML dialog HTML 无障碍模态框

展示各种 HTML5 验证属性（required, pattern, min, max 等）和自定义验证消息的效果。

HTML HTML5 约束表单验证