前言

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

一、HTML 所有标签的作用

1. 文档结构标签

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

2. 元数据标签

暂无补充

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

暂无补充

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

• <b>: 粗体文本。
• <u>: 定义对文本的非文本样式装饰的线（通常是下划线）。与 <ins> 和 <del> 不同，<u> 不表示文档内容的特定变化。
• <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使用。
• <wbr>: 定义单词内可选的换行位置。它对于长单词或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.文本内容(格式)标签

• <b> - 粗体文本

    <p>This text is <b>bold</b>.</p>
  

• <u> - 定义对文本的非文本样式装饰的线（通常是下划线）。与 <ins> 和 <del> 不同，<u> 不表示文档内容的特定变化。

    <p>这段文本包含 <u>下划线</u> 文本。</p>
  

• <bdi> - 隔离一段文本，使其不受周围文本方向的影响

    <p>This text contains a number: <bdi>123,456</bdi>.</p>
  

• <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 属性提供一个机器可读的日期/时间格式。

    <p>我在 <time datetime="2023-04-01">2023年4月1日</time> 参加了一个会议。</p>
  

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> - 定义已知范围内的标量测量或分数值

    <p>任务完成度：<meter value="7" min="0" max="10">70%</meter></p>
  

  在这个示例中，<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>
  

• <wbr> - 表示在单词内部推荐的换行位置。它对于长单词或URL在较小屏幕上的显示很有用。

    <p>这是一个非常长的单词verylongword<wbr>locations.</p>
  

  （注意：<wbr> 标签的效果取决于浏览器的实现和上下文，有时可能不太明显。）

附

• <i> - 在HTML5中，<i>标签不仅仅用于表示斜体样式，还可以用来表示文本中的某种特殊风格、语气或者其他非文本样式的语义含义，如外文单词、生物分类、科技术语等。但需要注意的是，从纯语义化的角度来看，当你想表达强调或重要性时，应该使用<em>或<strong>标签。

  • 作为样式标签（斜体文本）

    <p>这是一段普通的文本，而<i>这段文本将以斜体显示</i>。</p>
    

    其中，<i>标签被用来将一部分文本以斜体样式呈现。

  • 作为语义标签（非斜体样式，但表达特定语义）

    虽然<i>标签在HTML5中被赋予了更多的语义含义，但实际的视觉表现（是否斜体）还是取决于CSS。不过，我们可以从语义化的角度来考虑它的使用：

    <p>请注意，<i>这里提到的技术术语</i>可能对于初学者来说不太熟悉。</p>
    

    其中，<i>标签被用来表示一段文本是技术术语，而不仅仅是改变它的样式。然而，如果你想要明确这个术语的语义（比如它是一门编程语言的名字），你可能会结合使用<i>标签和class属性来进一步说明：

    <p>请注意，<i class="tech-term">这里提到的技术术语</i>可能对于初学者来说不太熟悉。</p>
    

    然后，在CSS中，你可以为这个类添加样式（虽然在这个上下文中，样式可能不是必需的，但你可以用它来强调术语，比如改变颜色或添加背景）：

    .tech-term {
           
        /* 你可以在这里添加样式，但在这个例子中，我们主要关注语义 */
    }
    

    然而，值得注意的是，对于技术术语或其他需要特殊表示的文本，HTML5引入了<mark>、<small>、<dfn>等更具体的标签，这些标签提供了更明确的语义含义。因此，在实际开发中，建议根据文本的具体含义来选择合适的标签。对于<i>标签，它仍然可以用于表示斜体文本或具有特定风格、语气的文本，但在追求语义化的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）和开发开放网络应用等。