HTML 标签参考
浏览所有 HTML5 标签的描述和使用示例。
93 个标签
| 标签 | 描述 | 示例 |
|---|---|---|
<!DOCTYPE> | Defines the document type | <!DOCTYPE html> |
<html> | Root element of an HTML page | <html lang="en"> |
<head> | Container for metadata | <head>...</head> |
<title> | Defines the document title shown in browser tab | <title>Page Title</title> |
<body> | Contains the visible page content | <body>...</body> |
<meta> | Defines metadata about the document | <meta charset="UTF-8"> |
<link> | Links to external resources (CSS, icons) | <link rel="stylesheet" href="style.css"> |
<script> | Embeds or references JavaScript | <script src="app.js"></script> |
<style> | Embeds CSS styles | <style>body { margin: 0; }</style> |
<base> | Base URL for all relative URLs in the page | <base href="https://example.com/"> |
<h1>–<h6> | Heading levels 1 through 6 | <h1>Page Title</h1> |
<p> | Paragraph | <p>Paragraph text.</p> |
<br> | Line break | Line one<br>Line two |
<hr> | Thematic break (horizontal rule) | <hr> |
<pre> | Preformatted text (preserves whitespace) | <pre> code here </pre> |
<blockquote> | Long block quotation from another source | <blockquote cite="url">Quote</blockquote> |
<q> | Short inline quotation | <q>Short quote</q> |
<abbr> | Abbreviation or acronym | <abbr title="World Health Organization">WHO</abbr> |
<address> | Contact information for the article or page | <address>Email: contact@example.com</address> |
<cite> | Title of a cited creative work | <cite>Hamlet</cite> |
<code> | Inline code fragment | <code>console.log()</code> |
<dfn> | Term being defined | <dfn>HTML</dfn> is a markup language. |
<kbd> | Keyboard input | Press <kbd>Ctrl+C</kbd> |
<samp> | Sample output from a program | <samp>Error 404</samp> |
<var> | Variable in math or programming | <var>x</var> = 5 |
<sub> | Subscript text | H<sub>2</sub>O |
<sup> | Superscript text | E = mc<sup>2</sup> |
<mark> | Highlighted/marked text | <mark>important</mark> |
<del> | Deleted text | <del>old text</del> |
<ins> | Inserted text | <ins>new text</ins> |
<small> | Small print or side comments | <small>Terms apply</small> |
<strong> | Strong importance (bold) | <strong>Important</strong> |
<em> | Emphasized text (italic) | <em>emphasis</em> |
<b> | Bold text (stylistic, no extra importance) | <b>bold</b> |
<i> | Italic text (stylistic, or technical terms) | <i>italic</i> |
<u> | Underlined text | <u>underline</u> |
<s> | Strikethrough text (no longer accurate) | <s>old price</s> |
<span> | Generic inline container for styling | <span class="highlight">text</span> |
<ul> | Unordered list | <ul><li>Item</li></ul> |
<ol> | Ordered (numbered) list | <ol><li>Step 1</li></ol> |
<li> | List item (in ul or ol) | <li>List item</li> |
<dl> | Description list | <dl><dt>Term</dt><dd>Definition</dd></dl> |
<dt> | Term in a description list | <dt>HTML</dt> |
<dd> | Description in a description list | <dd>HyperText Markup Language</dd> |
<a> | Hyperlink | <a href="https://example.com">Link</a> |
<nav> | Navigation links section | <nav>...</nav> |
<header> | Introductory content or navigation | <header><h1>Site Title</h1></header> |
<footer> | Footer for a section or page | <footer>© 2025</footer> |
<main> | Main content of the document | <main>...</main> |
<article> | Self-contained composition (blog post, news) | <article>...</article> |
<section> | Thematic grouping of content | <section>...</section> |
<aside> | Content tangentially related to main content | <aside>Sidebar</aside> |
<div> | Generic block-level container | <div class="card">...</div> |
<details> | Disclosure widget (expandable) | <details><summary>More</summary>...</details> |
<summary> | Summary/caption for a details element | <summary>Show more</summary> |
<dialog> | Dialog box or window | <dialog open>Content</dialog> |
<img> | Embeds an image | <img src="photo.jpg" alt="Description"> |
<audio> | Embeds audio content | <audio src="sound.mp3" controls></audio> |
<video> | Embeds video content | <video src="movie.mp4" controls></video> |
<source> | Media source for audio/video/picture | <source src="video.webm" type="video/webm"> |
<track> | Text tracks for video/audio (subtitles) | <track kind="subtitles" src="sub.vtt"> |
<picture> | Container for multiple image sources | <picture><source srcset="img.webp"><img src="img.jpg"></picture> |
<figure> | Self-contained content with optional caption | <figure><img src="img.jpg"><figcaption>Caption</figcaption></figure> |
<figcaption> | Caption for a figure element | <figcaption>Image caption</figcaption> |
<canvas> | Drawing surface for JavaScript graphics | <canvas id="myCanvas" width="200" height="100"></canvas> |
<svg> | Inline SVG vector graphics | <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg> |
<iframe> | Embeds another HTML page | <iframe src="https://example.com"></iframe> |
<embed> | Embeds external content (plugin) | <embed src="file.pdf" type="application/pdf"> |
<object> | Embeds external resource (object) | <object data="file.pdf" type="application/pdf"></object> |
<table> | Table | <table><tr><td>Cell</td></tr></table> |
<thead> | Header rows of a table | <thead><tr><th>Col</th></tr></thead> |
<tbody> | Body rows of a table | <tbody>...</tbody> |
<tfoot> | Footer rows of a table | <tfoot>...</tfoot> |
<tr> | Table row | <tr><td>Cell 1</td><td>Cell 2</td></tr> |
<th> | Header cell | <th scope="col">Name</th> |
<td> | Data cell | <td>Content</td> |
<caption> | Table caption | <caption>Sales Data 2025</caption> |
<colgroup> | Group of table columns | <colgroup><col span="2"></colgroup> |
<col> | Table column properties | <col style="width: 50%"> |
<form> | HTML form for user input | <form action="/submit" method="POST">...</form> |
<input> | Input control (text, checkbox, radio, etc.) | <input type="text" name="username"> |
<textarea> | Multi-line text input | <textarea rows="4" name="message"></textarea> |
<button> | Clickable button | <button type="submit">Submit</button> |
<select> | Drop-down selection list | <select><option>Option 1</option></select> |
<option> | Option in a select element | <option value="1">Option 1</option> |
<optgroup> | Group of related options in select | <optgroup label="Group"><option>...</option></optgroup> |
<label> | Label for a form element | <label for="email">Email:</label> |
<fieldset> | Group of related form elements | <fieldset><legend>Personal</legend>...</fieldset> |
<legend> | Caption for a fieldset | <legend>Personal Info</legend> |
<datalist> | List of predefined options for an input | <datalist id="browsers"><option value="Chrome"></datalist> |
<output> | Result of a calculation | <output name="result">0</output> |
<progress> | Progress indicator | <progress value="70" max="100">70%</progress> |
<meter> | Scalar measurement within a range | <meter value="0.7" min="0" max="1">70%</meter> |
关于本工具
HTML 标签参考是一个综合查询工具，按类别列出所有 HTML5 标准标签。
每个条目包含标签的用途、简短描述和实际使用示例，加速开发和学习。
使用方法
- 在搜索框中输入标签名称或选择类别过滤器。
- 单击标签名称将其复制到剪贴板。
- 查看描述列了解标签用途。
- 查看示例列获取代码片段。
使用场景
当您想不起某个标签时、探索 HTML5 元素时，或作为 HTML 初学者的快速入门指南时使用。
常见问题
- 是否包含所有 HTML5 标签？ — 是的，涵盖了 W3C HTML5 规范中定义的所有主要标签。
- 如何复制标签名称？ — 单击表格中的标签名称，它将立即复制到剪贴板。
- 如何使用类别过滤器？ — 单击顶部的类别按钮，仅显示该类别的标签。