Html 简明教程

HTML - Tags Reference

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

HTML tags with code examples of each tag like tables, forms, anchor, image, heading, marquee, textarea, paragraph, title, quotes, formatting, div, code etc.

What are HTML Tags?

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

HTML tags are similar to keywords, which specify how a web browser will format and display content. A web browser can differentiate between simple content and HTML content with the use of tags. The major components which are essential for the HTML tag are the opening tag and the closing tag. However, some tags in HTML are not closed.

html tags

Why do they matter?

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

An HTML document is viewed by a web browser from left to right and top to bottom. To generate HTML documents and render their structures, utilize HTML tags. Every HTML tag has a unique set of features.

HTML Tags List with Examples

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

Here we have categorize the tags on the basis of the usage, to create any particular components.

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

Each tag goes with some other tags unless we forced to use them individually. Each tag has it’s own example code on the third column of the table’s that you can check and edit to see the result.

HTML Basic Tags

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

HTML Basic Tags are the fundamental elements of HTML used for defining the structure of the document. These are letters or words enclosed by angle brackets (< and >). Usually, most of the HTML tags contains an opening and a closing tag. Each tag has a different meaning and the browser reads the tags and displays the contents enclosed by it accordingly.

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

Following are the basic tags that are listed below:

Tags

Description

Examples

<!--…​-→

Specifies a comment. Comments are annotations within the code that are note displayed in the browser window.

Try It

<!DOCTYPE>

Specifies the document type. This is the initial declaration required for the specification of document type and html version.

Try It

<html>

The html tags are the container that contains all the other HTML tags. It consist of opening and closing angle brackets surrounding a tag name.

Try It

<head>

Specifies information about the document. Html <head> is a tag specifies as a metadata container.

Try It

<title>

Specifies the document title. <title> is placed within the <head> specifies the concise and descriptive label that appears in the browser’s title bar or tab when the webpage is opened.

Try It

<body>

Specifies the body element. The HTML <body> tag serves as the container for all visible content within a webpage.

Try It

<h1> to <h6>

Specifies header 1 to header 6. It represents the main title or headline of a section or the entire page.

Try It

<p>

Specifies a paragraph. This tag serves as a container for blocks of text and content specifying the web page.

Try It

<br>

Inserts a single line break. It’s a self-closing element used to create a forced line break within text content.

Try It

<hr />

Specifies a horizontal rule. It is a self-closing element used to insert a thematic break or divider within a webpage’s content.

Try It

HTML Formatting Tags

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

Formatting tags in HTML are elements used to structure and style the content of a webpage, enhancing its appearance and readability. These tags add semantic value to text parts and used to style the visual appearance of the text.

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

Following are the Formatting tags that are listed below:

Tags

Description

Examples

<abbr>

Specifies an abbreviation. It provides a semantic and accessible way to identify and explain their meanings.

Try It

<address>

Specifies an address element. The <address> tag provides a semantic way to structure contact information or the author’s detail within a document.

Try It

<bdi>

Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality

Try It

<bdo>

Specifies the direction of text display. IT is a markup element used to specify the direction of text within a document.

Try It

<blockquote>

Specifies a long quotation. It is a structural element used to identify and visually separate quoted content within a webpage.

Try It

<cite>

Specifies a citation. It is a semantic element used to mark up the title of a creative work, such as a book, article, song, or movie, that is referenced within a document.

Try It

<code>

Specifies computer code text. The HTML <code> tag is a semantic element used to mark up sections of text that represent computer code within a document.

Try It

<del>

Specifies deleted text. It is a semantic element used to mark up text that has been removed or deleted from a document.

Try It

<dfn>

Specifies a definition term. It is typically used within <dl> elements along with <dt> and <dd> tags

Try It

<em>

Specifies emphasized text.The <em> tag in HTML is used to emphasize text, typically by rendering it in italics.

Try It

<i>

Specifies italic text. The <i> tag in HTML is used to apply italic formatting to text, primarily for presentational purposes.

Try It

<ins>

Specifies inserted text. The <ins> tag in HTML is used to mark up text that has been inserted into a document.

Try It

<kbd>

Specifies keyboard text. The <kbd> tag in HTML is used to indicate text that represents user input or keyboard input

Try It

<mark>

Specifies a text highlighted for reference purposes, that is for its relevance in another context.

Try It

<meter>

The <meter> tag in HTML is used to represent a measurement within a predefined range.

Try It

<pre>

The <pre> tag in HTML is used to define preformatted text, which is displayed exactly as it appears in the HTML code.

Try It

<progress>

The <progress> tag in HTML is used to represent the progress of a task or the completion status of an operation.

Try It

<q>

The <q> tag in HTML is used to indicate short inline quotations within a paragraph or text.

Try It

<rp>

Specifies to show browsers that do not support the ruby element.

Try It

<rt>

The <rt> tag in HTML is used to define the text component of a ruby annotation

Try It

<ruby>

Specifies an ruby annotation. This tag is typically used in conjunction with <rt> and <rp> tags.

Try It

<s>

It is used to render text with a strike through. The <s> tag specifies text that is no longer correct, accurate, or relevant

Try It

<samp>

It is used to enclose the inline text that represents the sample output from a computer program or a script.

Try It

<small>

The <small> tag in HTML is used to indicate smaller text within a document.

Try It

<strong>

The <strong> tag in HTML is used to indicate smaller text within a document.

Try It

<sub>

The <sub> tag in HTML is used to define subscripted text within a document.

Try It

<sup>

The <sup> tag in HTML is used to define subscripted text within a document.

Try It

<template>

It is a mechanism for holding some client-side content hidden from the user when the page loads.

Try It

<time>

The <time> tag in HTML is used to represent a specific time or date within a document.

Try It

<var>

The <var> tag in Html represents the name of a variable in a mathematical expression or a programming context.

Try It

<wbr>

Indicates a potential word break point within a <nobr> section.

Try It

<b>

It is used to highlight the text and specify the bold text.

Try It

HTML Forms and Input Tags

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

Forms plays a crucial role in a web page which is commonly used in collecting contact information, conducting surveys, and enabling user comments.

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

Following are the Forms and Input Tag tags that are listed below:

Tags

Description

Examples

<form>

Specifies form within a document which is commonly used in collecting contact information, conducting surveys, and enabling user comments.

Try It

<input>

<input> tag is used to specify input field within a document and used to create interactive controls within web based forms.

Try It

<textarea>

<textarea> tag is used to specify textarea within a document or multi-line text input control within an HTML form.

Try It

<button>

Html <button> tag is used to insert button element within an HTML form

Try It

<select>

<select> tag is used in HTML forms and provides a menu of choices that users can select from.

Try It

<optgroup>

The <optgroup> tag in HTML is used to group related options within a <select> element (which represents a drop-down list).

Try It

<option>

<option> tag is used to specify options within an Html <select> tag by creating selectable options within a dropdown list.

Try It

<label>

Specifies a label for a form control and serves as a caption for an item in a user interface.

Try It

<fieldset>

Html <fieldset> tag used to group form controls (such as input fields, checkboxes, and radio buttons) together.

Try It

<legend>

Html <legend> tag is used to specify title in a HTML <fieldset> tag.

Try It

<datalist>

The <datalist> tag in HTML specifies a list of pre-defined options for an <input> element.

Try It

<output>

The <output> tag is used to Specify the result of a calculation within HTML form tag.

Try It

HTML Image Tags

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

Images are crucial element of a web page, makes web page presentable and adds relativity towards the content.

以下是列出的 Image 标签：

Following are the Image tags that are listed below:

Tags

Description

Examples

<img>

The <img> tag is used to specify image within a Html document.

Try It

<map>

The <map> tag in HTML is used to define an image map and and visually appealing interfaces by dividing an image into multiple clickable areas .

Try It

<area>

The <area> tag in HTML is used within an <map> element to define clickable regions in an image map.

Try It

<canvas>

The <canvas> tag in HTML is used to define an area on a webpage where graphics, animations, or visual elements can be dynamically rendered using JavaScript.

Try It

<figcaption>

The <figcaption> tag in HTML is used to provide a caption or description for a <figure> element and allows developers to add descriptive text with an image, illustration, diagram, video, or other multimedia content.

Try It

<figure>

The <figure> tag Specifies self-contained content such as images, illustrations, diagrams within a Html document..

Try It

<picture>

Picture permits the specification of multiple images that are intended to more accurately fill the browser viewport.

Try It

<svg>

The <svg> tag in HTML is used to append Scalable Vector Graphics (SVG) directly into a webpage. It is a modular language used to describe visuals.

Try It

HTML Audio and Video Tags

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

HTML <audio> and <video> tag appends visually appealing and informative content on a web page. This tags helps in enhancing user experiences.

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

Following are the Audio/Video tags that are listed below:

Tags

Description

Examples

<audio>

The <audio> tag is used to insert sound content in an HTML document, such as music or other audio streams.

Try It

<source>

Specifies a media resources for media elements, defined inside video or audio elements.

Try It

<track>

The <track> tag is used to specify text tracks for multimedia elements such as <audio> and <video> tags.

Try It

<video>

HTML <video> tag is used to insert video content in an HTML document, such as movie clips or other video streams. Specifies a text tracks used in media players.

Try It

HTML Link Tags

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

HTML Links are hyperlinks that means when you click on a link, it jump son another document. A webpage can contain various links that take us directly to other web pages or resources and even specific parts of a given page.

以下是列出的链接标签：

Following are the link tag that are listed below:

Tags

Description

Examples

<a>

Specifies an anchor. The HTML <a> tag creates hyperlinks within a HTML document.

Try It

<link>

HTML <link> tag is used to link external resource within a HTML document.

Try It

<nav>

HTML <nav> tag is used to Specify a section that contains only navigation links.

Try It

HTML List Tags

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

HTML lists are fundamental elements used to organize and structure content on web pages in a variety of ways.

以下是列出的列表标签：

Following are the list tags that are listed below:

Tags

Description

Examples

<ul>

HTML <ul> tag Specifies an unordered list within a Html document. It is used to group to collection of items without any specific numerical order.

Try It

<ol>

HTML <ol> tag Specifies an ordered list within a Html document. It is used to group to collection of items in a specific numerical order.

Try It

<li>

HTML <li> is used to Specify a list item within a HTML document. It plays an important role in creating both ordered and unordered lists.

Try It

<dl>

HTML <dt> tag is used to Specify a definition list within a HTML document and serves a way to organize them.

Try It

<dt>

The <dt> tag is used to specify a term within a description or definition list.

Try It

<dd>

HTML <dd> tag plays a crucial role in Specifying a definition description within a description list .

Try It

HTML Table Tags

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

Tables in HTML are commonly used to organize and present detailed data in rows and columns. They allow users to quickly scan and understand the information.

以下是列出的表格标签：

Following are the table tags that are listed below:

Tags

Description

Examples

<table>

Specify a table within a HTML document in an organized and presentable Manner.

Try It

<caption>

Specify a table caption within a HTML document.

Try It

<th>

Specify a table heading within a HTML <table> tag .

Try It

<tr>

Specify a table row within a HTML <table>.

Try It

<td>

Specify a table cell within a HTML <table>.

Try It

<thead>

Specify a table heading within a HTML <table> and used to group header content within an HTML table.

Try It

<tbody>

Specify a table body within a HTML <table>.

Try It

<tfoot>

Specify a table footer within a HTML table and used to group footer content within an HTML table.

Try It

<col>

Specify attributes for table columns. The <col> element allows you to apply styles to entire columns.

Try It

<colgroup>

Specify groups of table columns. The <colgroup> tag must appear as a child of a <table> element.

Try It

HTML Styles and Semantics Tags

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

HTML includes list of style and semantic tags. The HTML style tag enhances it’s appearance by adding style within HTML document. And HTML semantic tags embed simplicity by defining the meaning of the content they contain.

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

Following are the Styles and Semantics tags that are listed below:

Tags

Description

Examples

<style>

HTML <style> tag defines CSS (Cascading Style Sheets) for document styling. This tags are used to define the presentation style of elements within a web page

Try It

<div>

HTML <div> tag is a fundamental building block for structuring web pages and is used to defines a division or section in an HTML document.

Try It

<span>

HTML <span> tag is an inline container for inline elements and content used to mark up a part of text or a section within a document.

Try It

<header>

Specify a header for a document or section. It is a semantic element and contain introductory content and navigational elements within a web page.

Try It

<footer>

Specify a footer for a document or section. It is a semantic element used to define the footer section of a webpage.

Try It

<main>

Specifies the main or important content in the document. There is only one <main> element in the document.

Try It

<section>

Specify a section within a document. The HTML <section> tag adds a well organized sections within a document.

Try It

<article>

Specify an article within a HTML document. It is a semantic element used to define a self-contained piece of content.

Try It

<aside>

Specifies some content loosely related to the page content. If it is removed, the remaining content still makes sense.

Try It

<details>

It is used to create a disclosure widget that contains some information, and is visible when the widget is toggled to the "open" state.

Try It

<dialog>

Specify a dialog box or window within a HTML document.

Try It

<summary>

Specify a summary, caption, or legend for a given <details>.

Try It

<data>

The HTML data tag is used to link the given piece of content with the machine-readable translation.

Try It

HTML Meta Tags

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

HTML Meta tags is used to provide structured information within a webpage and it’s content is not displayed on the web page.

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

Following are the meta-info tags that are listed below:

Tags

Description

Examples

<meta>

Specify meta data of an html document which is not displayed on the page.

Try It

<base>

Specify a base URL for all the links in a page. The <base> tag is typically placed within the <head> section of an HTML document.

Try It

HTML Programming Tags

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

HTML Programming tags are building blocks of HTML document used to define different types of content within a document.

以下是列出的编程标记：

Following are the programming tags that are listed below:

Tags

Description

Examples

<script>

Specify a script within a HTML document and used to embed client-side scripting languages.

Try It

<noscript>

Specify a noscript section within a HTML document.

Try It

<embed>

Specify a container for an external (non-HTML) application.

Try It

<object>

Specify an embedded object within a HTML document.

Try It