HTML 标签

2025年3月17日 | 阅读 15 分钟

HTML 标签就像关键字，定义了网页浏览器将如何格式化和显示内容。通过标签，网页浏览器可以区分 HTML 内容和普通内容。HTML 标签包含三个主要部分：开始标签、内容和结束标签。但有些 HTML 标签是未闭合的标签。

当网页浏览器读取 HTML 文档时，它会从上到下、从左到右进行读取。HTML 标签用于创建 HTML 文档并渲染其属性。每个 HTML 标签都有不同的属性。

HTML 文件必须包含一些必需的标签，以便网页浏览器可以区分普通文本和 HTML 文本。您可以根据代码需求使用任意数量的标签。

所有 HTML 标签都必须包含在 < > 这对括号中。
HTML 中的每个标签都执行不同的任务。
如果您使用了开始标签 <tag>，则必须使用结束标签 </tag>（某些标签除外）。

语法

HTML 标签示例

注意：HTML 标签始终用小写字母书写。基本 HTML 标签如下所示。

<h2> 标题标签 </h2>

<u> 下划线标签</u>

立即测试

未闭合的 HTML 标签

某些 HTML 标签没有结束标签，例如 br 和 hr。

<br> 标签：br 代表换行（break line），它会中断代码的行。

<hr> 标签：hr 代表水平线（Horizontal Rule）。此标签用于在网页上放置一条线。

HTML 元数据标签

DOCTYPE、title、link、meta 和 style

HTML 文本标签

HTML 链接标签

HTML 图片和对象标签

HTML 列表标签

HTML 表格标签

table、tr、td、th、tbody、thead、tfoot、col、colgroup 和 caption

HTML 表单标签

form、input、textarea、select、option、optgroup、button、label、fieldset 和 legend

HTML 脚本标签

script 和 noscript

注意：我们将在后面的章节中看到这些标签的示例。

所有 HTML 标签

让我们来讨论 HTML 中存在的完整标签列表，如下所示。

1. 注释

使用此标签，我们可以在 HTML 中添加注释。注释元素后，浏览器将不渲染它。此外，这些注释部分不会显示在网页上。但是这些注释的代码可以在源代码中找到。

语法

2. Doctype

使用此标签，我们可以向网页浏览器声明标记语言的版本。

语法

3. <a>

使用此标签，我们可以创建网页的超链接。超链接可以通过其他位置的不同文件来实现。

语法

4. <abbr>

使用此标签，我们可以定义较长单词的缩写或首字母缩略词，例如 www、HTML、HTTP 等。

语法

5. <strong>address>:**

使用此标签，我们可以找到网页作者的地址或联系方式。<address> 标签包含地址、手机号码、电子邮件、网站链接等。

语法

<address>
Contact Information Goes Here
</address>

6. <area>

使用此标签，我们可以识别与超链接关联的可点击区域。

语法

<area shape="shape-type" coords="coordinates" href="destination-url" alt="alternative-text">

7. <article>

使用此标签，我们可以表示一段将被分发到其他网站而无需成为其中的一部分的内容。使用 <article> 标签，我们可以显示完整的博客文章、新闻文章或类似内容等。

语法

<article>
<!-- Content goes here -->
</article>

8. <audio>

使用此标签，我们可以将音频文件嵌入到网页中。为此，无需 Flash 等额外插件。

语法

<audio src="audio-file.mp3" controls>
Your browser does not support the audio element.
</audio>

9. <aside>

使用此标签，我们可以定义与网页主内容相关的内容，但它们不构成网页的一部分。

语法

<aside>
<!-- Content goes here -->
</aside>

10. <b>

使用此标签，我们可以在没有任何额外含义的情况下使文本加粗。

语法

11. <base>

使用此标签，我们可以创建文档中所有 URL 所在的基地址。

语法

12. <bdi>

使用此标签，我们可以指示浏览器通过双向算法隔离来自其他来源的文本。

语法

13. <bdo>

使用此标签，我们可以覆盖当前文本。

语法

14. <blockquote>

使用此标签，我们可以提供一种从另一个来源在文档中插入引用的方式。默认情况下，浏览器会将引号标签内的文本视为缩进。

语法

<blockquote>
Quoted content goes here.
</blockquote>

15. <body>

使用此标签，我们可以定义网页的主体内容。body 标签包括文本、段落、标题、图像、表格、链接和视频。

语法

<body>
  <!-- Content goes here -->
</body>
<strong> </strong>

16. <br>

使用此标签，我们可以在网页上产生换行。我们基本上可以在写诗歌或需要换行的地址时使用此标签。

语法

<br>
<strong> </strong>

17. <button>

使用此标签，我们可以在网页上创建一个可点击的按钮。我们可以在表单中或文档中的任何位置使用 button 标签。

语法

<button>Button Text</button>
<strong> </strong>

18. <canvas>

使用此标签，我们可以定义一个用于通过脚本（通常是 JavaScript）绘制图形的特定区域。

语法

19. <caption>

使用此标签，我们可以创建表格标题，用于为表格创建标题。

语法

<table>
<caption>Caption Text</caption>
<!-- Table content goes here -->
</table>

20. <cite>

使用此标签，我们可以进行一些创意工作，并为该创意作品命名。

语法

21. <code>

使用此标签，我们可以插入特定的代码片段，可能是 HTML 或 CSS 代码。

语法

22. <col>

使用此标签，我们可以指定所有列的属性。我们可以在 <colgroup> 元素内指定它。

语法

23. <colgroup>

使用此标签，我们可以将一列或多列分组。通过它，我们可以将样式应用于整个列，而无需为每一列和每一行重复样式。

语法

<colgroup>
<!-- col elements go here -->
</colgroup>

24. <data>

使用此标签，我们可以添加机器可读的翻译。它由处理器生成，浏览器可以生成人类可读的值。

语法

25. <datalist>

使用此标签，我们可以为表单元素提供自动完成功能。通过它，用户可以从选项列表中选择选项。

语法

<input list="datalist-id">
<datalist id="datalist-id">
<!-- option elements go here -->
</datalist>

26. <dd>

使用此标签，我们可以在 HTML 中定义定义描述。它也用于描述定义列表中的一项。

语法

<dl>
<dt>Term</dt>
<dd>Description or definition goes here</dd>
</dl>

27. <del>

使用此标签，我们可以声明将从文档中删除的特定部分。执行此操作后，网页浏览器会在此特定部分上划删除线。

语法

28. <details>

使用此标签，我们可以创建一个可切换的元素。这个可切换元素包含所有信息，但处于关闭状态。当我们将其鼠标悬停时，它会进入打开状态并显示所有隐藏的信息。

语法

<details>
<summary>Summary Text</summary>
<!-- Content goes here -->
</details>

29. <dfn>

使用此标签，我们可以表示定义元素。通过定义元素，我们可以定义定义的实例。当一个术语首次出现在文档中时，它被称为定义的实例。

语法

30. <dialog>

使用此标签，我们可以定义对话框和其他网页组件。通过这个组件，网页可以与用户进行精美的交互。

语法

<dialog open>
<!-- Dialog content goes here -->
</dialog>

31. <div>

使用此标签，我们可以创建一个通用容器，可以容纳内容的流程。它也没有默认渲染。

语法

<div>
<!-- Content goes here -->
</div>

32. <dl>

使用此标签，我们可以定义网页上的项目列表。我们也可以通过此标签表示元数据。

语法

<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<!-- more terms and definitions -->
</dl>

33. <dt>

使用此标签，我们可以在网页上定义定义列表。我们必须在 <dl> 标签内编写 <dt> 标签。我们也可以通过 <dd> 标签来处理这个元素。

语法

<dl>
<dt>Term</dt>
<!-- Definition or description goes here -->
</dl>

34. <em>

使用此标签，我们可以强调句子中的某个词或短语。它将普通词或句子转换为斜体和语义样式。

语法

35. <embed>

使用此标签，我们可以将外部内容（如音频或视频）嵌入到网页中。

语法

36. <fieldset>

使用此标签，我们可以在表单中创建一组相关元素。此外，通过它，我们可以围绕元素创建一个框。

语法

<fieldset>
<legend>Fieldset Title</legend>
<!-- Form controls go here -->
</fieldset>

37. <figcaption>

使用此标签，我们可以为 <figure> 元素中包含的图像、表格或图表附加标题。

语法

<figure>
<!-- Content goes here -->
<figcaption>Caption or Description</figcaption>
</figure>

38. <figure>

使用此标签，我们可以创建独立的内容，也称为单个实体。

语法

<figure>
<!-- Content goes here -->
<figcaption>Caption or Description</figcaption>
</figure>

39. <footer>

使用此元素，我们可以表示根元素中的页脚部分。

语法

<footer>
<!-- Footer content goes here -->
</footer>

40. <form>

使用此标签，我们可以从用户那里接收信息。

语法

<form action="form-handler-url" method="HTTP-method">
<!-- Form controls go here -->
</form>

41. <head>

使用此标签，我们可以指定代码头部部分的头部。它包含有关文档的所有信息。

语法

<head>
  <!-- Head content goes here -->
</head>

42. <header>

使用此标签，我们可以定义网页的头部。它还包含有关文档和章节的标题和副标题的信息。

语法

<header>
  <!-- Header content goes here -->
</header>

43. <hgroup>

使用此标签，我们可以表示标题组。它也用于组合标题元素，例如 <h1> 到 <h6> 的标题和副标题。

语法

<h1>Main Heading</h1>
<h2>Subheading 1</h2>
<h3>Sub-subheading 1.1</h3>
<h3>Sub-subheading 1.2</h3>
<h2>Subheading 2</h2>

44. <h1> 到 <h6>

使用此标签，我们可以定义网页的标题。它默认也会使标题变得更大更粗。<h1> 标题显示为最大的字体，而 <h6> 标题显示为最小的字体。

语法

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

45. <hr>

使用此标签，我们可以划分网页。它代表水平线或主题分隔符。

语法

46. <html>

使用此标签，所有其他元素都包含在其中。它也称为 HTML 元素的根。

语法

<!DOCTYPE html>
<html>
<!-- HTML content goes here -->
</html>

47. <i>

使用此标签，我们可以使任何内容斜体化。它突出显示重要的术语、短语或技术术语。

语法

48. <iframe>

使用此标签，我们可以将另一个 HTML 页面嵌入到当前网页中。

语法

49. <img>

使用此标签，我们可以将图像嵌入到当前网页中。它将图像链接到图像，而无需直接将其插入网页。

语法

50. <input>

使用此标签，我们可以启用表单中的交互式控件。它还取决于属性 type 的各种字段。

语法

51. <ins>

使用此标签，我们可以指定已插入文本的块。它还表示文档中已添加了特定范围的文本。

语法

52. <kbd>

使用此标签，我们可以引用行内文本中代表用户键盘、语音或任何其他文本输入设备的文本部分。

语法

53. <label>

使用此标签，我们可以提高鼠标用户的可用性，即点击标签将切换控件。

语法

54. <legend>

使用此标签，我们可以为子内容定义标题。Legend 是所有子元素的主元素。我们可以使用 <fieldset> 定义这些元素。

语法

<fieldset> 
<legend>Fieldset Caption</legend>
<!-- Form controls go here -->
</fieldset>

55. <li>

使用此标签，我们可以表示网页上的列表项。它包含一个有序列表（无序列表或菜单）作为父元素。

语法

<ul>
<li>List Item 1</li>
  <li>List Item 2</li>
<li>List Item 3</li>
</ul>

56. <link>

使用此标签，我们可以将外部资源链接到当前网页。

语法

57. <main>

使用此标签，我们可以将一个普通元素设置为最重要的元素。我们必须在 <body> 标签内编写此标签。

语法

<main>
<!-- Main content goes here -->
</main>

58. <map>

使用此标签，我们可以定义地图图像。图像地图也有一个可点击的区域。

语法

<map name="map-name">
<!-- Area tags go here -->
</map>

59. <mark>

使用此标签，我们可以将文本表示为高亮显示，用于参考或注释目的。根据内容的重要性，它会突出显示文本。

语法

60. <meta>

使用此标签，我们可以表示文档的元数据。元数据包含页面描述、关键字、版权、使用的语言和作者。

语法

61. <meter>

使用此标签，我们可以表示给定范围内的测量值或分数。它也称为仪表盘。

语法

<meter value="current-value" min="minimum-value" max="maximum-value">Fallback Content</meter>

62. <nav>

使用此标签，我们可以表示文档中的导航链接部分。nav 标签的一些示例是菜单、目录、索引等。

语法

<nav>
<!-- Navigation links or menus go here -->
</nav>

63. <noscript>

使用此，我们可以在用户浏览器不支持特定脚本时提供替代脚本。当用户浏览器不支持客户端脚本或不支持任何脚本语言时，它也能工作。

语法

<noscript>
<!-- Alternate content goes here -->
</noscript>

64. <object>

使用此标签，我们可以在网页上显示多媒体，如音频、视频、图像、PDF 和 Flash。

语法

65. <ol>

此标签用于创建有序列表。有序列表可以是数字的或字母的。在 <ol> 标签内，我们可以使用 <li> 标签创建列表。它将遵循顺序。

语法

<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>

66. <optgroup>

此标签用于创建下拉列表。通过此标签，我们可以定义选项组。

语法

<select>
<optgroup label="Group Label">
    <option value="option1">Option 1</option>
<option value="option2">Option 2</option>   
<!-- Additional options -->
</optgroup>
<!-- Additional outgroup or option elements -->
</select>

67. <option>

使用此标签，我们可以通过使用 <select> 标签在下拉列表中定义选项。

语法

<select>
<option value="option-value">Option Text</option>
<!-- Additional options -->
</select>

68. <output>

使用此标签，我们可以创建用于注入计算结果的元素的容器。

语法

69. :

使用此标签，我们可以定义段落标签。通过段落标签，我们可以将视觉媒体表示为文本块，这些文本块与相邻的文本块通过空行或首行缩进分隔。

语法

70. <param>

使用此标签，我们可以为对象定义参数。通过它，我们可以传递另一个嵌入对象的参数。

语法

<object>
<param name="param-name" value="param-value">
</object>

71. <picture>

使用此标签，我们可以通过指定图像为网页提供灵活性。它还包含 <source> 和 <img> 等标签。

语法

<picture>
<source srcset="image1.jpg" media="media-query">
<source srcset="image2.jpg" media="media-query">
<img src="fallback-image.jpg" alt="Fallback Image">
</picture>

72. <pre>

使用此标签，我们可以在网页上声明预格式化文本块，如空格、换行符、制表符等预格式化字符。

语法

<pre>
The pre-formatted text goes here.
</pre>

73. <progress>

使用此标签，我们可以显示任务的进度。通过它，开发人员可以在其网页上创建一个进度条。

语法

74. <q>

使用此标签，我们可以在网页上创建内联引用。在当今的大多数浏览器中，文本都包含在引号内。

语法

75. <rp>

使用此标签，当浏览器不支持 ruby 注释时，我们可以将其用于备用括号。

语法

<ruby>
Base text <rp>(</rp><rt>Ruby text</rt><rp>)</rp>
</ruby>

76. <rt>

使用此标签，我们可以定义 ruby 注释中字符的发音。

语法

<ruby>
Base text <rt>Ruby text</rt>
</ruby>

77. <ruby>

通过此，我们可以定义东亚字符的发音，并在基本文本的上方、下方或旁边显示小型注释。

语法

<ruby>
Base text <rt>Ruby text</rt>
</ruby>

78. <s>

使用此标签，我们可以将文本渲染为删除线或划线。当内容不再准确或相关时，我们可以使用此标签。

语法

79. <samp>

使用此标签，我们可以定义计算机程序的示例输出。此标签的内容在浏览器中以等宽字体显示。

语法

80. <script>

使用此标签，我们可以插入客户端脚本。它还支持在 HTML 网页中插入脚本。

语法

81. <section>

使用此标签，我们可以创建网页的头部、页脚或任何其他部分。

语法

<section>
  <!-- Content goes here -->
</section>

82. <select>

使用此标签，我们可以定义列表中的选项列表。

语法

<select>
  <option value="option-value">Option Text</option>
  <!-- Additional options -->
</select>

83. <small>

使用此标签，我们可以将字体大小减小一个级别，例如从大到小。

语法

84. <source>

使用此标签，我们可以链接多个媒体资源，如 <audio> 和 <video>。

语法

85. <strong>

使用此标签，我们可以定义内容为非常重要。浏览器将以粗体显示该元素。

语法

86. <span>

它是 HTML 中最通用的元素。我们可以通过对元素进行分组来应用样式。

语法

87. <style>

使用此标签，我们可以为文档提供样式信息。

语法

<style>
  CSS rules go here
</style>

88. <sub>

使用此标签，我们可以仅出于排版原因显示下标元素。

语法

89. <summary>

使用此标签，我们可以使用 <details> 元素创建一个框，其中包含摘要、标题或图例。当我们单击摘要按钮时，它会执行父 <details> 元素的打开/关闭状态。

语法

<details>
<summary>Summary text</summary>
<!-- Collapsible content goes here -->
</details>

90. <sup>

使用此标签，我们可以将任何文本显示为行内元素的上标。

语法

91. <svg>

使用此标签，我们可以将 SVG 图形嵌入到网页中。此外，我们可以使用此标签以 XML 格式定义矢量图形。

语法

<svg>
  <!-- SVG content goes here -->
</svg>

92. <table>

使用此标签，我们可以在 HTML 中以表格格式定义数据。它将创建一个包含某些行和列的二维表格。

语法

<table>
  <!-- Table content goes here -->
</table>

93. <tbody>

使用此标签，我们可以封装与表格主体相关的表格行。

语法

<table>
  <tbody>
    <!-- Table rows go here -->
  </tbody>
</table>

94. <td>

使用此标签，我们可以定义表格的单元格。表格行可能包含多个 <td> 元素。此元素中的默认对齐方式为左对齐。

语法

<tr>
  <td>Table cell content</td>
</tr> 

下一个主题HTML 属性

← 上一个下一个 →

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview