其他 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> 元素的实际应用。如上所示，<figure> 可与 <figcaption> 元素一起使用，以增强视觉体验。

您会一直看到整个网络上的图片以及其他有用的视觉数据。视觉元素有助于吸引访问者的注意力，并打造出色的用户体验。<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 元素。表现不错，继续努力！