Html 简明教程

HTML - Tags Reference

HTML 标签带有关代码示例的每一个标签，例如表格、表单、锚点、图像、标题、字幕、文本区、段落、标题、引号、格式设置、div、代码等。

What are HTML Tags?

HTML 标签类似于关键字，它指定了 Web 浏览器将如何格式化和显示内容。Web 浏览器可以使用标签来区分简单内容和 HTML 内容。HTML 标签必不可少的主要组件是起始标签和结束标签。然而，HTML 中的某些标签不会关闭。

html tags

Why do they matter?

Web 浏览器从左到右，从上到下查看 HTML 文档。要生成 HTML 文档并渲染其结构，请使用 HTML 标签。每个 HTML 标签都有一组独特的特性。

HTML Tags List with Examples

在此，我们根据用法对标签进行分类，以创建任何特定组件。

每个标签都伴随着其他一些标签，除非我们强制单独使用它们。每个标签在表格的第三列都有它自己的示例代码，你可以查看和编辑它以查看结果。

HTML Basic Tags

HTML Basic Tags 是 HTML 的基本元素，用于定义文档的结构。这些是包含在尖括号 (< 和 >) 中的字母或单词。通常，大多数 HTML 标签包含一个开始标签和一个结束标签。每个标签都有不同的含义，浏览器会读取标签并相应地显示其包含的内容。

以下是下面列出的基本标签：

Tags

Description

Examples

<!--…​-→

指定一个注释。注释是代码中的批注，不会显示在浏览器窗口中。

Try It

<!DOCTYPE>

指定文档类型。这是规范文档类型和 html 版本所需的初始声明。

Try It

<html>

html 标签是包含所有其他 HTML 标签的容器。它由围绕标签名称的开始和结束尖括号组成。

Try It

<head>

指定有关文档的信息。html <head> 是一个指定为元数据容器的标签。

Try It

<title>

指定文档标题。 <title> 被放置在 <head> 中，指定当网页打开时出现在浏览器的标题栏或标签中的简洁而有描述性的标签。

Try It

<body>

指定主体元素。HTML <body> 标签作为网页中所有可见内容的容器。

Try It

<h1> to <h6>

指定标题 1 至标题 6。它表示节或整个页面的主标题。

Try It

<p>

指定一个段落。此标签用作文本块和内容的容器，指定网页。

Try It

<br>

插入单个换行符。它是一个自闭合元素，用于在文本内容中创建强制换行符。

Try It

<hr />

指定一个水平规则。它是一个自闭合元素，用于在网页内容中插入专题分隔或分隔符。

Try It

HTML Formatting Tags

HTML 中的 Formatting 标记是用来构建和设置网页内容风格的元素，可以提升网站的外观和可读性。这些标记为文本部分添加了语义值，并用于设置文本的可视化外观。

以下是格式设置标记列表：

Tags

Description

Examples

<abbr>

指定一个缩写。它提供了一种语义和可访问的方式来识别解释其含义。

Try It

<address>

指定一个地址元素。<address> 标记提供了一种语义方式来构建文档内的联系信息或作者详细信息。

Try It

<bdi>

表示必须与其周围隔离开来的文本，以便进行双向文本格式设置。它允许使用不同或未知方向嵌入一个文本跨度。

Try It

<bdo>

指定了文本显示的方向。它是一个标记元素，用于指定文档内文本的方向。

Try It

<blockquote>

指定一个长引用。它是一个结构元素，用于标识和视觉上区分页内引用的内容。

Try It

<cite>

指定引文。它是一个语义元素，用于标记创意作品的标题，例如书、文章、歌曲或电影，这些内容在文档中被引用。

Try It

<code>

指定计算机代码文本。HTML <code> 标记是一个语义元素，用于标记代表文档中计算机代码的文本部分。

Try It

<del>

指定已删除的文本。它是一个语义元素，用于标记已从文档中移除或删除的文本。

Try It

<dfn>

指定定义术语。通常与 <dl> 元素结合使用以及 <dt> 和 <dd> 标记。

Try It

<em>

指定强调的文本。HTML 中的 <em> 标记用于强调文本，通常以斜体形式呈现。

Try It

<i>

指定斜体文本。HTML 中的 <i> 标记用于将斜体格式应用于文本，主要用于显示目的。

Try It

<ins>

指定插入的文本。HTML 中的 <ins> 标记用于标记插入文档的文本。

Try It

<kbd>

指定表示用户输入或键盘输入的键盘文本。

Try It

<mark>

指定是为了参考目的而标出的文本，使其在另一种上下文中具有意义。

Try It

<meter>

HTML 中的 <meter> 标记用于表示预定义范围内的测量。

Try It

<pre>

HTML 中的 <pre> 标记用于定义预格式化文本，该文本将按 HTML 代码中显示的那样准确显示。

Try It

<progress>

HTML 中的 <progress> 标记用于表示任务的进度或操作的完成状态。

Try It

<q>

HTML 中的 <q> 标签用于表示段落或文本中的短的行内引号。

Try It

<rp>

指定向不支持 ruby 元素的浏览器显示。

Try It

<rt>

HTML 中的 <rt> 标签用于定义 ruby 标注的文本组件

Try It

<ruby>

指定 ruby 标注。此标签通常与 <rt> 和 <rp> 标签一起使用。

Try It

<s>

用于渲染带删除线的文本。<s> 标签指定不再正确、准确或相关的文本

Try It

<samp>

用于包围表示计算机程序或脚本的示例输出的行内文本。

Try It

<small>

HTML 中的 <small> 标签用于表示文档中的较小文本。

Try It

<strong>

HTML 中的 <strong> 标签用于表示文档中的较小文本。

Try It

<sub>

HTML 中的 <sub> 标签用于定义文档中下标文本。

Try It

<sup>

HTML 中的 <sup> 标签用于定义文档中上标文本。

Try It

<template>

它是一种机制, 可在页面加载时向用户隐藏某些客户端内容。

Try It

<time>

<time> HTML 中的标签用于表示文档中的特定时间或日期。

Try It

<var>

HTML 中的 <var> 标签表示数学表达式或编程上下文中变量的名称。

Try It

<wbr>

表示 <nobr> 部分中的潜在断字点。

Try It

<b>

它用于突出显示文本并指定粗体文本。

Try It

HTML Forms and Input Tags

Forms 在网页中扮演着至关重要的角色, 通常用于收集联系信息、进行调查和启用用户评论。

以下是下面列出的表单和输入标签:

Tags

Description

Examples

<form>

指定文档中的表单, 通常用于收集联系信息、进行调查和启用用户评论。

Try It

<input>

<input> 标签用于指定文档中的输入字段, 并用于在基于 Web 的表单中创建交互式控件。

Try It

<textarea>

<textarea> 标签用于指定文档中的文本区域或 HTML 表单中的多行文本输入控件。

Try It

<button>

Html <button> 标签用于在 HTML 表单中插入按钮元素

Try It

<select>

<select> 标签用于 HTML 表单中, 提供用户可以从中选择的选项菜单。

Try It

<optgroup>

<optgroup> HTML 中的标签用于将相关选项分组在 <select> 元素 (代表下拉列表) 中。

Try It

<option>

<option> 标签用于通过在下拉列表中创建可选选项来指定 Html <select> 标签中的选项。

Try It

<label>

指定表单控件的标签, 并充当用户界面中某个项的标题。

Try It

<fieldset>

Html <fieldset> 标签用于将表单控件 (如输入字段、复选框和单选按钮) 分组到一起。

Try It

<legend>

Html <legend> 标签用于指定 HTML <fieldset> 标签中的标题。

Try It

<datalist>

HTML 中的 <datalist> 标签为 <input> 元素指定预定义选项列表。

Try It

<output>

<output> 标签用于指定 HTML 表单标签中计算结果。

Try It

HTML Image Tags

Images 是网页的关键元素，使网页变得清晰，增加了内容相关性。

以下是列出的 Image 标签：

Tags

Description

Examples

<img>

<img> 标签用于指定 Html 文档中的图像。

Try It

<map>

HTML 中的 <map> 标签用于定义图像地图，可以通过将图像划分为多个可点击区域来创建视觉吸引力界面。

Try It

<area>

HTML 中的 <area> 标签用于在 <map> 元素中定义图像地图中的可点击区域。

Try It

<canvas>

HTML 中的 <canvas> 标签用于定义网页上可以使用 JavaScript 动态呈现图形、动画或视觉元素的区域。

Try It

<figcaption>

HTML 中的 <figcaption> 标签用于为 <figure> 元素提供标题或描述，并允许开发者为图像、插图、图表、视频或其他多媒体内容添加说明性文字。

Try It

<figure>

<figure> 标签指定 Html 文档中的自包含内容，如图像、插图、图表。

Try It

<picture>

图片允许指定多个图像，这些图像旨在更准确地填充浏览器视口。

Try It

<svg>

<svg>标签在HTML中用于将可缩放矢量图形（SVG）直接附加到网页中。它是一种模块化语言，用于描述视觉效果。

Try It

HTML Audio and Video Tags

<audio>和<video>标签将视觉吸引人的信息内容附加到网页上。此标签有助于增强用户体验。

以下是列出的音频/视频标签：

Tags

Description

Examples

<audio>

<audio>标签用于在HTML文档中插入声音内容，例如音乐或其他音频流。

Try It

<source>

指定视频或音频元素内定义的媒体资源。

Try It

<track>

<track>标签用于为文本音轨指定多媒体元素，例如<audio>和<video>标签。

Try It

<video>

<video>标签用于在HTML文档中插入视频内容，例如电影剪辑或其他视频流。指定媒体播放器中使用的文本音轨。

Try It

HTML Link Tags

@s0是超链接，这意味着当您单击链接时，它会跳到另一份文档。一个网页可以包含各种链接，这些链接可以直接带我们到其他网页或资源，甚至带我们到给定页面中的特定部分。

以下是列出的链接标签：

Tags

Description

Examples

<a>

<a>标签在HTML文档中创建超链接，指定锚。

Try It

<link>

<link>标签用于在HTML文档中链接外部资源。

Try It

<nav>

<nav>标签用于指定只包含导航链接的部分。

Try It

HTML List Tags

@s1是基本元素，用于以多种方式组织和构建网页上的内容。

以下是列出的列表标签：

Tags

Description

Examples

<ul>

<ul>标签指定HTML文档中的无序列表。它用于对项目集合进行分组，没有任何特定的数字顺序。

Try It

<ol>

<ol>标签指定HTML文档中的有序列表。它用于以特定的数字顺序将项目集合分组。

Try It

<li>

<li>用于指定HTML文档中的列表项。它在创建顺序和非顺序列表中发挥着重要作用。

Try It

<dl>

<dt>标签用于指定HTML文档中的定义列表，并作为组织它们的方式。

Try It

<dt>

<dt>标签用于在说明或定义列表中指定术语。

Try It

<dd>

HTML <dd> 标签在描述列表中的描述定义规范中起着至关重要的作用。

Try It

HTML Table Tags

Tables 在 HTML 中通常用于按行和列组织和显示详细数据。它们使用户能够快速扫描并理解信息。

以下是列出的表格标签：

Tags

Description

Examples

<table>

在 HTML 文档中以有条理且美观的方式指定一个表格。

Try It

<caption>

在 HTML 文档中指定一个表格标题。

Try It

<th>

在 HTML <table> 标签中指定一个表格标题。

Try It

<tr>

在 HTML <table> 中指定一个表格行。

Try It

<td>

在 HTML <table> 中指定一个表格单元格。

Try It

<thead>

在 HTML <table> 中指定一个表格标题，并用于在 HTML 表格中对标题内容进行分组。

Try It

<tbody>

在 HTML <table> 中指定一个表格主体。

Try It

<tfoot>

在 HTML 表格中指定一个表格页脚，并用于在 HTML 表格中对页脚内容进行分组。

Try It

<col>

为表格列指定属性。<col> 元素允许您对整个列应用样式。

Try It

<colgroup>

指定表格列组。<colgroup> 标签必须作为 <table> 元素的子元素出现。

Try It

HTML Styles and Semantics Tags

HTML 包含样式和语义标签列表。HTML 样式标签通过在 HTML 文档中添加样式来增强其外观。而 HTML 语义标签通过定义它们包含的内容的含义来嵌入简单性。

以下是列出的样式和语义标签：

Tags

Description

Examples

<style>

HTML <style> 标签为文档样式定义 CSS（层叠样式表）。这些标签用于定义网页中元素的显示样式。

Try It

<div>

HTML <div> 标签是用于构建网页的基本构建块，用于在 HTML 文档中定义一个划分或部分。

Try It

<span>

HTML <span> 标签是用于内联元素和内容的内联容器，用于标记文档中一段文本或部分内容。

Try It

<header>

为文档或部分指定一个标题。它是一个语义元素，包含网页中的介绍性内容和导航元素。

Try It

<footer>

为文档或节指定页脚。它是用于定义网页页脚节的语义元素。

Try It

<main>

指定文档中主要或重要的内容。文档中仅存在一个 <main> 元素。

Try It

<section>

在文档中指定节。HTML <section> 标记可在文档中添加组织良好的节。

Try It

<article>

在 HTML 文档中指定文章。它是用于定义独立内容片段的语义元素。

Try It

<aside>

指定一个与页面内容松散关联的内容。如果移除它，剩余的内容仍然有意义。

Try It

<details>

用于创建包含一些信息的披露小组件，并在小组件切换到“打开”状态时可见。

Try It

<dialog>

在 HTML 文档中指定对话框或窗口。

Try It

<summary>

为给定的 <details> 指定摘要、标题或说明。

Try It

<data>

HTML 数据标记用于将给定的内容片段与机器可读翻译链接起来。

Try It

HTML Meta Tags

HTML Meta tags 用于在网页中提供结构化信息，其内容不会显示在网页上。

以下是列出的元信息标记：

Tags

Description

Examples

<meta>

指定未显示在页面上的 HTML 文档的元数据。

Try It

<base>

为页面中的所有链接指定基础 URL。<base> 标记通常置于 HTML 文档的 <head> 部分中。

Try It

HTML Programming Tags

HTML 编程标记是 HTML 文档的构建块，用于定义文档中不同类型的内容。

以下是列出的编程标记：

Tags

Description

Examples

<script>

在 HTML 文档中指定脚本，并用于嵌入客户端脚本语言。

Try It

<noscript>

在 HTML 文档中指定 noscript 节。

Try It

<embed>

指定外部（非 HTML）应用程序的容器。

Try It

<object>

在 HTML 文档中指定嵌入对象。

Try It