其他 HTML 元素

在之前的活动中，您学习了以下内容：

  • HTML 标记和元素的基础知识。
  • 如何构建网页。
  • 语义 HTML 和最佳做法。

通过本文，您将继续掌握 HTML 知识，并介绍更多 HTML 元素。

文本内容元素

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

这些元素支持创建文本内容，并能添加结构、样式和含义。有多个文字内容可包含以下元素。

blockquote 元素

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

以下示例展示了如何使用 <blockquote> 元素，其中展示了圣雄甘地的名句。那里有许多能令人难忘的内容和意义的精彩引言。想想你最喜欢的一些励志人物及其格言。

在使用引号和引用来自某个来源的信息时，请使用 <blockquote> 元素。<blockquote> 元素会在演示文稿中创建独特的缩进和对齐方式，并同时使用起始标记和结束标记。在使用包含多行文本的较长引号时，<blockquote> 尤其有用。

您还可以在 <blockquote> 元素中使用各种元素，例如标题、段落或列表。

<details> 元素

<details>
   <summary>Details</summary>
   Additional Information
</details>

通常，网页上会包含常见问题解答部分以及可供用户查看的其他信息。其中有一些常见的常见问题解答部分针对产品信息、旅行行程或任何类型的问答场景都很常见。

<details> 元素通过使用披露的 widget 来很有帮助，其中包含额外的信息。该元素包含内置的切换开关功能，用户可以打开和关闭切换开关。当此切换开关打开时，额外的信息内容将会展开并可供用户阅读。当切换开关关闭时，额外的信息内容将对用户隐藏。如需为 <details> widget 本身命名，请使用 <summary> 元素。

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

这是实际应用中的 <figure> 元素。在这里，您可以看到与 <figcaption> 元素搭配使用的 <figure> 可用于增强视觉体验。

您随时都能看到网络上的图片，以及其他实用的可视化数据。视觉元素有助于吸引访问者的注意力，并打造出色的用户体验。<figure> 元素是为图片、表格、图表等添加标签的方式。它的工作原理是创建与主要内容相关的独立内容。

<time> 元素

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

<time> 元素同时提供了含义和语义含义，有助于实现更好的功能，实现更好的功能，例如在线安排预约、发布博文的日期和时间等。可以使用 <time> 元素的一些网站示例包括使用 Google 日历、在平台上发布某篇文章，或从图书馆网站阅读在线历史档案。

<time> 元素引用时间，可以表示 24 小时制的时间或可针对时区和位置进行调整的特定日期。此元素同时需要起始标记和结束标记 <time> 和 </time>。您可以添加 datetime 属性，以便系统能以机器可读的格式读取日期。

文档元数据

<title>Sarah's Favorite Food Recipes</title>

每次输入网站网址时，浏览器栏或网页标签页中都会有一个 <title> 名称。这是您看到的网页标题名称。此元素非常重要，搜索引擎会使用它来在搜索结果中显示相关网页的列表。标题的长度可以采用较短的描述性内容，也可以采用较长的描述性内容。

情形：您想要创建某个网页，但不记得具体的网站网址。在搜索引擎中输入关键字。搜索引擎会帮助您跟踪要查找的网页，并且您可以查看搜索结果中显示的 <title> 名称。

嵌入式内容元素

除了文字内容之外，还有许多其他内容元素可供使用。

<iframe> 元素

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

在线购买商品并点击付款方式（例如 PayPal 或 Apple Pay）时，系统通常会将这些功能添加到带有 <iframe> 的网页中。另一种常见的体验是在线查看地图以搜索本地商家。您可以使用 iframe 在网页上添加这些类型的用户体验。在上面的示例中，您会在 iframe 中看到标题为“Wikipedia”的维基百科网址。

借助 <iframe> 元素，您可以插入其他来源的内容，并在网页中嵌入框架。它会创建一个矩形框架并在浏览器中显示内容。框架允许在 <iframe> 元素内呈现窗口形状的布局。该功能可以有效地向您的网页添加内容，从而改善用户体验。

表单元素

<progress max="100" value="30"> 30% </progress>

在观看较长的视频、讲座或填写内容较多的申请时，提供可视进度条有助于跟踪您的进度。<progress> 元素适用于这些类型的场景。

此元素被描述为具有背景颜色的视觉条。可视栏的大小和背景颜色均可有所不同。对于进度条，您可以选择使用 max 和 value 属性。max 属性用于设置浮点数，value 属性用于记录任务的进度。

设计脚本

<canvas id="canvas"></canvas>

为了能够实时绘制图形和动画，请使用 <canvas> 元素。将 <canvas> 元素放入 HTML 网页中，以创建画布。该元素需要使用 JavaScript 代码，以实现绘制和创建图形的功能。

表格内容元素

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

<table> 元素

<table> 元素会创建一个表格。这是添加包含行和列的其他元素的起点。表格经常在网页上显示，有助于整理和显示信息。使用 <table> 元素的一个用例是向用户显示表格信息，例如您可能会在电子表格中找到的信息类型。

<th> 元素

<th> 元素是一组单元格的标题。

<tr> 元素

<tr> 元素定义表格中的单元格行。您可以在此处添加特定的单元格数据。

<td> 元素

<td> 元素会创建单元格，并添加所需内容。

总结

在本文中，您了解了其他 HTML 元素并培养了您的编码技能。您详细了解了内容、内嵌文本、嵌入内容和表格元素。您现在已经对其他 HTML 元素有了一个理解。表现不错，继续努力！