HTML所有标签的用法及示例（二）_html的标签及其用法。-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45914609/article/details/142400577

前言

了解HTML所有标签的用法，并列出基础示例。
（主要对上一篇内容进行补充）

一、HTML 所有标签的作用

1. 文档结构标签

<address>: 用于定义文档或文章的作者/所有者的联系信息。
<dl>, <dt>, <dd>: 定义描述列表及其术语和描述。
<dialog>: 定义对话框或窗口（注意：HTML5中，但并非所有浏览器都支持其作为独立元素）。
<figure>, <figcaption>: 用于对图片、图表、照片、代码等进行分组并添加标题。

2. 元数据标签

暂无补充

3. 内容分区(语义化)标签

暂无补充

4. 文本内容(格式)标签

: 粗体文本。
: 定义对文本的非文本样式装饰的线（通常是下划线）。与 <ins> 和 <del> 不同， 不表示文档内容的特定变化。
<bdi>: 隔离一段文本的方向性，使其不受周围文本方向的影响。
<bdo>: 覆盖默认的文本方向。

5. 内联文本语义标签

<abbr>: 定义缩写词。
<cite>: 定义引用作品的标题。
<code>:定义计算机代码文本。
<dfn>: 定义术语。
<kbd>: 定义键盘输入。
<q>: 定义短引用。
<samp>: 定义计算机程序的样本输出。
<var>: 定义变量。
<time>:定义日期/时间。

6. 多媒体标签

<canvas>: 定义图形（如通过JavaScript绘制的图表或游戏）。
<picture>: 允许定义图片的多个源，以便根据不同屏幕条件选择最适合的图片（尽管不是所有浏览器都支持）。

7. 嵌入内容标签

	暂无补充

8. 表格标签

<col>, <colgroup>: 定义表格中的列或列组。

9. 表单标签

<datalist>: 定义输入字段的预定义选项列表。
<meter>: 定义已知范围内的标量测量或分数值（虽然与表单相关，但更常用于显示数据）。
<optgroup>: 定义下拉列表中的选项组。
<output>: 定义不同类型的输出，比如脚本的输出。
<progress>: 定义任务的进度（同样，虽然常用于表单提交进度，但不限于此）。

10. 脚本标签

	暂无补充

11. 其他标签

<area>: 定义图像映射内部的区域（通常与<map>一起使用）。
<map>: 定义图像映射（一组可点击的区域）。
<menu>: HTML5 中已重新定义，主要用于上下文菜单或工具栏（非导航菜单）。
<ruby>, <rp>, <rt>: 主要用于东亚文字的注音或注释。
<slot>: 属于Web Components技术中的一部分，用于在Shadow DOM中创建插槽，以便外部HTML可以插入到组件的特定位置。
<template>: 定义客户端内容的隐藏部分，这些内容在加载页面时不会被显示或执行，但可以在后续被JavaScript使用。
: 定义单词内可选的换行位置。它对于长单词或URL在较小屏幕上的显示很有用。

二、HTML 所有标签的具体使用示例

1.文档结构标签

<address> - 定义文档或文章的作者/拥有者的联系信息

<address>
  Written by <a href="mailto:webmaster@example.com">Webmaster</a>.<br>
  Visit us at:<br>
  Example.com<br>
  Box 564, Disneyland<br>
  USA
</address>

<dl> - 定义描述列表
<dt> - 定义描述列表中的术语/名称

<dd> - 定义描述列表中的描述

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

（注意：<dl>，<dt>，<dd> 均在示例中展示）

<dialog> - 定义对话框或窗口

<dialog open>
  <p>This is a dialog window.</p>
  <button id="close">Close</button>
</dialog>

<script>
  document.getElementById('close').onclick = function() {
    document.querySelector('dialog').close();
  };
</script>

<figure> - 定义一段独立的流内容，如图表、照片、代码等

<figcaption> - 定义 <figure> 元素的标题

<figure>
  <img src="image.jpg" alt="描述性文本">
  <figcaption>这里是图像的标题</figcaption>
</figure>

（注意：<figure>，<figcaption> 均在示例中展示）

2.元数据标签

	暂无补充

3.内容分区(语义化)标签

	暂无补充

4.文本内容(格式)标签

 - 粗体文本
```
This text is bold.
```
 - 定义对文本的非文本样式装饰的线（通常是下划线）。与 <ins> 和 <del> 不同， 不表示文档内容的特定变化。
```
这段文本包含 下划线 文本。
```
<bdi> - 隔离一段文本，使其不受周围文本方向的影响
```
This text contains a number: <bdi>123,456</bdi>.
```

<bdo> - 覆盖默认的文本方向

<p><bdo dir="rtl">This text will be written from right to left.</bdo></p>

5.内联文本语义标签

<abbr> - 定义缩写

<p>The <abbr title="HyperText Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>

<cite> - 定义引用

<p>The book <cite>Great Expectations</cite> was written by Charles Dickens.</p>

<code>:定义计算机代码文本

<p>To use HTML, you need to know <code>HTML</code> tags.</p>

<dfn> - 定义术语

<p>The <dfn>HTML</dfn> specification is maintained by the <dfn>W3C</dfn>.</p>

<kbd> - 定义键盘输入

要打开帮助窗口，请按 <kbd>F1</kbd> 键。

<q> - 定义短的引用

<p>他说：<q>这是一个引用。</q> 很有用。</p>

<samp> - 定义计算机代码的输出样本

<p>以下是一个命令行样本：</p>
<samp>mkdir documents</samp>

<var> - 定义数学变量或编程中的变量。

<p>如果变量 <var>x</var> 等于 5，那么 <var>x</var> + 2 = 7。</p>

<time> - 定义日期/时间。它可以通过 datetime 属性提供一个机器可读的日期/时间格式。
```
我在 <time datetime="2023-04-01">2023年4月1日</time> 参加了一个会议。
```

6.多媒体标签

<canvas> - 用来通过JavaScript和HTML的<canvas>元素来绘制图形

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<picture> - 定义图片容器，允许你指定多个 <source> 元素来提供图片的不同版本

<picture>
  <source media="(min-width: 650px)" srcset="large.jpg">
  <source media="(min-width: 465px)" srcset="medium.jpg">
  <img src="small.jpg" alt="描述性文本">
</picture>

7.嵌入内容标签

	暂无补充

8. 表格标签

<col> 和 <colgroup> - 表格中的列或列组

  <colgroup>
    <col span="2" style="background-color:yellow">
  </colgroup>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
</table>

（注意：<col> 示例嵌入在 <colgroup> 中）

9.表单标签

<datalist> - 定义输入字段的预定义选项列表

<label for="browser">Choose a browser from this list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

<meter> - 定义已知范围内的标量测量或分数值
```
任务完成度：<meter value="7" min="0" max="10">70%</meter>
```
在这个示例中，<meter> 元素显示了一个从0到10的范围内，当前值为7的进度。虽然元素内部可以包含文本（如上例中的"70%"），但这主要是为了向后兼容和提供额外的信息；<meter>的显示主要由其value、min和max属性控制。

<optgroup> - 定义下拉列表中的选项组

<select name="cars" id="cars">
  <optgroup label="德国车">
    <option value="mercedes">梅赛德斯</option>
    <option value="audi">奥迪</option>
  </optgroup>
  <optgroup label="日本车">
    <option value="toyota">丰田</option>
    <option value="honda">本田</option>
  </optgroup>
</select>

<output> - 定义不同类型的输出，比如脚本的输出

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="50"> +
  <input type="number" id="b" value="50"> =
  <output name="x" for="a b"></output>
</form>

<progress> - 表示任务的进度

<p>下载进度：<progress value="22" max="100"></progress></p>

10.脚本标签

	暂无补充

11.其他标签

<area> - 定义图像映射内的区域（常与<map>一起使用）

<img src="image.png" usemap="#image-map">
<map name="image-map">
  <area shape="rect" coords="34,44,270,350" href="example.html" alt="Example">
</map>

<map> - 定义图像映射（图像上的可点击区域）

<img src="image.png" usemap="#image-map" alt="图像映射示例">
<map name="image-map">
  <area shape="rect" coords="34,44,270,350" href="example.html" alt="区域 1">
  <area shape="circle" coords="100,150,50" href="another.html" alt="区域 2">
</map>

<menu> - HTML5 中已重新定义，主要用于上下文菜单或工具栏（非导航菜单）

注意：<menu>标签在HTML5中的用途与HTML4中的用途有所不同，且其作为上下文菜单或工具栏的用途并未被所有浏览器广泛支持。以下是一个尝试展示其用途的示例，但实际效果可能因浏览器而异：

	<menu type="context" id="myMenu">
	  <menuitem type="command" label="复制" onclick="copyFunction()">
	  <menuitem type="command" label="粘贴" onclick="pasteFunction()">
	</menu>
	
	<script>
	  // 注意：这些函数仅作为占位符，实际实现需要更多代码
	  function copyFunction() {
	    // 复制逻辑
	  }
	
	  function pasteFunction() {
	    // 粘贴逻辑
	  }
	</script>

（注意：这个<menu>示例可能不会在大多数浏览器中按预期工作）

<ruby> - 用于定义东亚文字（如中文、日文和韩文）的注音或注释。它常与 <rp>, <rt>, 和 <rtc> 标签一起使用。
<rp> - 定义不支持ruby注释的浏览器如何显示ruby注释的容器
<rt> - 定义ruby注释的文本
```
<ruby>
 汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
</ruby>
```
（注意：<ruby>，<rp>，<rt>标签均在示例中展示。<ruby>, <rp>, <rt> 等标签主要用于东亚文字的注音或注释，其中，<rp>在ruby注释（东亚文字注音或注释）的上下文中使用，对于不支持ruby注释的浏览器，<rp> 标签内的内容会作为回退显示。）

<slot> - 属于Web Components技术中的一部分，用于在Shadow DOM中创建插槽，以便外部HTML可以插入到组件的特定位置。

<!-- 假设有一个自定义元素 -->
<my-component>
  <p slot="header">这是头部内容</p>
  <p>这是默认内容</p>
</my-component>

<!-- 自定义元素的Shadow DOM模板 -->
<template id="my-component-template">
  <slot name="header"></slot>
  <p>这是不会被子元素覆盖的内容。</p>
</template>

<!-- 注意：这里需要JavaScript来将模板附加到自定义元素上，并处理slot -->

<template> - 用于定义客户端内容的隐藏部分，这些内容在加载页面时不会被显示或执行，但可以在后续被JavaScript使用。

<template id="hiddenContent">
  <p>这是隐藏的内容，可以通过JavaScript动态插入到DOM中。</p>
</template>

<script>
  // 示例：将模板内容插入到页面
  const template = document.getElementById('hiddenContent');
  document.body.appendChild(template.content.cloneNode(true));
</script>

 - 表示在单词内部推荐的换行位置。它对于长单词或URL在较小屏幕上的显示很有用。
```
这是一个非常长的单词exampleverylongwordthatneedstobebrokenupatappropriatelocations.
```
（注意： 标签的效果取决于浏览器的实现和上下文，有时可能不太明显。）

附

 - 在HTML5中，标签不仅仅用于表示斜体样式，还可以用来表示文本中的某种特殊风格、语气或者其他非文本样式的语义含义，如外文单词、生物分类、科技术语等。但需要注意的是，从纯语义化的角度来看，当你想表达强调或重要性时，应该使用或标签。
- 作为样式标签（斜体文本）
```
这是一段普通的文本，而这段文本将以斜体显示。
```
 其中，标签被用来将一部分文本以斜体样式呈现。
- 作为语义标签（非斜体样式，但表达特定语义）
 
 虽然标签在HTML5中被赋予了更多的语义含义，但实际的视觉表现（是否斜体）还是取决于CSS。不过，我们可以从语义化的角度来考虑它的使用：
```
请注意，这里提到的技术术语可能对于初学者来说不太熟悉。
```
 其中，标签被用来表示一段文本是技术术语，而不仅仅是改变它的样式。然而，如果你想要明确这个术语的语义（比如它是一门编程语言的名字），你可能会结合使用标签和class属性来进一步说明：
```
请注意，这里提到的技术术语可能对于初学者来说不太熟悉。
```
 然后，在CSS中，你可以为这个类添加样式（虽然在这个上下文中，样式可能不是必需的，但你可以用它来强调术语，比如改变颜色或添加背景）：
```
.tech-term {
 /* 你可以在这里添加样式，但在这个例子中，我们主要关注语义 */
}
```
 然而，值得注意的是，对于技术术语或其他需要特殊表示的文本，HTML5引入了、、<dfn>等更具体的标签，这些标签提供了更明确的语义含义。因此，在实际开发中，建议根据文本的具体含义来选择合适的标签。对于标签，它仍然可以用于表示斜体文本或具有特定风格、语气的文本，但在追求语义化的HTML时，请考虑是否有更合适的标签可供选择。

PS：

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

MDN Web Docs（全称Mozilla Developer Network，谋智开发者网络），提供了关于Web技术、开放网络应用和Web标准的详细、权威、可靠的文档，可以深入学习Web技术以及能够驱动Web的软件，包括网络标准（例如CSS、HTML和JavaScript）和开发开放网络应用等。