新手页面报错排查
刚学 HTML 的前端实习生写了一个表单页面，提交后按钮没反应。查了半天不知道是 <form> 缺了 action 属性，还是 <input> 的 type 写成了 submit 的拼写错误。打开本工具，在「表单标签」分类下逐条对照 <form>、<input>、<button> 的必填属性和合法值，3 分钟定位到是 <input type="submmit"> 多了一个 m。
标 签 分 类文档结构 · 内容分区 · 文本 · 列表 · 表格 · 表单 · 多媒体 · 交互语义 · 常用属性
标 签 速 查Gallery · 点卡片看属性 / 示例 / 实时渲染效果
点选左侧任一标签
查看 常用属性 / 语法示例 / 实时渲染效果 · 语义说明 · 相关标签
查看 常用属性 / 语法示例 / 实时渲染效果 · 语义说明 · 相关标签
就绪 · 对照 MDN HTML 元素 · 含 全标签 + 属性 + 语法 + 实时渲染（已脱毒）· 全程浏览器本地
第一节
关于本工具
About写页面时，想用 `<dialog>` 弹窗却记不清 `open` 属性是布尔值还是字符串；查 `<input>` 的 `type` 列表，翻 MDN 要滚好几屏。这个速查表把 120+ 个 HTML 标签及其合法属性、示例代码收拢到一张表里，按语义分组，点开即见。所有内容静态存放，不请求任何服务器，打开页面就是完整数据。
使用场景
CMS模板标签替换
运营编辑用公司 CMS 发文章，发现富文本编辑器里插入的图片在手机端撑破布局。技术说需要给 <img> 加 max-width: 100% 的 style，但运营记不住属性写法。在本工具搜索「img 标签」，看到完整属性列表和示例代码，直接复制 style="max-width: 100%; height: auto;" 贴回编辑器，手机预览正常。
旧站迁移标签转义
公司要把一个 2005 年用 table 布局的老网站迁到新框架，里面大量 <font>、<center> 等废弃标签。前端工程师需要批量替换成 CSS 类名，但不确定哪些标签在 HTML5 里已淘汰。打开本工具，按「已废弃」筛选标签，一眼看到 <font>、<big>、<strike> 等 12 个标签及其替代方案，迁移方案半小时定稿。
外包代码验收核对
产品经理收到外包交付的营销落地页源码，怀疑对方用了 <marquee> 跑马灯这种过时标签。不懂代码的产品在工具里搜「marquee」，看到标注为「已废弃」且无浏览器支持说明，截图发给外包要求重写。同时对照工具里的语义化标签列表，确认外包用了 <div> 代替 <nav> 和 <article>，要求整改后验收通过。
面试前突击语法细节
前端求职者准备第二天面试，被问到 <script> 标签的 async 和 defer 区别时卡住了。打开本工具找到 <script> 标签页，看到两个属性的对比说明和加载时序图，快速默记：async 下载完立即执行，defer 按文档顺序在 DOM 解析完后执行。面试时准确答出区别，当场拿到二面通知。
第二节
使用指南
Getting Started使用步骤
- 1在搜索框输入标签名（如 `div`）或属性名（如 `class`），下方列表实时过滤匹配项
- 2点选任意标签行，右侧面板展开该标签的完整属性列表、浏览器兼容性标记及示例代码
- 3点击属性行旁的「复制」图标，属性名与说明文本自动写入剪贴板
- 4展开「示例」区块，代码块右上角提供一键复制，可直接粘贴到编辑器测试
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| <a href="https://example.com">链接</a> | 标签：a 属性：href="https://example.com" 说明：定义超链接，href 指定目标 URL。 | 常规：最常用的内联链接标签，验证工具能否正确解析 href 属性值。 |
| <img src="photo.jpg" alt="风景"> | 标签：img 属性：src="photo.jpg", alt="风景" 说明：嵌入图像，src 指定路径，alt 提供替代文本。 | 常规：自闭合标签典型用例，验证工具是否识别 img 无结束标签且正确列出多个属性。 |
| <div> | 标签：div 属性：无 说明：通用块级容器，常用于布局分组。 | 常规：无属性标签，验证工具在无属性时输出'无'而非报错。 |
| <input type="text" disabled> | 标签：input 属性：type="text", disabled 说明：表单输入控件，disabled 为布尔属性，无需值。 | 边界：布尔属性 disabled 无等号值，验证工具能否正确识别布尔属性写法。 |
| <meta charset="UTF-8"> | 标签：meta 属性：charset="UTF-8" 说明：定义文档元数据，charset 指定字符编码。 | 边界：head 内自闭合标签，验证工具是否忽略标签位置（head/body）只解析语法。 |
| <style>body { color: red; }</style> | 标签：style 属性：无 说明：定义内嵌 CSS 样式，内容为样式规则。 | 边界：包含文本内容的标签，验证工具是否将 CSS 代码视为标签内容而非属性。 |
| <p>第一段</p><p>第二段</p> | 标签：p 属性：无 说明：定义段落，浏览器自动在前后添加换行。 | 易错：连续多个相同标签，验证工具是否只解析第一个实例或列出所有实例（应只输出一次标签定义）。 |
| <br> | 标签：br 属性：无 说明：插入换行符，常用于地址或诗歌中强制换行。 | 易错：HTML5 中 br 无需闭合，验证工具是否错误要求闭合标签或正确识别为自闭合。 |
常见错误对照
1.属性值未加引号，导致解析中断
✗ 错误
<a href=https://example.com>链接</a>✓ 修复
<a href="https://example.com">链接</a>HTML 规范要求属性值用引号包裹（单引或双引），否则空格/特殊字符会提前结束属性，导致后续内容被误解析为标签或文本。
2.自闭合标签错误加结束标签
✗ 错误
<br></br>✓ 修复
<br> 或 <br />void 元素（如 <br>、<img>、<input>）不含子内容，规范禁止闭合标签。加 </br> 会被浏览器忽略或产生多余空元素。
3.布尔属性错误赋值
✗ 错误
<input disabled="false">✓ 修复
<input> 或 <input disabled>布尔属性（disabled、checked、readonly）只要出现即生效，值会被忽略；disabled="false" 仍会禁用输入框。正确做法是移除属性。
4.嵌套标签顺序交叉
✗ 错误
<b><i>加粗倾斜</b></i>✓ 修复
<b><i>加粗倾斜</i></b>HTML 标签必须严格嵌套：后开的先关。交叉嵌套违反了 DOM 树结构，浏览器会尝试自动修复，但可能导致渲染异常或语义丢失。
5.特殊字符未转义为实体
✗ 错误
<p>使用 <div> 标签</p>✓ 修复
<p>使用 <div> 标签</p>< 和 > 在 HTML 中是标签界定符，直接书写会被解析为标签开始/结束。必须用 < 和 > 实体表示字面尖括号。
6.重复 ID 导致脚本选择器失效
✗ 错误
<div id="main">...</div><span id="main">...</span>✓ 修复
每个 id 唯一：<div id="main">...</div><span id="sub">...</span>HTML 规范要求 id 在文档中唯一。重复 id 会使 document.getElementById() 等 API 返回第一个匹配元素，后续元素无法被准确选中。
7.块级元素嵌套到行内元素内
✗ 错误
<span><div>块级内容</div></span>✓ 修复
<div><span>行内内容</span></div>行内元素（如 <span>、<a>）不能包含块级元素（如 <div>、<p>）。浏览器会强制闭合外层行内元素，破坏预期布局结构。
8.省略 </li> 或 </td> 但未理解隐式闭合规则
✗ 错误
<ul><li>第一项<li>第二项</ul>✓ 修复
<ul><li>第一项</li><li>第二项</li></ul>虽然部分浏览器允许省略 </li>、</td> 等结束标签，但 XHTML 和严格模式要求显式闭合。依赖隐式闭合可能导致跨浏览器兼容问题。
第三节
工作原理
How It Works核心公式
HTML 标签结构 = <标签名 属性1="值1" 属性2="值2">内容</标签名>
变量说明
标签名HTML 元素名称，如 div、a属性可选，键值对形式修饰标签行为内容标签包裹的文本或嵌套子标签
示例
超链接标签：<a href="https://example.com" target="_blank">访问示例</a>，其中标签名 a，属性 href 值为 URL，target 值为 _blank，内容为“访问示例”，浏览器渲染为可点击链接。
用户操作
本地处理
输出结果
第五节
常见问题
Q & A问这个速查表里没有我找的那个 HTML5 新标签，是还没更新吗？＋
答
本页收录了 HTML5 标准中所有仍在使用的标签，包括 `<article>`、`<section>`、`<canvas>`、`<video>` 等。如果你发现某个标签（比如 `<dialog>` 或 `<details>`）没有出现在列表里，可能是它属于实验性特性或未被所有主流浏览器稳定支持。本速查以 W3C 推荐标准（HTML Living Standard）中标记为“广泛实现”的标签为准。你可以在页面内用 Ctrl+F 搜索标签名确认是否遗漏。
问为什么我点某个标签的示例代码，复制到文件里打开没效果？＋
答
最常见的原因是示例只展示了标签本身，缺少基础 HTML 骨架。比如 `<table>` 的示例只给了 `<tr><td>` 片段，直接保存为 .html 文件打开浏览器会忽略它。你需要把示例代码包裹在 `<html><body>` 里，并加上 `<!DOCTYPE html>` 声明。本速查的示例代码块设计为“可理解片段”，不是完整网页，主要展示标签的属性和结构用法。
问这个速查表里的属性列表是全的吗？为什么我查 `<div>` 只有 `class` 和 `id`？＋
答
本速查为每个标签列出的是其**独有或常用**的全局属性之外的属性。像 `class`、`id`、`style`、`data-*` 是所有 HTML 元素都支持的全局属性，为避免重复，只在页面顶部的“全局属性”区域统一说明，不在每个标签下重复列出。`<div>` 本身没有专有属性，所以只列了最常用的 `class` 和 `id` 作为示例。如果你需要完整的属性列表，可以查看每个标签的 MDN 文档链接。
问我写 `<img>` 标签时加了 `loading="lazy"` 但图片还是立即加载，是不是这个速查表写错了？＋
答
速查表正确列出了 `loading` 属性，但它的生效有前提：浏览器必须支持该属性（Chrome 76+、Firefox 75+），且图片的 `src` 必须在视口之外。如果你刚刷新页面、图片在首屏可见区域内，`lazy` 不会生效。另外，`loading="lazy"` 对 `<iframe>` 也有效。你可以打开浏览器开发者工具（F12）的 Network 面板，滚动页面观察图片请求是否被延迟触发来验证。
问`<a>` 标签的 `target="_blank"` 是不是有安全漏洞？这个速查表怎么没写？＋
答
速查表在 `<a>` 标签的示例中展示了 `target="_blank"` 的基本用法，但没有额外标注安全提示，因为那是使用层面的最佳实践而非标签本身的语法。当你用 `target="_blank"` 打开新页面时，新页面可以通过 `window.opener` 控制原页面。安全做法是同时加上 `rel="noopener noreferrer"`。本工具定位是“语法速查”，安全注意事项建议参考更详细的教程。
问为什么 `<input type="number">` 的示例里，我输入 01 它自动变成了 1？＋
答
这是浏览器对 `type="number"` 的原生行为，与速查表无关。HTML 规范规定 `number` 类型的输入框在表单提交时会自动将前导零去除，因为数字类型的值不应该有前导零。如果你需要保留用户输入的格式（如编号 001），应该改用 `type="text"` 并配合 `pattern` 属性做正则验证。速查表在 `<input>` 标签下列出了 `type` 和 `pattern` 属性，可以参考组合用法。
问这个速查表离线能用吗？没网的时候能不能查？＋
答
可以。本页面是纯前端实现，所有标签、属性、示例数据都打包在 HTML/CSS/JS 文件中。一旦页面加载完成（第一次联网打开后），后续即使断网，只要不关闭浏览器标签页或强制刷新，所有内容都可以正常浏览。如果完全离线且未打开过页面，则无法访问。你可以把页面收藏或保存为本地 HTML 文件备用。
问`<form>` 的 `action` 属性到底该填什么？我看速查表里写的 `#`，是不是随便填都行？＋
答
速查表示例里写 `action="#"` 是为了演示语法结构，代表“提交到当前页面”，实际开发中需要替换为服务器端处理脚本的 URL。`action` 属性指定表单数据提交到的地址，可以是相对路径（如 `/submit`）或绝对 URL。如果留空或未设置，表单会提交到当前页面的 URL。注意：如果页面是纯静态 HTML 且没有后端处理，点击提交按钮会导致页面刷新。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。