HTML 标签元素分组介绍

最新推荐文章于 2024-07-15 22:07:44 发布

Jay·Yuen

最新推荐文章于 2024-07-15 22:07:44 发布

阅读量215

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/Yuanriver/article/details/132971329

版权

theme: fancy

本文转载MDN HTML元素参考

主根元素

`html`

HTML <html> 元素 表示一个 HTML 文档的根(顶级元素)，所以它也被称为根元素。所有其他元素必须是此元素的后代。
示例 html <!DOCTYPE html> <html lang="zh"> <head>...</head> <body>...</body> </html>

文档元素据

`base`

HTML <base> 元素 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。
示例 html <base href="http://www.example.com/"> <base target="_blank"> <base target="_top" href="http://www.example.com/">

head
HTML <head> 元素 规定文档相关的配置信息(元数据)，包括文档的标题，引用的文档样式和脚本等。
示例 html <html> <head> <title>文档标题</title> </head> </html>

link
HTML <link> 外部资源链接元素 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标和移动设备上用以显示在主屏幕的图标) 。
示例 ```html // 引入一个css文件 href="style.css" rel="stylesheet">

// 提供可替换的样式表 href="default.css" rel="stylesheet" title="Default Style"> href="fancy.css" rel="alternate stylesheet" title="Fancy"> href="basic.css" rel="alternate stylesheet" title="Basic">

// 提供用于不同用法上下文的图标 rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> rel="apple-touch-icon-precomposed" href="favicon57.png"> rel="icon" href="favicon32.png">

// 通过媒体查询有条件地加载资源 href="print.css" rel="stylesheet" media="print"> href="mobile.css" rel="stylesheet" media="all"> href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

// 样式表加载事件

rel="stylesheet" href="mystylesheet.css" οnlοad="sheetLoaded()" οnerrοr="sheetError()"> ```

`meta`

HTML <meta> 元素 表示那些不能由其它 HTML 元相关元素(base、link, script、style 或 title)之一表示的任何Metadata信息。
示例 ```html

```

`style`

HTML <style> 元素 包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是 CSS 的格式。
示例 ```html

一个简单的样式表

html

多种样式元素

html

包含媒体选择

```

title
HTML <title> 元素 定义文档的标题，显示在Browser的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。
示例 html // 建立一个页面，其标题(如显示在窗口顶部或在窗口的选项卡中)为 “Amazing！” <title>Amazing！</title>

分区根元素

`body`

HTML body 元素 表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。
示例 html <!doctype html> <html> <head> <title>文档标题</title> </head> <body> <p>这是一个段落</p> </body> </html>

内容分区

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。

`address`

HTML <address> 元素 表示其中的 HTML 提供了某个人或某个组织(等等)的联系信息。
示例代码片段

article
HTML <article> 元素 表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
示例代码片段

aside
HTML <aside> 元素 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框(call-out boxes)。
示例代码片段

footer
HTML <footer> 元素 表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
示例代码片段

header
HTML <header> 元素 用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
示例 ```html // 页面的 Header

主页标题

// 文章的 Header

地球

简·史密斯于2017年10月4日周三发布

我们生活在一个蓝色和绿色的星球上，还有很多看不到的东西。

继续阅读....

```

`h1`,`h2`,`h3`,`h4`,`h5`,`h6`

HTML <h1>–<h6> 元素 呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
示例 ```html

一级

二级

三级

四级

五级

六级

```

`main`

HTML <main> 元素 呈现了文档的 body 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
示例 ```html

Gecko facts

Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.

<p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>

```

`nav`

HTML <nav> 元素 表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
示例代码片段

section
HTML <section> 元素 表示一个包含在 HTML 文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
示例 ```html

选择一个苹果

介绍

本文档提供了一个指南，帮助您选择正确的苹果产品。

标准

选择苹果有许多不同的标准要考虑——大小、颜色、紧实度、甜度、酸味...

```

文本内容

使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。

`blockquote`

HTML <blockquote> 元素(或者 HTML 块级引用元素)，代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 cite 元素。
示例代码片段

dl
HTML <dl> 元素 (或 HTML 描述列表元素)是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。
示例 ```html

火狐

由Mozilla公司和数百名志愿者共同开发的免费、开源、跨平台、图形化网络浏览器。

火狐 Mozilla Firefox Fx

由Mozilla公司和数百名志愿者共同开发的免费、开源、跨平台、图形化网络浏览器。

Firefox

由Mozilla公司和数百名志愿者共同开发的免费、开源、跨平台、图形化网络浏览器。

小熊猫也被称为小熊猫，Wah，熊猫或Firefox，是一种主要食草哺乳动物，比家猫略大(60厘米长)。

```

`dd`

HTML <dd> 元素(HTML 描述元素)用来指明一个描述列表 (dl) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 dt 元素。
示例 html 请参考 <dl> 页面以查看 <dd> 的示例

dt
HTML <dt> 元素 (或 HTML 术语定义元素)用于在一个定义列表中声明一个术语。该元素仅能作为 dl 的子元素出现。通常在该元素后面会跟着 dd 元素，然而，多个连续出现的 <dt> 元素都将由出现在它们后面的第一个 dd 元素定义。
示例 html 请参考 <dl> 页面以查看 <dt> 的示例

div
HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
示例代码片段

figure
HTML <figure> 元素 代表一段独立的内容，经常与说明(caption)figcaption 配合使用，并且作为一个独立的引用单元。当它属于主内容流(main flow)时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
示例代码片段

figcaption
HTML <figcaption> 元素 是与其相关联的图片的说明/标题，用？于描述其父节点 figure 元素里的其他数据。这意味着 <figcaption> 在figure 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。
示例代码片段

hr
HTML <hr> 元素 表示段落级元素之间的主题转换(例如，一个故事中的场景的改变，或一个章节的主题的改变)。
示例 ```html

这是文章的第一段。这是文章的第一段。这是文章的第一段。这是文章的第一段。

这是文章的第二段。这是文章的第二段。这是文章的第二段。这是文章的第二段。

```

`p`

HTML <p> 元素(或者说 HTML 段落元素)表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
示例 ```html

这是第一个段落。这是第一个段落。元素的 align 属性已被弃用，请不要使用。

这是第二个段落。这是第二个段落。元素的 align 属性已被弃用，请不要使用。

```

`pre`

HTML <pre> 元素 表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符(比如空格和换行符)都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
示例 ```html


  ___________________________
< 我是这个领域的专家。 >
  ---------------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||

一头牛说:“我是这个领域的专家。”奶牛使用预先格式化的文本字符进行说明。

```

`ul`

HTML <ul> 元素(或称 HTML 无序列表元素)表示一个内可含多个元素的无序列表或项目符号列表。
示例 ```html // 简单的例子

第一项
第二项
第三项

// 嵌套列表

第一项
第二项
- 第二项的第一个子项目
- 第二个项的第二个子项目
  - 第二项，第二分项，第一分项
  - 第二个项目，第二个分项，第二个分项
  - 第二项，第二分项，第三分项
- 第二项的第三子项目
第三项

// 嵌套

第一项
第二项
1. 第二项第一个子项目
2. 第二项第二个子项目
3. 第二项第三个子项目
第三项

```

`ol`

HTML <ol> 元素 表示有序列表，通常渲染为一个带编号的列表。
示例 ```html // 简单示例

// 使用小写罗马数字编号

介绍
列表
结论

// 使用start属性

选手的终点位置不在获胜者的圈子里:

Speedwalk Stu
Saunterin’ Sam
Slowpoke Rodriguez

// 嵌套列表

第一项
第二项
1. 第二项第一个子项目
2. 第二项第二个子项目
3. 第二项第三个子项目
第三项

// 嵌套有序列表和无序列表

第一项
第二项
- 第二项第一个子项目
- 第二项第二个子项目
- 第二项第三个子项目
第三项

```

`li`

HTML <li> 元素 (或称 HTML 列表条目元素) 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 (ol)，一个无序列表 (ul)，或者一个菜单 (menu)。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。
示例 ```html

third item
fourth item
fifth item

```

内联文本语义

使用 HTML 内联文本语义(Inline text semantics)定义一个单词、一行内容，或任意文字的语义、结构或样式。

`a`

HTML <a> 元素(或称锚元素)可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。
示例 html  <a href="https://juejin.cn/"> 外部链接 </a> <br />  <a href="#属性"> 对同页链接的描述 </a> <br />  <a href="https://juejin.cn/"> <img src=" https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg" alt="稀土掘金" /> </a> <br />  <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> <br />  <a href="tel:+400400400">+40 040 0400</a>

abbr
HTML <abbr> 缩写元素 用于代表缩写，并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性，则它必须且仅可包含完整的描述内容。
示例 ```html

HTML 是一种标记语言，用于创建网页的语义和结构。

A Specification (spec) 是一种文档，详细地概述了一项技术或API如何工作以及如何访问它。

```

`b`

HTML <b> 元素 用于吸引读者的注意到该元素的内容上(如果没有另加特别强调)。这个元素过去被认为是粗体(Boldface)元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b> 元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。
示例 ```html

This article describes several text-level elements. It explains their usage in an HTML document.

Keywords are displayed with the default style of the element, likely in bold. ```

`bdi`

HTML <bdi> 元素 告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。
示例代码片段

bdo
HTML <bdo> 元素 改写了文本的方向性，使文本以不同的方向渲染呈现出来
示例代码片段

br
HTML <br> 元素 在文本中生成一个换行(回车)符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。
示例 html Mozilla Foundation<br>1981 Landings Drive<br>Building K<br>Mountain View, CA 94043-0801<br>USA

code
HTML <code> 元素 呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。
示例 ```html

Regular text. This is code. Regular text.

```

`data`

HTML <data> 元素 将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 time。
示例代码片段

em
HTML <em> 元素 标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
示例 ```html

In HTML 5, what was previously called block-level content is now called flow content.

```

`kbd`

HTML <kbd> 键盘元素 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。
示例 ```html

Type the following in the Run dialog: cmd
Then click the OK button.

Save the document by pressing Ctrl + S

```

`mark`

HTML <Mark> 标记文本元素 表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。
示例 ```html

<mark> 元素用于高亮文本

```

`q`

HTML <q> 引用标签 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 blockquote 替代。
示例 ```html

每次Kenny被杀，斯坦都会宣布：天哪，他们杀了Kenny! .

```

`ruby`

HTML <ruby> 元素 被用来展示东亚文字注音或字符注释。
示例 ```html 汉 (han) 字 (zi)

明日 (ming ri) ```

`rp`

HTML <rp> 元素 用于为那些不能使用 ruby 元素展示 ruby 注解的浏览器，提供随后的圆括号。
示例 html <ruby> 漢 <rp>(</rp><rt>han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp> </ruby>

rt
HTML Ruby 文本 (<rt>) 元素 包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在 ruby 元素中使用。
示例 html <ruby> 汉 <rt>hàn</rt> 字 <rt>zì</rt> </ruby>

span
HTML <span> 元素 是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用类或者 Id 属性)，或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 div 元素很相似，但 div 是一个块元素而 <span> 则是行内元素。
示例代码片段

strong
Strong <strong> 元素 表示文本十分重要，一般用粗体显示。
示例 ```html

When doing x it is imperative to do y before proceeding.

```

`sub`

HTML <sub> 元素 定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。
示例 ```html

水的化学式: H₂O

```

`sup`

HTML <sup> 元素 定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。
示例 ```html

This text is ^{superscripted}

```

图片和多媒体

`area`

HTML <area> 元素 在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。
示例 html <map name="primary"> <area shape="circle" coords="200,250,25" href="another.htm" /> <area shape="default" nohref /> </map>

audio
HTML <audio> 元素 用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者source 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
示例 html // 基本用法 <audio src="AudioTest.ogg" autoplay> 您的浏览器不支持音频元素。 </audio> // <audio> 元素与 <source> 元素 <audio controls> <source src="foo.wav" type="audio/wav"> 您的浏览器不支持音频元素。 </audio> // <audio> 元素与多个 <source> 元素 <audio controls> <source src="foo.opus" type="audio/ogg; codecs=opus"/> <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> <source src="foo.mp3" type="audio/mpeg"/> </audio>

img
HTML <img> 元素 将一份图像嵌入文档。
示例 html // 备用文字 <img src="favicon144.png" alt="MDN logo"> // 图像链接 <a href="https://developer.mozilla.org"> <img src="favicon144.png" alt="Visit the MDN site"> </a> // 使用srcset属性 <img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x"> // 使用srcset和sizes属性 <img src="clock-demo-200px.png" alt="Clock" srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w" sizes="(max-width: 600px) 200px, 50vw">

track
HTML <track> 元素 被当作媒体元素—audio 和 video的子元素来使用。它允许指定时序文本字幕(或者基于时间的数据)，例如自动处理字幕。字幕格式有 WebVTT 格式(.vtt格式文件)— Web 视频文本字幕格式，以及指时序文本标记语言(TTML)格式。
示例 html <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="sampleCaptions.vtt" srclang="en"> <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en"> <track kind="chapters" src="sampleChapters.vtt" srclang="en"> <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"> <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"> <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"> <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"> <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1"> <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2"> <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3">  ... </video>

video
HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 audio 元素可能在用户体验上更合适。
示例 ```html

表格内容

`caption`

HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为 table 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。
示例 html 请查看<table>页面获得<caption>的例子

col
HTML <col> 元素 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于colgroup元素内。
示例 html 详见<table>页面<col>标签的示例

colgroup
HTML 中的表格列组(Column Group <colgroup> )标签用来定义表中的一组列表。
示例 html 请参考 <table> 页面以查看 <colgroup> 的示例

table
HTML table 元素 表示表格数据 — 即通过二维数据表表示的信息。
示例 ```html

Simple table with header

First name	Last name
John	Doe
Jane	Doe

Table with thead, tfoot, and tbody

Header content 1	Header content 2
Footer content 1	Footer content 2
Body content 1	Body content 2

Table with colgroup

Countries	Capitals	Population	Language
USA	Washington D.C.	309 million	English
Sweden	Stockholm	9 million	Swedish

Table with colgroup and col

Lime	Lemon	Orange
Green	Yellow	Orange

Simple table with caption

Awesome caption
Awesome data

```

`tbody`

HTML <tbody> 元素 封装了一组表行(<tr>元素)，指示它们构成表的正文(<table>)。
示例 ```html

Council budget (in £) 2018
Items	Expenditure
Donuts	3,000
Stationery	18,000

```

`td`

HTML <td> 元素 定义了一个包含数据的表格单元格。
示例 html 请在 <table> 上查看 <td> 的例子

tfoot
HTML <tfoot> 元素 定义了一组表格中各列的汇总行。
示例 html 请查看<table>页面中<tfoot>的相关示例

th
HTML <th> 元素 定义表格内的表头单元格。这部分特征是由 scope and headers 属性准确定义的。
示例 html 参考 <table> 中 <th>的示例内容

thead
HTML <thead> 元素 定义了一组定义表格的列头的行。
示例 html 参考 <table> 中 <thead>的示例内容

tr
HTML <tr> 元素 定义表格中的行。同一行可同时出现td 和th 元素。
示例 html 参考 <table> 中 <thead>的示例内容

表单

`button`

HTML <button> 元素 表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML 按钮的显示样式接近于 user agent 所在的宿主系统平台(用户操作系统)的按钮，但你可以使用 CSS来改变按钮的样貌。
示例 html <button name="button">Click me</button>

datalist
HTML <datalist> 元素 包含了一组option元素，这些元素表示其它表单控件可选值。
示例 html <label>从这个列表中选择一个浏览器: <input list="browsers" name="myBrowser" /></label> <datalist id="browsers"> <option value="gu"> <option value="Firefox"> <option value="Edge"> <option value="Opera"> <option value="Safari"> </datalist>

fieldset
HTML <fieldset> 元素 用于对表单中的控制元素进行分组(也包括 label 元素)。
示例 ```html // 简单的fieldset

// 禁用fieldset

```

`form`

HTML <form> 元素 表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
示例 ```html

```

`input`

HTML <input> 元素 用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。
示例 ```html

This is the first checkbox

This is the second checkbox, which is checked

// 不支持 “电子邮件” 类型的浏览器可以回退为标准的 “文本” 输入。

Select a maintenance drone:

Huey

Dewey

Louie

//不支持 "tel" 类型的浏览器会默认使用 "text" 类型输入。 ```

`label`

HTML <label> 元素(标签) 表示用户界面中某个元素的说明。
示例 html // 简单的label <label>Click me <input type="text"></label> // 使用for属性 <label for="username">Click me</label> <input type="text" id="username">

legend
HTML <legend> 元素 用于表示其父元素 fieldset 的内容标题。
示例 html 在 <form> 中查看关于 <legend> 元素的示例

meter
HTML <meter> 元素 用来显示已知范围的标量值或者分数值。
示例 ```html // 简单例子

Heat the oven to 350 degrees.

// 高低值区间示例

He got a B on the exam.

```

`optgroup`

HTML <optgroup> 元素 为select 元素中的选项创建分组。
示例 html <select> <optgroup label="Group 1"> <option>Option 1.1</option> </optgroup> <optgroup label="Group 2"> <option>Option 2.1</option> <option>Option 2.2</option> </optgroup> <optgroup label="Group 3" disabled> <option>Option 3.1</option> <option>Option 3.2</option> <option>Option 3.3</option> </optgroup> </select>

option
HTML <option> 元素 用于定义在 select, optgroup 或 datalist 元素中包含的项。<option> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。
示例 html 参见 <select> 示例

output
HTML <output> 标签 表示计算或用户操作的结果。
示例 ```html

```

`progress`

HTML <progress> 元素 用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。
示例 html <progress value="70" max="100">70 %</progress>

select
HTML <select> 元素 表示一个提供选项菜单的控件。
示例 html // 基本选择  <select name="select"> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option> </select> // 使用多选的进阶选择 <label>Please choose one or more pets: <select name="pets" multiple size="4"> <optgroup label="4-legged pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster" disabled>Hamster</option> </optgroup> <optgroup label="Flying pets"> <option value="parrot">Parrot</option> <option value="macaw">Macaw</option> <option value="albatross">Albatross</option> </optgroup> </select> </label>

textarea
HTML <textarea> 元素 表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。
示例 html // 基本示例 <textarea name="textarea" rows="10" cols="50">Write something here</textarea> // 最小和最大长度 <textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="60">Write</textarea> // 占位符 <textarea name="textarea" rows="5" cols="30" placeholder="Comment text."></textarea>