HTML5-快速标记参考-三-HTML5 快速标记参考（三）十四、HTML5 表格：以表格格式构造数据我们来谈谈 H

HTML5 快速标记参考（三）

原文：HTML5 Quick Markup Reference

协议：CC BY-NC-SA 4.0

十四、HTML5 表格：以表格格式构造数据

我们来谈谈 HTML5 的十个表格创建标签。它们允许开发人员在基于网格的布局中使用表格格式创建不同类型的基于表格的内容。这些更加专门化的与表格相关的标记允许 HTML5 开发人员使用不到十几个标记，非常灵活地定义他们的文档表格内容。table 标签具有内在的语义，因为它们显然用于定义数据集合和信息网格的表格。

本章解释了表格标签，它实现了 HTML 中的表格内容。HTML5 支持所有的标签；和在 HTML 的早期版本中也受支持。包括表格，表格数据，列，表格列组，标题，表头，表尾，表组表头

| , table row |，表体 | 。 |

HTML5 表格标签:表格信息

本章涵盖了 HTML5 中支持的十个文本相关的表格标签。他们创建信息的表格集合，很像 Android 或 Java 编程中的网格，但风格像表，这就像 2D 数据定义集合(数据库也使用表)，类似于您体验的基本 SQL 定义。所有这些标签在 HTML 的旧版本中都受支持；一些标签甚至可以追溯到 HTML 2.0，我会在适用的地方指出这一点。表格标签最好用作第十章中所涉及的语义标签的子标签，以便将基于表格的内容封装(或包装)到标准化的语义容器中。表格数据也是语义化的；它被语义搜索所吸收，因为与表相关的标记名描述了表标记名中包含的数据对表格式内容的组织所表示的内容！

由于符合当前 HTML5 中正在进行的新的 Web 3.0 语义，表标签已经从它们最近面临的模糊状态中回归。有一段时间，开发人员从使用表格和框架转向使用其他容器和 CSS 来实现相同的视觉效果。但是如果使用得当，表标记可以创建相互关联的数据表，就像数据库一样。表 14-1 显示了 HTML5 和早期 HTML 版本支持的十个表标签。

表 14-1。

Ten HTML Content Publishing Tags for Table Creation

| HTML 表格创建标签 | HTML 表格创建标签用法 | | --- | --- | | 桌子 | 定义表格 | | 标题 | 定义表格标题 | | tr | 定义表格行 | | 泰国(Thailand) | 定义表格标题单元格 | | 任务描述 | 定义表格数据单元格 | | 四羟乙基己二酰胺 | 定义表格标题 | | 第比利斯 | 定义一个表体 | | 脚踏 | 定义表格页脚 | | 山口 | 定义表格列 | | 科尔集团 | 定义表格列组 |

让我们来看看逻辑部分中的表创建标签，按照它们在这个表中的排列方式，从您的核心 HTML5 表标签、和

开始。这些为 HTML5 呈现引擎定义了重要的表格特征。出于这个原因，这些列表标签也可以归类为语义搜索标签，因此由 HTML5 内容开发人员正确实现它们是很重要的。

顶级 HTML 表格创建:表格和标题

顶层表格标签用于定义表格本身；其中包括表格标签，它被用作表格的父容器，以及它的子标签— 和

，它们被用来指定主要的表格数据，分别称为表格主体和表格标题。

表标签:用于创建表元素的核心标签

一个标签定义了 HTML 表格元素。最起码，一个 HTML 表格必须由

元素和一个或多个 < tr > 、 < td > 和 < th > 元素组成。

HTML5 中仍然支持两个元素参数:sortable 和 border。CSS3 替换了八个参数，但是在以前的 HTML 版本中仍然有效。均如表 14-2 所示。

表 14-2。

十个<表格>参数用于表格配置

中心)

| HTML table label parameters | HTML table tag parameter usage | | --- | --- | | Sortable | Define the table as sortable | | frame | Define the table to have a border. | | bgcolor(bgcolor) | Define the table background color. | | 单元格填充 | Define table cell fill values. | | 单元格间距 | Define table cell spacing values. | | 设计 | Define the visible outer border. | | |

正如你在本章后面看到的，所有其他的表格标签都是的子标签。元素定义了一个表格行，

| The element defines each table cell, | The element defines the header of a label table column. |

更复杂的表还包括、、、、、、和、元素，所有这些都将在本章中详细介绍。

让我们使用标签在包含意大利跑车的流行品牌和型号的部分中创建一个表，并使用 HTML5 中支持的两个参数 border 和 sortable，使该表具有边框，并能够被排序。值得注意的是，目前并非所有的浏览器都支持可排序参数。这个奇特的汽车表是使用以下 HTML5 标记完成的:

<!DOCTYPE html><html>
<head><title>Exotic Car Table</title></head>
<body>
 <section id="exotic car table">
  <table border="1" sortable>

   <tr>
    <th>Brand</th>
    <th>Model</th>
   </tr>
   <tr>
    <td>Ferrari</td>
    <td>LaFerrari</td>
   </tr>
   <tr>
    <td>Bugatti</td>
    <td>Chiron</td>
   </tr>
   <tr>
    <td>Maserati</td>
    <td>GranCabrio</td>
   </tr>
   <tr>
    <td>Lamborghini</td>
    <td>Gallardo</td>
   </tr>
  </table>

 </section>
</body></html>

接下来，让我们看看 table caption 标签如何允许您向包含它的父表标签添加标题。

标题标签:向表格添加标题

标签被用作子标签来定义表格元素的标题。需要在标签之后立即插入

标签。这个标签有一个 align 参数，由于使用 CSS 进行样式化和使用标签标记进行内容定义的趋势，HTML5 不支持这个参数。

让我们使用 caption 标签为您的表格示例添加一个标题。这是通过以下 HTML 标记完成的:

<!DOCTYPE html><html>
<head><title>Exotic Car Table with Caption</title></head>
<body>
 <section id="exotic car table">
  <table>
   <caption>Exotic Italian Car Manufacturers and Current Models</caption>

    <tr><th>Brand</th><th>Model</th></tr>
    <tr><td>Ferrari</td><td>LaFerrari</td></tr>
    <tr><td>Bugatti</td><td>Chiron</td></tr>
    <tr><td>Maserati</td><td>GranCabrio</td></tr>
    <tr><td>Lamborghini</td><td>Gallardo</td></tr>
  </table>
 </section>
</body></html>

请注意，我还通过设置标记间距的方式使表格标记更加紧凑，表格行构造各自占据一行标记。只要一切嵌套正确，间距对 HTML5 解析引擎没有影响。

接下来，让我们看看表内容定义子标签。

HTML5 表格内容定义:TR、TH 和 TD

表格 14-1 中接下来的三个标签允许你定义表格行和它们的单元格。< tr >标签有五个参数，HTML5 都不支持。我将它们包括在表 14-3 中，供从事遗留项目的人参考。

表 14-3。

Five Table Row Parameters Used Prior to HTML5

| HTML 表格标签参数 | HTML 表格标记参数用法 | | --- | --- | | 排列 | 对齐(左对齐、右对齐、居中、两端对齐) | | bgcolor(bgcolor) | 定义表格行背景颜色 | | 茶 | 将内容与表格行字符对齐 | | 查洛夫 | 定义字符对齐偏移量 | | 瓦伦 | 垂直对齐(上、中、下) |

表格行有点像数据库中的记录，表格单元格充当数据记录中的数据字段。事实上，随着表格的可排序性和语义搜索越来越多地与数据相关联，标签及其子标签非常适合在 Web 3.0 中以这种方式使用。

正如您在迄今为止的示例中所看到的，每个元素包含一个或多个 < th > 或 < td > 元素。

因为您已经看到了如何使用元素，所以我在这一节中继续介绍表格标题 And tabular data. Element without taking up any space for the tag list. To see how these elements work, just review the tags I mentioned in the previous section.

第 TH 个标签:定义表格行中的表格标题单元格

标签定义了表格行中的表格标题。这些标题通过为每列使用标题来标记后续的数据行。HTML 表格有两种单元格:标题单元格，称为标题单元格，包含标题信息；标准单元格，包含表格数据。标准单元格是通过使用 Element, which will be introduced in the next section.

默认情况下，这些 The text content used in the element is bold and centered (automatic). On the other hand, the text in your < td > element will not be thickened, and by default it should be left-aligned, just like the text in most tables and spreadsheets, that is, data, not title text (labels, data field names, etc. ).

这可以在 The default CSS3 stylesheet setting of the element, which is shown here to strengthen this point:

th { display: table-cell;
     vertical-align: inherit;
     font-weight: bold;
     text-align: center; }

请注意，CSS 通过表格单元格参数隐式支持表格，并且垂直对齐参数是从表格行父标签继承的(参见表格 14-3 )。

HTML5 中的表格标题标签支持六个参数，如表格 14-4 的顶部所示。还有 9 个其他参数在 HTML5 中不受支持，但在早期版本的 HTML 中可以使用。sorted 参数允许您定义排序方向(reversed、number、reversed number 或 number reversed ),而 scope 参数允许您定义第<个>标记的影响范围(行、列、行组或列组)。

表 14-4。

第十五个<第>参数用于表头 justify)

| HTML table label parameters | HTML table label parameter usage | | --- | --- | | sort | Define the sort direction of this column. | | range | Define header range (col, line or group) | | abbreviate | Define a header abbreviation term. | | meter | Define header cells. A header involves | | Column span | Define several column header spans. | | Row span | Define a header span for several rows. | | axis | Define the category name of the header cell. | | bgcolor(bgcolor) | Define the title background color | | 茶 | Match content with table title characters | | 查洛夫 | definition | [Top, Middle and Bottom] Vertical alignment | | width | Defines the table width. |

abbr 参数定义了标题的缩写。headers 参数定义了与 Title cell related to the label. This allows you to have more than one layer of title information. To use this headers parameter, assign an id to the top-level header and reference it with the headers parameter. The following is an example of using HTML tags:

<tr><th id="namedata" colspan="2">Enter Name Here:</th></tr>
<tr>
   <th headers="namedata">Proper Name:</th>
   <th headers="namedata">Family Name:</th>
</tr>

在前面的示例中，我还展示了一个 colspan 参数，因为您在这里输入的姓名需要与您的正确姓名和姓氏标题对齐，所以它需要使用一个 colspan="2 "参数值跨越两列。您可以使用 rowspan 参数使标题跨越多行来实现同样的目的。

接下来，让我们看看具有不同页眉、页脚和正文部分的复杂表格。

复杂表定义:THEAD、TBODY、TFOOT

与语义标签类似，父标签允许您定义表格的页眉和页脚，以及内容的主体。元素与和元素一起使用，每个元素都可以指定表定义的各个组成部分；即一个表头，或；一个表体，或<t 表体>；和一个表尾，或< tfoot >。这种更复杂的表格定义形式使用了表格 14-1 第三部分所示的标签。

THEAD 标签:定义每个描述术语子元素

标签将标题内容分组在一个 HTML 表格中。元素需要与 < tbody > 和 < tfoot > 元素结合使用，以便您指定表中的每个组件语义部分。然后，浏览器利用这些语义设计元素进行异步滚动，允许表体独立移动，而页眉和页脚信息保持锁定。当打印跨越多页的大型表格时，定义这些全局表格区域元素可以分别在每页的顶部和底部打印表头和表尾。

这个标签必须始终是一个父标签的子标签，并且需要在任何元素之后声明。另外，必须用在或表节容器之前，并且用在任何元素之前。??

以及任何

这里显示了为这个标记定义的默认 CSS3，仅供参考，正如您所见，标题垂直居中，其边框颜色继承自其父容器，并且它有自己的表格标题组 CSS3:

thead { display: table-header-group;
        vertical-align: middle;
        border-color: inherit;  }

HTML5 中不支持任何表头组参数，但是我在表 14-5 中列出了它们，供从事遗留 HTML 标记项目的人参考。这些参数都用于对齐，它们的用法不言自明。

表 14-5。

Table Head Parameters Used Prior to HTML5

| HTML THEAD 标签参数 | HTML THEAD 标记参数用法 | | --- | --- | | 排列 | 对齐(左对齐、右对齐、居中、两端对齐) | | 茶 | 将内容与表格行字符对齐 | | 查洛夫 | 定义字符对齐偏移量 | | 瓦伦 | 垂直对齐(上、中、下) |

接下来，我们来看看表体标签。

TBODY 标签:定义每个描述数据子元素

标签包含了表的主要部分，其考虑因素与上一节讨论的相同。这个标签必须始终是父标签的子标签，并且需要在任何元素之后和元素之后声明。另外，必须用在表尾部分容器之前，并且用在包含任何元素之前。

元素之后、任何 | and | Any of the elements |

标签的默认 CSS 被看作是一组表格行，并且是居中对齐的。此处显示是为了参考，因为这本书不包括 CSS3 快速语法参考:

tbody { display: table-row-group;
        vertical-align: middle;
        border-color: inherit;  }

参数与表 14-5 中的参数相同，在此不再赘述。

接下来，让我们改变本章中的初始示例，使用一个更复杂的表格版本，使用和来创建相同的结果:

<!DOCTYPE html><html>
<head><title>Exotic Car Table with Caption</title></head>
<body>
 <section id="exotic car table">
  <table>
   <caption>Exotic Italian Car Manufacturers and Current Models</caption>
    <thead>
      <tr><th>Brand</th><th>Model</th></tr>
    </thead>
    <tbody>

      <tr><td>Ferrari</td><td>LaFerrari</td></tr>
      <tr><td>Bugatti</td><td>Chiron</td></tr>
      <tr><td>Maserati</td><td>GranCabrio</td></tr>
      <tr><td>Lamborghini</td><td>Gallardo</td></tr>
    </tbody>

  </table>
 </section>
</body></html>

接下来，我们来看看表尾标签。

TFOOT 标签:定义每个描述数据子元素

标签保存了表格的页脚部分。它与前两节中讨论的考虑事项相同。这个标签必须始终是一个父标签的子标签，并且需要在任何元素之后和元素之后声明。此外，在< tbody >表体节容器之前必须使用一个，这与您可能的假设是相反的。我会假设< tfoot >标记在< tbody >标记之后。其实不是这样的，所以要记住这个规则！

元素之后、任何

一个标签的默认 CSS 如下所示:

tfoot { display: table-footer-group;
        vertical-align: middle;
        border-color: inherit;  }

参数与表 14-5 中的参数相同，在此不再赘述。记住，它们在 HTML5 中不受支持，所以只在遗留 HTML 项目中使用它们，并使用 CSS 来实现这些特性。HTML5 浏览器可能会呈现这些不推荐使用的参数，所以一定要在所有流行的浏览器上测试您的 HTML 标记。

接下来，让我们改变本章中的初始示例，使用一个更复杂的表格版本，使用、、、来创建一个增强的表格结果，它有一个带引用的页脚。这是在下面的 HTML5 标记中完成的:

<!DOCTYPE html><html>
<head><title>Exotic Car Table with Caption</title></head>
<body>
 <section id="exotic car table">
  <table>
   <caption>Exotic Italian Car Manufacturers and Current Models</caption>
    <thead>
      <tr><th>Brand</th><th>Model</th></tr>
    </thead>
    <tfoot>

     <tr><th>References:</th></tr>
     <tr><td>Sports Car Brands and Models researched using Google</td></tr>
    </tfoot>

    <tbody>
      <tr><td>Ferrari</td><td>LaFerrari</td></tr>
      <tr><td>Bugatti</td><td>Chiron</td></tr>
      <tr><td>Maserati</td><td>GranCabrio</td></tr>
      <tr><td>Lamborghini</td><td>Gallardo</td></tr>
    </tbody>
  </table>
 </section></body></html>

接下来，让我们看看与列相关的表标记。

表格列定义:列和列组

最后，让我们看看几个允许您处理表格列的表格标记。一个标签通常用在一个标签内来定义整个列的列特征，这样你就不必在每一个 or 标签内都这样做。HTML5 不支持任何列参数，但是我在表 14-6 中列出了它们，供所有从事遗留 HTML 标记项目的人使用。

表 14-6。

表格列参数使用在 HTML 5 对齐

| HTML THEAD tag parameters | HTML THEAD tag parameter usage | | --- | --- | | 排列 | Align (align left, align right) | | 茶 | Match content with table line characters |

接下来，让我们为示例表中的每一列添加背景色。我们将用黄色表示汽车制造商列，用橙色表示汽车型号列。这是通过将这两个定义从左到右依次嵌套在父标签中实现的，如下面的 HTML5 标记所示:

<!DOCTYPE html><html>
<head>
  <title>Exotic Car Table with Caption</title>
</head>
<body>
 <section id="bi-colored column exotic car manufacturer and model table">
  <table>
   <caption>Italian Car Manufacturer (Yellow) and Model (Orange)</caption>
    <colgroup>

      <col style="background-color:yellow" />
      <col style="background-color:orange" />
    </colgroup>

    <thead>
      <tr><th>Manufacturer</th><th>Model</th></tr>
    </thead>
    <tfoot>
     <tr><th>References:</th></tr>
     <tr><td>Sports Car Brands and Models researched using Google</td></tr>
    </tfoot>
    <tbody>
      <tr><td>Ferrari</td><td>LaFerrari</td></tr>
      <tr><td>Bugatti</td><td>Chiron</td></tr>
      <tr><td>Maserati</td><td>GranCabrio</td></tr>
      <tr><td>Lamborghini</td><td>Gallardo</td></tr>
    </tbody>
  </table>
 </section>
</body></html>

这将黄色放在汽车制造商列后面，橙色放在汽车型号列后面。注意，子标签定义的构造在标签之后，在任何、、或标签之前。

摘要

在本章中，您学习了 HTML5 和早期 HTML 版本中的表格标签支持，包括、、、、和标签。下一章着眼于 HTML5 标签，这些标签支持在 HTML5 文档和应用中发布基于表单的内容。

| 、 | 、??、?? |、

十五、HTML5 表单：使用 HTML5 标签创建表单

接下来说说 HTML5 的 13 个表单创建标签；三个是 HTML5 新版本，十个在 HTML5 和 HTML 传统版本中工作。它们允许开发人员创建不同类型的基于表单的内容，使用带有数据输入(或数据输入)字段的表单容器以及表单中的高级用户界面控件，例如可以使表单具有交互性的按钮和下拉列表。这些更加专门化的表单相关标记允许 HTML5 开发人员使用十几个强大的标记，非常灵活地为他们的文档定义表单。在大多数情况下，表单标记与服务器端处理组件进行对话，因此在这个过程中，我们只讨论客户端表单设计 HTML5 标记组件。对于服务器端处理，一定要在 Apress 网站( www.apress.com )上找一本关于 PHP、JSF、Drupal、Joomla、AJAJ 或者 AJAX 的书。

在这一章中，您将看到与在 HTML 中实现表单内容相关的表单标签，因为所有这些标签在 HTML5 中都是受支持的，并且在 HTML 的早期版本中也有很多。这些标签包括表单

，标签，输入，文本区域，字段集<fieldset>，图例<legend>，选择<select>，选项<option>和选项组</option><optgroup>，按钮<button>，数据列表<datalist>，密钥生成器<keygen>，以及允许您进行内嵌计算的输出<output>标签。</output></keygen></datalist></button></optgroup></select></legend></fieldset>

HTML5 表单标签:交互信息

本章涵盖了 HTML5 中支持的 13 个文本相关的表单标签，它们创建交互式表单来收集信息。这些通常被设计成网格结构，甚至类似于表格。这些标签中有十个在 HTML 的旧版本中受支持，其中三个是 HTML5 的新标签。这些表单标签也可以作为第十章中语义标签的子标签，这样基于表单的内容就被封装(或包装)到标准化的语义容器中。表单数据也可以是语义的；可以使用语义搜索来吸收它，因为与表单相关的标签名称描述了由该标签定义的表单元素的作用，因此它代表了内容。

表 15-1 显示了 HTML5 支持的 13 个表单标签；其中 10 种在传统 HTML 版本中受支持。

表 15-1。

Thirteen HTML Forms Design Content Publishing Tags

| HTML 表单创建标签 | HTML 表单创建标签的目的或用途 | | --- | --- | | 形式 | 定义表单 | | 投入 | 定义输入(数据字段) | | 标签 | 定义输入(字段)标签 | | 文本区域 | 定义文本区域(多行输入字段) | | 表单分组 | 定义字段集(一组输入字段) | | 神话；传奇 | 定义字段集的图例(标签) | | 挑选 | 定义一个下拉列表 | | 选择权 | 定义下拉列表中的选项 | | optgroup(选项组) | 在下拉列表中定义一个选项组 | | 按钮 | 定义一个按钮 | | 数据列表(HTML5 中的新功能) | 输入控件的预定义选项列表 | | keygen(html 5 中的新功能) | 在表单中定义密钥对生成器字段 | | 输出(HTML5 中的新功能) | 定义输出(计算的结果) |

让我们看看这些表单创建标签在逻辑部分中的排列方式，从核心 HTML5 表单标签

、和开始。这些为 HTML5 呈现引擎定义了重要的表单特征或组件。因此，这些表单标签也应该被认为是语义搜索标签。因此，为表单正确实现这些标记是很重要的。

基本的 HTML 表单创建:表单、标签和输入

定义表单本身的顶级表单标签包括表单

标签，它用作表单的父容器，以及和子标签，它们指定表单标签和数据输入字段。

表单标签:用于创建表单元素的核心标签

标签定义了 HTML 表单结构，用于获取用户数据输入。一个 HTML 表单最起码必须包含这个

元素，以及一个或多个表 15-1 中的元素。

HTML5 中引入了两个

元素参数，autocomplete 和 novalidate，目前仍支持六个 HTML 参数。一种不再支持，如表 15-2 所示。

表 15-2。

九个<表单>参数用于表单配置

| Html 5 form label parameters | Usage of HTML5 form label parameters | | --- | --- | | Accept (html 5 is not supported) | Specify a comma-separated list of file types accepted by the server, which is submitted through the file upload process. | | Automatic (new feature in HTML5) | Specifies to turn on or off the auto-completion function of the form. | | Novalidate (new feature in HTML 5) | The specified form should not be validated. | | 接受字符集 | Specifies the character encoding used for form submission. | | action | Specify where the form data is submitted. | | enctype | Specify how the form data should be encoded. | | way | | | name | Allows you to specify a form name. | | target | Specify the location where the response is received after the form is submitted (_blank, _parent, _self, _top) |

正如你在本章中看到的，所有其他的表单标签都是

的子标签。以下 HTML 创建一个空表单:

<!DOCTYPE html><html>
<head>
 <title>Empty Exotic Car Preference Form</title>
</head>
<body>
 <section id="exotic car preference form">
  <form action="myForm.asp" method="get" autocomplete="on" novalidate>

    <!-- Your Form Design and Child Tags will be nested in here -->
  </form>

  <p>Form data will be sent to a page on the server called "myForm.asp"</p>
 </section>
</body>
</html>

这个

标签定义了表单数据提交的 myForm.asp，定义了服务器从客户端表单读取数据的 HTTP "get "方法，将自动完成特性设置为" on ",并将 novalidate 特性设置为" true ",方法是在开始的<表单>标签中包含 novalidate 参数本身。

接下来，让我们看看如何使用 input 标签，从填写表单的人那里获取数据输入。

输入标签:向表单添加数据输入字段

标签用作子标签，定义用户输入文本的数据输入区域。这些通常在表单和数据库中称为字段。这个标签有如此多的参数，我将包括两个表:一个包含 HTML5 的新参数，另一个包含 HTML5 不支持的参数。还有那些在 HTML5 和传统 HTML 版本中都有效的参数。在一个在父标签

中使用两个子标签的简短例子之后，我们将讨论参数。

让我们使用标签要求用户输入他们喜欢的汽车制造商和型号，如下面的标记所示:

<!DOCTYPE html><html>
<head>
  <title>My Exotic Car Preference Form with Two Input Fields</title>
</head>
<body>
 <section id="exotic car preference form">
  <form action="myForm.asp" method="get" autocomplete="on" novalidate>
  Manufacturer: <input type="text" name="manufacturer" value="Ferrari"><br>
  A Model Name: <input type="text" name="model-name" value="LaFerrari"><br>
  </form>
  <p>Please enter favorite exotic car manufacturer and model name above!</p>
 </section>
</body>
</html>

参数指定文本输入、字段名称和默认值。autocomplete="on "参数告诉浏览器允许预测或猜测用户当前正在键入的数据值。当用户开始在字段中键入内容时，浏览器应该根据先前键入的值或预定义的输入来显示填充字段的选项。当我们在本章稍后讨论用于定义数据元素列表的标签时，您会看到这个预定义输入是如何定义的。它与 autocomplete 参数(和函数)一起使用，通过在表单上提供“人工智能”的外观来大大增强用户对表单设计的体验，这为用户提供了关于表单中的字段在寻找什么的反馈。

表 15-3 列出了 19 个新的 HTML5 <输入>标签参数。

表 15-3。

HTML5 Parameters Used in Form Configuration

| HTML5 输入标记参数 | HTML5 输入标记参数的用法 | | --- | --- | | 自动完成 | 为输入指定自动完成打开或关闭 | | 自（动）调焦装置 | 页面加载时为输入指定的自动对焦 | | 目录名 | 为输入指定文本方向 | | 形式 | 指定了输入所属的表单 | | 形成动作 | 处理表单的指定 url | | 表单 enctype | 指定编码(用于提交或图像) | | 形法 | 指定要使用的 HTTP 方法(get 或 post) | | 甲酰新戊酸盐 | 不应验证指定的输入 | | 表单目标 | 指定显示响应的位置 | | 高度 | 指定了输入元素的高度 | | 目录 | 包含输入选项的指定数据列表 | | 最大 | 指定输入元素的最大值 | | 部 | 指定输入元素的最小值 | | 多个的 | 为输入指定了多个值 | | 模式 | 指定检查元素值所依据的“正则表达式” | | 占位符 | 指定一个简短的提示，描述要输入到元素中的预期值 | | 需要 | 将输入字段指定为必填字段 | | 步骤 | 为输入指定的法定数字间隔 | | 宽度 | 指定了输入元素的宽度 |

表 15-4 列出了 11 个遗留 HTML <输入>标签参数。

表 15-4。

HTML Parameters Used in Form Configuration

| HTML 输入标记参数 | HTML 输入标记参数的用法 | | --- | --- | | 对齐(不在 HTML5 中) | 指定图像输入的对齐方式；仅适用于 type="image "(左、右、上、中、下) | | 接受 | 指定服务器接受的文件类型；仅适用于 type="file "(音频/类型、视频/类型、图像/类型) | | 中高音 | 指定图像的替换文本；这仅适用于 type="image " | | 检查 | 指定页面加载后预先选择的输入元素；这适用于 type="checkbox "或 type="radio "(单选按钮) | | 有缺陷的 | 指定应该禁用元素 | | 最大长度 | 指定输入字段中的最大字符数 | | 名字 | 指定输入字段(元素)名称 | | 只读的 | 指定输入字段是只读的 | | 大小 | 以字符表示的指定输入字段宽度 | | 科学研究委员会 | 指定用作提交按钮的图像的 URL 仅用于 type="image " | | 类型 | 指定要显示的输入元素的类型 | | 价值 | 指定输入元素默认值 |

HTML5 不支持 align 参数，因为它是用 CSS3 实现的。这 11 个参数在 HTML5 和 HTML 的早期(传统)版本中都受支持。

让我们添加一个字符数限制，允许您的用户用来指定汽车品牌和型号名称:

<form action="myForm.asp" method="get" autocomplete="on" novalidate>
 Manufacturer:
 <input type="text" name="manufacturer" value="Ferrari" maxlength="16"><br>
 A Model Name:
 <input type="text" name="model-name" value="LaFerrari" maxlength="24"><br>
</form>

这个 maxlength 参数允许您控制文本数据字段的宽度，以便您可以有一个紧凑的表单设计，并将用户限制在一个合理的字符数据长度。

让我们将 autofocus 添加到第一个数据输入字段，以便用户将光标放在正确的数据字段中，准备输入:

<form action="myForm.asp" method="get" autocomplete="on" novalidate>
  Manufacturer:
  <input type="text" name="manufacturer" value="Ferrari"
         maxlength="16" autofocus><br>
  A Model Name:
  <input type="text" name="model-name" value="LaFerrari" maxlength="24"><br>
</form>

现在让我们通过使用

标记中的 name 属性和标记中的 form 属性，引用相同的字符，将输入字段“连接”到它们所在的表单:

<form name="carpreferenceform" action="myForm.asp" method="get"

      autocomplete="on" novalidate>
  Manufacturer:
  <input type="text" name="manufacturer" value="Ferrari"
         maxlength="16" form="carpreferenceform" autofocus><br>
  A Model Name:
  <input type="text" name="model-name" value="LaFerrari"
         maxlength="24" form="carpreferenceform"><br>
</form>

注意，因为我在我的

标签中有一个 method="get ",所以我不必在每个标签中使用 formmethod="get"。出于设计目的，我还可以用像素来定义这些数据字段的宽度和高度:

<form name="carpreferenceform" action="myForm.asp" method="get"
      autocomplete="on" novalidate>
  Manufacturer:
  <input type="text" name="manufacturer" value="Ferrari"   height="24"

         maxlength="16" form="carpreferenceform" autofocus width="128"><br>
  A Model Name:
  <input type="text" name="model-name" value="LaFerrari" height="24"

         maxlength="24" form="carpreferenceform"         width="128"><br>
</form>

我不打算在这里详细介绍元素的 30 个参数，因为其中一些是不言自明的，一些很少使用，还有一些与表单处理的服务器端结合使用，这很可能是指定使用什么参数的不同团队成员！

接下来，我们来看看标签。这允许您标记元素，尤其是那些使用类型参数的元素，以指定除数据字段之外的内容，例如单选按钮、GUI 按钮或复选框。

标签标记:输入元素的固定文本标签定义

鉴于标签是一个空标签，不包含任何内容，只包含参数，而<标签>标签可以在<标签>和</标签>开始和结束标签之间包含一个描述性标签。<标签>标签专门用于定义相关<输入>元素的标签。这个<标签>对于用户来说，除了一个文本标签之外，没有任何特别的东西。然而，它确实为触摸屏和鼠标用户提供了用户体验改进，因为如果用户触摸或单击使用此<标签>元素指定的文本，它将切换由<输入 type="control-name" >指定的输入(control)元素。

这个标签只有两个参数；表单参数，你已经看到带有<输入>标签，它将<标签>连接到一个<表单>，以及 for 参数，它使用 id 参数将<标签>连接到<输入>本身。

标签的 for 参数应该等于相关元素的 id 属性，以便将它们绑定在一起。这显示在下面的 HTML5 标记示例中:

<!DOCTYPE html><html>
<head>
  <title>My Exotic Car Preference Form using Six Radio Buttons</title>
</head>
<body>
 <section id="exotic car preference form">
  <form name="carform" action="myForm.asp" method="get" novalidate>
   <label for="ferrari">Ferrari</label>
   <input type="radio" name="cartype" form="carform" id="ferrari"
          value="Ferrari Brand Selected" /><br>
   <label for="maserati">Maserati</label>
   <input type="radio" name="cartype" form="carform" id="maserati"
          value="Maserati Brand Selected" /><br>
   <label for="bugatti">Bugatti</label>
   <input type="radio" name=cartype" form="carform" id="bugatti"
          value="Bugatti Brand Selected" /><br>
   <label for="laferrari">Ferrari</label>
   <input type="radio" name="carmodel" form="carform" id="laferrari"
          value="Ferrari La Ferrari Model Selected" /><br>
   <label for="grancabrio">GranCabrio</label>
   <input type="radio" name="carmodel" form="carform" id="grancabrio"
          value="Maserati GranCabrio Model Selected" /><br>
   <label for="chiron">Chiron</label>
   <input type="radio" name=carmodel" form="carform" id="chiron"
          value="Bugatti Chiron Model Selected" /><br>
   <input type="submit" value="Please Submit My Choices" form="carform" />
  </form>                                  
  <p>Please select your favorite exotic car manufacturer and model name</p>
 </section>
</body></html>

这次我们使用单选按钮来指定用户选择他们最喜欢的汽车制造商和最喜欢的汽车。单选按钮按名称分组，这样您就不能选择多个，并且分别使用 form 和 for 参数连接到前面描述的表单和输入。您提供的值是当使用标签提交表单时发送到服务器(或电子邮件地址)的内容，该标签用于一个简单的提交按钮。本章稍后将介绍复杂按钮。接下来，让我们看看表单数据输入的更大区域，例如文本区域或段落文本输入以及字段组或字段集。

HTML 表单内容组:TextArea 或 FieldSet

表 15-1 中接下来的三个标签允许你为文本和数据输入字段集合定义大的数据输入区域。这些标签有十几个参数，HTML5 都支持这些参数。我将它们包括在表 15-5 和 15-6 中，并试图涵盖示例中的所有关键参数。

表 15-6。

Three

Parameters Used Prior to HTML5

| HTML 字段集标记参数 | HTML 字段集标记参数的用法 | | --- | --- | | 有缺陷的 | 指定应禁用文本区域 | | 形式 | 指定文本区域所属的表单 | | 名字 | 指定文本区域(元素)的名称 |

表 15-5。

Twelve HTML5 Parameters for Text Area Configuration

| TextArea 标记参数 | TextArea 标记参数的用法 | | --- | --- | | 关口 | 指定文本区域列(字符) | | 行 | 指定文本区域行(线) | | 名字 | 指定文本区域(元素)的名称 | | 有缺陷的 | 指定应禁用文本区域 | | 只读的 | 指定文本区域是只读的 | | 自（动）调焦装置 | 指定页面加载时文本区域自动聚焦 | | 目录名 | 指定请尊重文本区域方向 | | 形式 | 指定文本区域所属的表单 | | 最大长度 | 指定文本区域最大字符数 | | 占位符 | 所需文本的指定描述 | | 需要 | 指定需要文本区域补全 | | 包 | 指定文本区域需要如何换行(选项为硬或软) |

TEXTAREA 标签:定义一个文本输入块或段落

标签允许你定义多行文本输入控件。这些文本区域控件可以容纳无限数量的字符，尽管不建议这样做，并且文本使用固定宽度的字体(如 monospace 或 Courier)呈现。文本区域的大小应该使用 cols 和 rows 参数来指定，正如我在下面的示例标记中所做的那样，我要求用户提供他们最喜欢的汽车品牌和型号的书面描述。我还在示例中使用了几乎所有可能的< textarea >标签参数，包括 autofocus、required、name、form、placeholder 和 maxlength。

<!DOCTYPE html><html>
<head>
 <title>Exotic Car Preference Written Description Form</title>
</head>
<body>
 <section id="exotic car preference paragraph form">
  <form name="cardescription" action="myForm.asp" method="get" novalidate>
   <textarea rows="5" cols="250" maxlength="1250" required
              name="myfavoritecar" form="cardescription" autofocus
              placeholder="Write a short paragraph on your favorite car">    Please write a short paragraph on your favorite car and brand in here!    </textarea>

  </form>
  <p>Please write a short paragraph on your favorite car and brand above</p>
 </section>
</body></html>

这个标签的十几个参数列在表 15-5 中，五个遗留参数列在第一部分，七个新的 HTML5 参数列在第二部分。

接下来，让我们看看如何使用

元素将字段和数据输入控件进行逻辑分组。

FIELDSET 标签:分组数据字段和输入控件

标签用于将相关的表单数据域和控制元素组合在一个复杂的表单中。

标签在相关元素周围画一个方框，以便在视觉上对它们进行分组。

让我们使用单选按钮控件示例，通过使用这个

元素，将汽车品牌选择和汽车型号选择单选按钮放入它们自己的逻辑部分。

这应该类似于下面的 HTML5 标记:

<!DOCTYPE html><html>
<head>
 <title>Exotic Car Preference Form: 6 Radio Buttons in 2 Field Sets</title>
</head><body>
 <section id="exotic car preference form">
  <form name="carform" action="myForm.asp" method="get" novalidate>
   <fieldset name="carbrands" form="carform">
    <label for="ferrari">Ferrari</label>
    <input type="radio" name="cartype" form="carform" id="ferrari"
           value="Ferrari Brand Selected" /><br>
    <label for="maserati">Maserati</label>
    <input type="radio" name="cartype" form="carform" id="maserati"
           value="Maserati Brand Selected" /><br>
    <label for="bugatti">Bugatti</label>
    <input type="radio" name=cartype" form="carform" id="bugatti"
           value="Bugatti Brand Selected" /><br>
   </fieldset>

   <fieldset name="carmodels" form="carform">
    <label for="laferrari">Ferrari</label>
    <input type="radio" name="carmodel" form="carform" id="laferrari"
           value="Ferrari La Ferrari Model Selected" /><br>
    <label for="grancabrio">GranCabrio</label>
    <input type="radio" name="carmodel" form="carform" id="grancabrio"
           value="Maserati GranCabrio Model Selected" /><br>
    <label for="chiron">Chiron</label>
    <input type="radio" name=carmodel" form="carform" id="chiron"
           value="Bugatti Chiron Model Selected" /><br>
   </fieldset>

    <input type="submit" value="Please Submit My Choices" form="carform" />
  </form>      
 <p>Please select favorite exotic car manufacturer and model name above</p>
 </section>
</body></html>

请注意，我已经使用 form 和 name 参数将所有内容连接在一起，并命名了逻辑字段集。表 15-6 中列出了三个 HTML5

参数。

接下来，让我们看看复杂表单的元素。

图例标记:向字段集分组添加图例

标签定义了元素的标题。它有一个 HTML5 中不再支持的 align 参数(见表 15-4 )，因为你现在需要使用 CSS 来实现这个对齐功能(尽管这个参数在一些试图提供向后兼容性的浏览器中可能仍然有效)。对齐参数值包括顶部、底部、左侧和右侧。

<form name="carform" action="myForm.asp" method="get" novalidate>
 <fieldset name="carbrands" form="carform">
  <legend>Choose Your Favorite Exotic Sports Car Brand:</legend>

   <label for="ferrari">Ferrari</label>
    <input type="radio" name="cartype" form="carform" id="ferrari"
           value="Ferrari Brand Selected" /><br>
   <label for="maserati">Maserati</label>
    <input type="radio" name="cartype" form="carform" id="maserati"
           value="Maserati Brand Selected" /><br>
   <label for="bugatti">Bugatti</label>
    <input type="radio" name=cartype" form="carform" id="bugatti"
           value="Bugatti Brand Selected" /><br>
  </fieldset>
  <fieldset name="carmodels" form="carform">
   <legend>Choose Your Favorite Exotic Sports Car Model:</legend>

    <label for="laferrari">Ferrari</label>
     <input type="radio" name="carmodel" form="carform" id="laferrari"
            value="Ferrari La Ferrari Model Selected" /><br>
    <label for="grancabrio">GranCabrio</label>
     <input type="radio" name="carmodel" form="carform" id="grancabrio"
            value="Maserati GranCabrio Model Selected" /><br>
    <label for="chiron">Chiron</label>
     <input type="radio" name=carmodel" form="carform" id="chiron"
            value="Bugatti Chiron Model Selected" /><br>
  </fieldset>
    <input type="submit" value="Please Submit My Choices" form="carform" />
</form>

接下来，让我们看看复杂表单的选项选择标记。

HTML 表单选项选择:选择和选项

HTML5 表单有一些相当复杂的选项，用于选择选项和选项分组，很像应用软件包中的菜单，这使得表单设计成为 HTML5 发布中最先进的领域之一，还有新媒体和交互性，正如您在本书后面看到的。表 15-1 的第三部分显示了用于在 HTML5 表单设计中创建这些选择集(称为下拉列表)的标签。

选择和选项标签:定义下拉列表

元素创建下拉列表。在元素中使用了标签来定义您希望使用该列表来提供的任何选项。这些类似于单选按钮，因为您只能选择列表中的一个成员。如果要选择多个数据项，请使用一组复选框，其中可以选择多个数据项。

一个标签支持七个参数，其中三个是 HTML5 中的新参数，见表 15-7 的顶部。遗留 HTML 版本支持另外四个参数，在表的底部可以看到。表 15-7。七个<选择>参数用于选择列表 Html 5 select tag parameters HTMLSelect the usage of tag parameters. Automatic focusing Specifies that the selector automatically focuses on page loading. menu Specifies the to which the form selector belongs. 被禁用的 multi- Specify multiple values for the selector. name Specify the selector name. size Define the number of options.

让我们创建一个制造商和型号选择示例，它在语义标签内的

标签和标签内使用和标签，而不是使用单选按钮为用户提供单一选择选项。

使用<表单>标签中的 name 参数，以及每个<选择>标签中的 form 参数，将标签连接到标签中。

您使用标签中的必需参数和 size="4 "参数来指定选项的数量。您应该在第一个中设置自动对焦参数，以便它被预先选择使用，最后使用一个名称参数给每个元素一个唯一的标识。

下面是一个使用 HTML5 标记的例子:

<!DOCTYPE html><html>
<head>
 <title>Exotic Car Selection Form: 8 List Selections in 2 Field Sets</title>
</head>
<body>
 <section id="exotic car preference form">
  <form name="carform" action="myForm.asp" method="get" novalidate>
   <fieldset name="carbrands" form="carform">
    <select form="carform" required name="brandlist" autofocus size="4">
     <option value="ferrari" label="Ferrari">Enzo Ferrari</option>
     <option value="maserati" label="Maserati">Alfieri Maserati</option>
     <option value="bugatti" label="Bugatti">Ettore Isidoro Bugatti</option>
     <option value="lmbo" label="Lamborghini">Ferruccio Lamborghini</option>
    </select>

   </fieldset>
   <fieldset name="carmodels" form="carform">
    <select form="carform" required name="modellist" size="4">
     <option value="laferrari">LaFerrari</option>
     <option value="grancabrio">GranCabrio</option>
     <option value="chiron">Chiron</option>
     <option value="gallardo">Gallardo</option>
    </select>

   </fieldset>
   <input type="submit" value="Please Submit My Selection" form="carform"/>
  </form>       
  <p>Please select favorite exotic car manufacturer and model name above</p>
 </section>
</body></html>

还要注意，我使用了一个 label 属性来指定一个较短版本的选项文本值。这个较短的版本显示在下拉列表中。还要注意，这还没有在所有 HTML5 平台上的所有浏览器中完全实现，但它被完全支持只是时间问题，因为它的实现是非常符合逻辑的。

接下来，让我们看看选项组或标签。

OPTGROUP 标签:分组下拉列表选项

< optgroup>标签将下拉列表中的相关选项分组。如果你有一个很长的选项列表，那么对你的最终用户来说，一组相关的选项更容易理解。让我们将汽车制造商列表选项分组到更贵和更便宜的列表分组中，看看这个标签是如何使用的。HTML5 标记如下所示:

<select form="carform" required name="brandlist" autofocus size="4">
 <optgroup label="More Affordable Exotic Cars">

  <option value="ferrari" label="Ferrari">Enzo Ferrari</option>
  <option value="maserati" label="Maserati">Alfieri Maserati</option>
 </optgroup>

 <optgroup label="Less Affordable Exotic Cars">

  <option value="bugatti" label="Bugatti">Ettore Isidoro Bugatti</option>
  <option value="lambo" label="Lamborghini">Ferruccio Lamborghini</option>
 </optgroup>

</select>

接下来，我们来看看表单设计标签。

按钮标签:创建用户界面按钮

标签定义了可点击的按钮，用于提交或重置表单，或者用于自定义目的。您可以在元素中放置内容，比如文本或图像。这是元素和本章前面使用元素创建的提交按钮之间的主要区别。

确保总是指定一个类型参数，使用带有元素的 submit、reset 或 button 值。需要注意的是，不同的 HTML5 浏览器对这个元素使用不同的默认类型，所以您需要通过指定您希望按钮做什么来“强制解决这个问题”,而不要依赖为您正确设置的默认值！

表 15-8 中列出了八个 HTML5 参数，以及三个传统 HTML 参数。

表 15-8。

HTML5 <按钮>按钮配置参数

| Html 5 button tag parameters | Usage of HTML5 button tag parameters | | --- | --- | | auto-focusing | Specify the button autofocus loading on the page. | | menu | Specify the form to which the button belongs. | | Encoding (for submission or image) | Specify the HTTP method to use (get or post) | | 形成更新 | The specified button should not be verified. | | 表单目标 | Specify where to display the response. | | name | Specify the button element name | | forbidden | The specified button is disabled. | |

让我们用<按钮类型= "提交">和<按钮类型= "重置">标记替换示例中的:

<!DOCTYPE html><html>
<head>
 <title>Exotic Car Selection Form: 8 List Selections in 2 Field Sets</title>
</head><body>
 <section id="exotic car preference form">
  <form name="carform" action="myForm.asp" method="get" novalidate>
   <fieldset name="carbrands" form="carform">
    <select form="carform" required name="brandlist" autofocus size="4">
     <option value="ferrari" label="Ferrari">Enzo Ferrari</option>
     <option value="maserati" label="Maserati">Alfieri Maserati</option>
     <option value="bugatti" label="Bugatti">Ettore Isidoro Bugatti</option>
     <option value="lmbo" label="Lamborghini">Ferruccio Lamborghini</option>
    </select>
   </fieldset>
   <fieldset name="carmodels" form="carform">
    <select form="carform" required name="modellist" size="4">
     <option value="laferrari">LaFerrari</option>
     <option value="grancabrio">GranCabrio</option>
     <option value="chiron">Chiron</option>
     <option value="gallardo">Gallardo</option>
    </select>
   </fieldset>
  <button type="submit" value="Submit Choices" form="carform" name="B1" />
  <button type="reset" value="Reset Choices" form="carform" name="B2" />
  </form>
  <p>Please select favorite exotic car manufacturer and model name above</p>
 </section></body></html>

请注意，我使用两个预定义的类型值来创建两个功能按钮，以及按钮标签值、按钮名称和使用 form 参数的表单名称的推荐连接。接下来，让我们看看新的 HTML5 表单标签。

新的 HTML5 表单标签:DataList，KeyGen，Output

HTML5 中有三个用于表单设计的新标签。它们允许您定义自动完成的数据列表，为数据安全生成密钥，并输出数据的计算结果。

DATALIST 标签:定义每个描述术语子元素

标签通过表 15-3 中所示的列表参数指定一个元素使用的预定义选项列表。<数据表>标签用于在<输入>元素上提供自动完成功能。当提供<数据列表>时，一旦用户开始输入数据，就会看到预定义选项的下拉列表出现。要将<输入>元素列表参数与<数据列表>元素绑定在一起，请在<数据列表>标签中使用 id 参数，如以下 HTML5 标记所示:

<input list="italiancars">
 <datalist id="italiancars">
  <option value="Ferrari">
  <option value="Maserati">
  <option value="Bugatti">
  <option value="Lamborghini">

</datalist>

接下来，让我们看看一个密钥生成器标签。

KEYGEN 标签:定义每个描述数据子元素

标签允许您指定一个安全密钥对生成器字段，用于保护表单数据。提交表单时，私钥存储在本地，公钥发送到服务器。

下面是一个示例表单和用户名输入，它使用这个标记和一个标记向服务器提交安全密钥，如下面的 HTML5 标记所示:

<form action="private_keygen.asp" method="get" name="keyform">
 Username: <input type="text" name="user_name">
 Encryption: <keygen name="security_key">

 <button type="submit" value="Submit Secure Key" form="keyform" name="K1"/>
</form>

表 15-9 显示了< keygen >标签支持的六个 HTML5 参数。

表 15-9。

Six Parameters for Secure Key Generation

| HTML5 KeyGen 标记参数 | HTML5 KeyGen 标记参数的用法 | | --- | --- | | 自（动）调焦装置 | 页面加载时指定的 keygen 自动对焦 | | 形式 | 密钥生成所属的指定形式 | | 有缺陷的 | 指定的 keygen 元素将被禁用 | | 密钥类型 | 为密钥指定了安全算法 | | 名字 | 定义 KeyGen 元素名称 | | 挑战 | 指定提交时挑战元素的值 |

接下来，我们来看看输出

标签。

输出标签:定义每个描述数据子元素

标签表示计算的结果，例如使用数据字段执行的计算，如示例中所做的，或者来自更复杂的 JavaScript 计算。表 15-10 显示了新的<输出>标签(元素)在 HTML5 中支持的三个参数。

表 15-10。

Three Parameters for Output Generation

| HTML5 输出标记参数 | HTML5 输出标记参数的用法 | | --- | --- | | 为 | 指定计算结果与该计算中使用的元素之间的关系 | | 形式 | 指定输出所属的表单 | | 名字 | 定义输出元素名称 |

让我们创建一个将两个数字相加的

构造，使用字段收集数据，标签中的 oninput 事件进行简单的`output=inputA+inputB`计算，使用

标签保存输出。使用 o.value (form oninput)和 name="o "(输出标记参数)将和

构造连接在一起。

对此的 HTML5 标记如下所示:

<form name="add2numbers" onsubmit="return false"
      oninput="o.value = parseInt(a.value) + parseInt(b.value)">
      <input name="a" type="number" step="any"> +
      <input name="b" type="number" step="any"> =
      <output name="o"></output>
</form>

接下来，我们将开始用 HTML5 定义区域。

摘要

本章讨论了 HTML5 和以前版本中的表单标签支持，包括

、、、、<fieldset>、<legend>、<select>、<option>、</option>、<optgroup>、<button>、<datalist>、<keygen>和<output>标签。在下一章中，您将了解 HTML5 标签支持 HTML5 文档和应用中的内容定位，以及使用像素或百分比定义 HTML5 中的区域，从而使您的 HTML 设计更加精确！</output></keygen></datalist></button></optgroup></select></legend></fieldset>

十六、HTML5 位置：文档布局和文本跨度

让我们来谈谈 HTML5 中允许开发人员对元素进行分组并控制内容位置的标签。我们还将讨论一些标签，这些标签允许对分组的元素进行样式化，就像它们是一个单一的功能单元一样。这些标签包括分部

标签和跨度标签。这些标签本身什么也不做；它们必须被定型。

本章着眼于 HTML5 中实现高级内容设计技术的强大标签。我们从标签开始，因为它只影响文本元素，然后我们进展到更复杂和更强大的标签。和标记没有 HTML5 参数，因为它们使用 CSS3 设置样式。本章没有表格，只有 HTML5 标记示例。

定义文本跨度:使用 SPAN 标签

标签用来将 HTML5 文档中的行内元素分组。标签本身并不提供视觉效果，它必须使用 CSS3 进行样式化或者使用 JavaScript 进行操作。因此，标签为开发人员提供了一种添加外部访问的方式，以便能够挂钩到使用起始标签和结束标签封装的文本内容、图像或文档部分。

下面的 HTML5 标记示例使用标记和全局 HTML5 样式参数来为句子的一部分着色:

<p>Ferrari's come in a <span style="color:red">Ferrari Red</span> color</p>

标签和标记之间的主要区别在于标签是内嵌使用的(在其他标签的内部)，而

标签创建块构造或深度嵌套的 HTML5 标记构造(看起来像 HTML5 标记的块，因此得名“块级构造”)。

HTML5 中的标记没有本地或本机参数；但是，有一些全局 HTML5 参数通常与标签一起使用。其中包括一个 id 或一个 class 参数，用于访问，使用外部 CSS3 定义，以及 title 标签，允许鼠标悬停弹出窗口附加到跨越的文本元素。以下是使用上一个示例中的 HTML5 标记的这些参数的示例:

<p>The Ferrari La Ferrari Model will usually come painted in the
  <span id="myspan" title="This text will pop-up when you mouse-over span">
    Ferrari Red color
  </span>, unless you order it in some custom (other than red) color.</p>

span#myspan { color:red; } /* Externalized CSS3 linked via a .CSS file */

span 也可以和 imagery 一起使用！这在使用事件处理程序参数时尤其有用。用一个配置为使用 onMouseDown、onMouseOut 和 onDblClick 的标签包围标签，以允许您的用户单击一个图像并将法拉利图像变为蓝色，双击一个图像将法拉利图像变为黄色，然后将鼠标从图像上移开，以恢复默认的红色法拉利图像。这是在以下 HTML5 标记中完成的:

<p>Click image to see a Blue Ferrari, Double-Click for a Yellow Ferrari:</p>
  <span onMouseDown="document.ferrarigif.src='blueferrari.gif'"
        onMouseOut="document.ferrarigif.src='redferrari.gif'"
        onDblClick="document.ferrarigif.src='yellowferrari.gif'">
    <img src="redferrari.gif" height="240" width="480" name="ferrarigif">
  </span>

将与语言相关的参数 dir(文本方向)和 lang(语言定义)与标签一起使用也是有用的，因为主要用于影响文本元素，这些元素受语言和文本方向的影响。

您可以通过以下 HTML5 标记使用 dir 参数来更改中的文本方向:

<p>Ferrari comes in a standard <span dir="ltr">Ferrari Red</span> color</p>

您还可以通过使用配置来定义文本范围中使用的语言。假设法拉利在意大利非常性感，如以下 HTML5 标记所示:

<p>Ferrari's are considered <span lang="it">Molto Sexy</span> in Italy</p>

接下来，让我们看一下标签，以及如何使用这个标签来构建复杂的 HTML5 文档设计，将 HTML5 结构封装在已经分配了 id 或 class 参数的标签中。首先，让我们看看在 CSS3 应用中使用 id 参数和 class 参数的区别，标记广泛地利用了这两个参数。

id、名称和类别的使用

随着 HTML5 在用于识别设计元素(标签)的三个不同参数方面的发展，通常会有一些混乱。这些是 id、名称和类。我试图在本章的这一节中阐明这些标签中的每一个最适合做什么，因为

和在很大程度上依赖于这些标签来识别它们以进行外部处理，因为这两个标签本身不做任何事情。

标识符:为 JavaScript 和片段使用一个 id

id 参数是标识符的缩写；更准确地说，它是片段标识符的简称。它允许您使用一个 URL 加上一个散列符号(或井号)" # "片段名称转到文档的特定部分。这是通过 URL 和 id="fragment-id-value "参数中使用的值之间的#字符来完成的。这是一个片段 URL 的示例:

http://www.website-name-here.com/webpage-name.html#fragment-id-value

它是使用

标签:

在 HTML5 标记中创建的

<p id=fragment-id-value>This is a paragraph of text you want to jump to</p>

在您当前所在的同一文档中，仅使用片段 id 值引用它，在

<a href="#fragment-id-value">Click here to go to this fragment/section</a>

值得注意的是，对于任何 XHTML、HTML 或 HTML5 文档，一个 id 名称只能使用一次。重复的 id 标记会导致页面验证失败，并且在 JavaScript 中使用 id 时会产生负面影响。除了定义文档片段导航之外，id 参数对于定义使用 JavaScript 处理的文档元素也很重要。对 CSS 等非标准应用使用 id 可能会对此产生潜在的干扰，因此对 CSS3 选择器定义使用 class 参数。

CSS3 可以通过使用井号(#)来选择 Id 以对它们应用单独的样式，但是 JavaScript 也依赖于 id，因为它使用了。js 外部化的 JavaScript。

出于这个原因，我建议将这三个不同的赋值参数的用法分离为它们最常用的用法:用于 JavaScript 和片段导航的 id；CSS3 选择器指定的类；以及表单、服务器和数据库使用的名称(远程数据服务器访问)。这样，您就不会搞不清使用参数的目的了！

类:使用类对 CSS3 选择器进行分类

就像用于 CSS3 一样，class 也可以用于 JavaScript 编程。class 参数与 id 参数非常不同，因为 class 可以在同一个 HTML 文档中多次使用。内容(元素、标签、标记)和表现(CSS 样式)的分离使得 CSS 支持的 HTML5 如此强大。开发人员不了解他们可以使用类的全部范围，因为许多人已经习惯于使用(简单得多的)id。

值得注意的是，使用相同的 class 参数，不仅类可以被多次使用，而且在 HTML5 元素(tag)中可以使用多个类名称！下面是一个使用 HTML 标记和 CSS 定义的例子:

<p>Ferrari automobile's are considered to be:
  <span lang="it" class="left2right asexycolor">Molto Sexy</span>
   in most parts of Italy!
</p>
--------------------------CSS3 Selector Definition Below-----------------
.left2right { direction: ltr; }
.asexycolor { color:     red; }

第一段代码是有效的 HTML 它显示了在单个类参数中使用两个单独的类，使用空格来分隔两个类名。如果使用有效，这种技术可以大大减少 CSS3 样式表的数据量。值得注意的是，您可以在同一个 HTML5 元素上同时使用 id 和类，以最佳方式引用 JavaScript (id)和 CSS3 样式表(class)。

名称:命名表单、控件和 UI 元素

name 属性最常用于在表单提交中发送数据，以及将不同的表单组件与表单连接在一起，正如您在第十五章中广泛观察到的。由于参数约定略有不同，不同的控件对这些相似的(名称和 id)参数的响应也有所不同。

您可以拥有多个具有不同 id 属性的单选按钮，但需要使用相同的 name 参数值来正确定义它们的分组，以便用户只能选择一个选项。

最终，只要正确实现了类和 id，使用 name、id 还是 class 完全取决于您，并且在测试时，HTML5 在所有不同的浏览器上都能同样工作！关于如何以及何时利用这些参数，这实际上只是个人选择的问题。

定义文档区域:使用 DIV 标签

division

标签的用法很像 span 标签，除了它定义的区域是一个正方形区域，称为块，而不是一个线(或内嵌)区域，通常用文本来定义。我经常使用标签将图像和动画“缝合”在一起，以创造无缝的用户体验。与语义标签不同，(和)标签对搜索引擎来说是不可见的，并且只与它们周围的内容的定位和样式有关，并不影响内容本身。您应该将这些设计(定位、样式和对齐)标签与语义标签结合使用，以获得视觉上令人惊叹且语义上准确的 HTML5 结果。

显示特性:块、内嵌和无

正如我前面提到的，in 是一个内嵌标签，

是一个块标签。这些恰好描述了 CSS3 的 display 属性，该属性也可以设置为 none，从而对 HTML5 呈现引擎完全隐藏该标签(元素)。这与 hidden 属性不同，hidden 属性呈现元素在设计中占据的空间，但使其不可见(透明)。none display 属性实际上将该元素从设计中完全删除，因此为了确保语义标签不会影响视觉设计，可以将它们的 display 属性设置为 none！

还有与列表和表格相关的自定义显示类型，以及一些混合类型，如 flex 和 run-in，它们在块和内嵌之间架起了桥梁，实现了高级样式。

除了 division 之外，使用该块显示属性的元素示例包括段落

标签、页眉

标签、页脚标签、节标签、标题 1-6

到

标签以及表单

标签。

使用内嵌显示属性的元素示例(除此之外)包括锚点

默认为 none display 属性的一些元素的例子包括脚本

Division 或 DIV 标签:核心属性

标签定义了 HTML5 文档的一部分。这是通过使用标签在块级别对元素进行分组，然后使用 CSS3 样式定义在容器内格式化这些元素来实现的。事实上，元素最常用作 HTML5 视觉设计的通用容器，CSS3 在其中对齐、定位、z 顺序、显示/隐藏、淡入淡出、为该部分中包含的所有 HTML5 内容分配效果和样式。

让我们使用标签为前面的示例添加背景色，如下面的 HTML5 标记所示:

<div style="background-color:yellow">

 <p>Click image to see Blue Ferrari, Double-Click for Yellow Ferrari:</p>
  <span onMouseDown="document.ferrarigif.src='blueferrari.gif'"
        onMouseOut="document.ferrarigif.src='redferrari.gif'"
        onDblClick="document.ferrarigif.src='yellowferrari.gif'">
   <img src="redferrari.gif" height="240" width="480" name="ferrarigif">
  </span>
 <p>Everything in this document division will have yellow behind it!</p>

</div>

这将在交互式图像上方和下方的所有段落文本以及图像本身的后面突出显示黄色。正如您所看到的，您已经通过使用标记作为一个 division 容器，为所有这些包含的文档元素添加了一个全局样式。

对元素进行样式化的更常见的方法是使用 class 参数为其分配一个类名，如下所示:

<div class="example">
 <p>Click image to see Blue Ferrari, Double-Click for Yellow Ferrari:</p>
  <span onMouseDown="document.ferrarigif.src='blueferrari.gif'"
        onMouseOut="document.ferrarigif.src='redferrari.gif'"
        onDblClick="document.ferrarigif.src='yellowferrari.gif'">
   <img src="redferrari.gif" height="240" width="480" name="ferrarigif">
  </span>
 <p>Everything in this document division will have yellow behind it!</p>
</div>
------------
div.example { background-color :yellow; position: absolute;
              top: 108px; left: 120px; width: 500px; height: 500px;
              z-index: -1; opacity: 0.5; border: solid 1px #000000; }
.example    { background-color: yellow; }

上面的代码添加了背景色，定位，设置 50%的透明度，设置背景中的 z 索引，并在分割线周围绘制一个单像素的纯黑色边框。我还展示了一个例子，说明带有 class="example "的任何元素是如何以黄色作为背景色的，以显示类的强大功能。

虽然这不是一本 CSS3 的书，但我在这一章和第十八章中向你展示了一些 CSS3，因为有必要向你展示 CSS3 和 HTML5 标记之间的这座物质桥梁，并向你展示某些标签，如< div >、< style >、< link >和< span >如何与 CSS3 协同工作。

值得注意的是，标签在浏览器(或操作系统)中呈现时的默认行为是在元素之前和之后放置一个换行符。这可以由使用 CSS3 的开发人员来更改，而且经常如此。事实上，接下来要看的是我如何使用标签和 CSS3 无缝地将标签素材缝合在一起，用于我的多媒体相关 HTML5 内容生产管道。

无缝图像拼接:结合 CSS3 使用 DIVs

既然我们已经看了一些不太高级的例子，我应该给你看一个更高级的例子。让我们看看如何使用 div 来组装 iTVset.com 站点的各种图像和动画组件，以及覆盖 JavaScript 时钟元素，所有这些都是使用标签完成的。JavaScript 包含在第十七章中，CSS3 包含在第十八章中。图 16-1 显示了我们接下来要看的 HTML5 标记的结果。这是使用 CSS3 样式表进行样式化的，我们将在后面探讨。

图 16-1。

使用 DIVs 和 CSS3 拼接在一起的 HTML5 设计

正如您在下面的 HTML5 标记中看到的，我使用了包含标签的标签，使用 class 属性来处理这些标签，使用 id 属性来引用 JavaScript。第十九章中介绍了<画布>标签(id=“时钟”)。

<div class="c">
  <img src="bk2.png" class="c2" />
  <img src="bk3.gif" class="c3" />
  <img src="bk4.png" class="c4" />
</div>
<div class="d">
  <img src="bk5.png" class="c5" />
  <img src="bk6.png" class="c6" />\
</div>
<div class="h"></div>
<div class="tx"></div>
<div class="p"><p>TEXT CONTENT FOR THE HTML5 DOCUMENT IS IN HERE</p></div>
<div class="j"></div>
<div class="s"></div>
<div class="bu"></div>
<div class="t">
  <img src="tl.png" class="tp1" />
    <!-- TOP UI LINKS ANCHOR TAG MARKUP -->
</div>
<div class="l">
  <img src="lt.png" class="lt1" />
    <!-- LEFT UI LINKS ANCHOR TAG MARKUP -->
  <img src="lb.png" class="lt2" />
</div>
<div class="r">
  <img src="rt.png" class="rt1"/>
    <!-- RIGHT UI LINKS ANCHOR TAG MARKUP -->
  <img src="rb.png" class="rt2"/>
</div>
<div class="b">
  <img src="bl.png" class="bt1"/>
    <!-- BOTTOM UI LINKS ANCHOR TAGS MARKUP -->
  <img src="b.png" class="bt2" />
</div>
<div class="time">
  <canvas id="clock" width="500" height="500"></canvas>
</div>

为了创建您在图 16-1 中看到的内容，我使用 CSS3 为不包含< img >标签的< div >标签定义了背景图像属性。我使用绝对定位，并通过使用 top、left、width 或 height 属性来定义精确的像素位置。我使用 fixed 和 no-repeat 属性控制图像拼贴，使用带有这些名称的 CSS3 属性控制不透明度、背景颜色和边框。您可以查看 DIV classname 以了解 CSS3 定位和加载每个图像区域的内容。

div.time {position:absolute;top:108px;left:120px;width:500px;height:500px;}
div.p    {position:absolute;top:-216px;left:694px;width:446px;height:400px;}
div.tx   { position:absolute; top:150px; left:680px; width:460px;
           height:400px; background-color:#000; opacity:0.35;
           border:solid 1px #ccc; }
div.c    { position:absolute;top:48px;left:0px;width:1280px;height:624px; }
div.c img.c2 {position:absolute;left:0px;width:270px;height:80px;top:0px; }
div.c img.c3 {position:absolute;left:270px;width:640px;height:80px;top:0px;}
div.c img.c4 {position:absolute;left:910px;width:370px;height:80px;top:0px;}
div.d    { position:absolute;top:128px;left:0px;width:1280px;height:544px; }
div.d img.c5 {position:absolute;left:0px;width:1280px;height:480px;top:0px;}
div.d img.c6 { position:absolute; left: 0px; width: 1280px; height: 64px;
               top:480px; }
div.s    {position:absolute; left:0px; width:1280px; height:56px; top:608px;
          background: no-repeat; background-image: url(s.png); }
div.h    {position:absolute; left:0px width:1280px; height:128px; top:128px;
          background: fixed no-repeat; background-image: url(sy.gif); }
div.j    { position:absolute; left:176px; width:96px; height:720px; top:0px;
           background: fixed no-repeat; opacity: 0.6;
           background-image: url(jy.gif); }
div.bu   { position:absolute; left:525px; width:44px; height:720px; top:0px;
           background: fixed no-repeat; opacity: 0.4;
           background-image: url(bu.gif); }
div.t    { position:absolute; top:0px; left:0px; width:1280px; height:48px;
           background-image: url(bk1.png); }
div.t img.tp1 { position:absolute;left:18px;width:56px;height:45px;top:2px;}

div.t img.tp2 { position: absolute; left: 1187px; width: 56px; height: 45px;
                top:2px; }
div.l    { position: absolute; top: 0px; left: 0px; width: 64px;
           height: 652px; background-image: url(bkg7.jpg); }
div.l img.lt1 { position: absolute; left: 18px;width: 45px; height: 56px;
                top: 64px;}
div.l img.lt2 { position: absolute; left: 18px; width: 45px;
                height: 56px; top: 594px; }
div.b    { position: absolute; top: 664px; left: 0px; width: 1280px;
           height: 48px; background-image: url(bk7.png); }
div.b img.bt1 { position: absolute; left: 18px; width: 56px;
                height: 45px;top: 3px; }
div.b img.bt2 { position: absolute; left: 1187px; width: 56px;
                height: 45px; top: 3px; }

接下来，让我们看看 JavaScript

摘要

本章讲述了在 HTML5 和早期版本中定义区域的标记，包括和标记。下一章关注 HTML5 JavaScript

十七、HTML5 脚本：使用 JavaScript

现在我们来讨论 HTML5 中的

在本章中，您将看到 HTML5 中的

使用 JavaScript:html 5 脚本标签

表 17-1。

Six HTML5 | 脚本标记参数 | 脚本标记参数的用法 | | --- | --- | | 异步(HTML5 中的新功能) | 指定 JavaScript 将异步执行；这是用于外部脚本的 | | 字符集 | 指定外部 JavaScript 文件中使用的字符集编码 | | 推迟 | 指定当页面完成解析时将执行 JavaScript 这仅适用于外部 JavaScript 文件 | | 科学研究委员会 | 定义 JavaScript 的源文件 | | 类型 | 定义 JavaScript 媒体(MIME)类型 | | xml:空格(无 HTML5) | 确定保留空白(XHTML) |

对于在浏览器中禁用 JavaScript 的用户，或者拥有不支持客户端 Java 脚本的浏览器或操作系统的用户，包含

元素非常重要。

JavaScript 执行:解析同步

有几种方法可以执行外部 JavaScript 呈现 HTML5 标记和 CSS3 样式之前，呈现 HTML5 标记和 CSS3 样式之后，以及呈现 HTML5 标记和 CSS3 样式期间。使用表 17-1 中的参数控制 JavaScript 执行与 HTML5 和 CSS3 标记解析的同步。

如果 async 和 defer 参数都不存在，那么在浏览器继续解析您的标记之前，JavaScript 是第一个获取和执行的素材。该“第一”参数未在表 17-1 中显示。它只是通过不在<脚本>标签中设置任何参数来设置，因此这是 JavaScript 处理的默认方式(首先)。这是因为 JavaScript 经常需要设置 HTML5 渲染环境和文档结构；因此，JavaScript 需要在任何其他元素被呈现到系统内存之前被执行到内存中。如果从编程的角度考虑，这是非常合理的，因为 JavaScript 在 HTML5 标记之前处理，而 html 5 标记在样式化之前处理！

如果 HTML5 中的新异步参数出现在

如果在

JavaScript 格式:MIME 类型和字符集

表 17-1 中的其他参数处理数据格式，它定义了 JavaScript 代码本身。JavaScript MIME 类型(现在称为媒体类型)应该是以下组合之一:text/jscript、text/javascript 或 text/ecmascript。这些类型中的任何一种都可以在当今广泛使用的所有流行浏览器和操作系统上运行(Mozilla Firefox、Google Chrome、Apple Safari 和 Opera)。这三种类型中最常用的是 text/javascript MIME 类型，因为它最清楚、最简单地定义了。JS 文件。

如果您正在创建一个应用，您可以用单词 application 替换单词 text。如果您有兴趣查看媒体类型的完整列表，请访问以下 URL:

http://www.iana.org/assignments/media-types/media-types.xhtml

以下三种也是有效的常用 MIME 类型:application/x-javascript、application/ecmascript 和 application/javascript。

在 HTML5 中，字符集通常被指定为 UTF-8，除非您所在的国家使用自定义字符集，在这种情况下，您使用支持非罗马字符(如亚洲字符)的 UFT-16。

内嵌 JavaScript 代码:使用脚本标签

既然我已经在第四章第四章中向您展示了如何外部化 JavaScript 代码素材，那么让我们看看如何使用一个<脚本>标签来添加 JavaScript 逻辑，以运行第十六章的< canvas id="clock > HTML5 标记中引用的时钟。这样，您使用 CSS3 和 class 参数，并使用 id 参数通过 document.getElementById('clock ')引用 JavaScript 打电话。JavaScript 代码位于<脚本>标签内，如以下 HTML5 标记示例所示:

<script type="text/javascript" charset="UTF-8">

var hour_hand=null, minute_hand=null, second_hand=null, ctx=null,
    degrees=0, clock_face=null, clock_face=null, HEIGHT=500, WIDTH=500;
function init_itv() {
var canvas = document.getElementById('clock');
  if(canvas.getContext('2d') )       {
    ctx = canvas.getContext('2d');
    hour_hand = new Image();
    hour_hand.src = 'hour_hand.png';
    minute_hand = new Image();
    minute_hand.src = 'minute_hand.png';
    second_hand = new Image();
    second_hand.src = 'second_hand.png';
    clock_face = new Image();
    clock_face.src = 'clock_face.png';
    clock_face.onload = imgLoaded;    }
  else                              {
    alert("Canvas not supported!"); }
}
function clearCanvas() { ctx.clearRect(0, 0, HEIGHT, WIDTH); }
function imgLoaded()   { setInterval(draw, 500);             }
function getRequiredMinuteAngle(currentTime) {
  return Math.floor(((360/60) * currentTime.getMinutes()),0); }
function getRequiredHourAngle(currentTime)   {
  return Math.floor(((360/12) * currentTime.getHours()),0);   }
function getRequiredSecondAngle(currentTime) {
  return Math.floor(((360/60) * currentTime.getSeconds()),0); }
function draw()  {
  var currentTime = new Date();
  clearCanvas();
  ctx.drawImage(clock_face, 0, 0);
  ctx.save();
  ctx.translate(HEIGHT/2, WIDTH/2);
  rotateAndDraw(minute_hand, getRequiredMinuteAngle(currentTime));
  rotateAndDraw(hour_hand, getRequiredHourAngle(currentTime));
  rotateAndDraw(second_hand, getRequiredSecondAngle(currentTime));
  ctx.restore();    
}
function rotateAndDraw(image, angle)  {
  ctx.rotate(angle * (Math.PI / 180));
  ctx.drawImage(image, 0-HEIGHT/2, 0-WIDTH/2);
  ctx.rotate(-angle * (Math.PI / 180));
}

</script>

标签中所有函数访问的全局变量首先在顶部声明，局部变量在每个函数的顶部(内部)声明。如果你想学习 JavaScript，一定要从 Apress 获得一个好的 JavaScript 标题，因为这本书只关注 HTML5 标记，没有涉及 JavaScript 或 CSS3 的任何重要细节。</根>/

图 17-1 显示了在< canvas >标签内运行的时钟 JavaScript(在第十九章中有所涉及)，并使用类似< canvas id="clock" >的 canvas 标签内的 id 参数进行引用。

图 17-1。

JavaScript document.getElementById('clock'); wired to HTML5 element to create iTVset.com clock

正如你在

隐藏 JavaScript:做还是不做？

当 HTML 浏览器首次出现时，并不是所有的浏览器都支持 JavaScript，正如现在并不是所有的浏览器都支持 WebGL2(见第十九章)。过去有一个惯例，将 JavaScript 隐藏在带有 HTML 注释的<脚本>标签中，因此 JavaScript(外部或内联)元素对于不理解该元素的解析引擎来说似乎是空的。理解 JavaScript 的 HTML 引擎会忽略这些注释，并正确地处理(编译和执行)JavaScript 代码。标记被解析，而代码被编译和执行(或者处理，用一个术语来说)。

HTML 注释:使用隐藏 JS 代码

十多年来一直沿用的惯例是将 JavaScript 代码隐藏在 HTML 注释中，就像这样:

<script>
        <!--
             JAVASCRIPT CODE
         -->
</script>

现在在 HTML5 社区中有一种讨论，认为这是不必要的，甚至是不可取的，因为 JavaScript 已经被接受为 HTML 事实上的标准语言，而且因为有这么多不同版本的 XHTML 和 HTML 可以解析注释和符号，并且可能会曲解它们。目前的共识似乎是取消这种做法，不在脚本中使用任何注释。

XHTML 注释:使用隐藏 JS 代码

对这种约定的一些讨论表明，为了正确地支持 XHTML，您应该使用不同形式的注释，包括在不同类型的(以 XML 为中心的)注释约定中使用[CDATA [code-here] ]代码封装方法。这看起来像下面这样:

<script>
        //<![CDATA[
                   JAVASCRIPT CODE
        //]]>
</script>

我对所有这些的看法是，如果你正在为 HTML5(现在是遗留代码，正如你将在第二十三章看到的)或 HTML 5.1 开发，你不应该担心 XHTML 1.x 或 HTML 2/3/4 解析引擎。由于廉价 HTML5 设备的广泛扩散，它们太老了，不用担心支持问题。

摘要

本章讨论了

十八、HTML5 样式：使用 CSS

现在让我们来看看 HTML5 中的

在本章中，你将看到 HTML5 中的

级联样式表:CSS 的历史

自从 20 世纪 80 年代 SGML(标准通用标记语言)构思之初，样式表就已经被用来对标记进行样式化。HTML 样式表语言的一个要求是样式表能够来自万维网上的不同资源。出于这个原因，现有的样式表语言，如 DSSSL 和 FOSI，并不合适。另一方面，CSS 允许文档的样式受到多个不同样式表的影响。这是通过样式表定义的“级联”来完成的。CSS 或级联样式表随后被开发出来，以提供用于 HTML 和 XHTML 的样式表。在第一部分，我将介绍 CSS 的历史和未来。

CSS 最初是由 Opera 的 CTO hkon Wium Lie 在 1994 年 10 月 10 日提出的。kon Wium Lie 与蒂姆·伯纳斯·李在欧洲粒子物理研究所一起工作，在那里，万维网的许多其他样式表语言大约在同一时间被测试。最初的万维网联盟(W3C) CSS1 提案发布于 1996 年。伯特·波斯也参与了这项提议。他是 CSS1 的合著者。他和 kon Wium Lie 被视为 CSS 的共同创造者。

CSS2 于 1997 年 11 月 4 日提出，并于 1998 年 5 月 12 日作为 W3C 推荐标准发布。CSS3 是 1998 年提出的；至今仍在开发中。

CSS2 包括核心功能，如元素的绝对、相对和固定定位，z 索引(3D)，媒体类型，双向文本，字体属性，阴影，以及对听觉(音频)样式表的支持，这些都被 CSS3 语音模块所取代。

CSS3 被分成几个独立的文档，称为模块。每个模块都添加了新的功能或扩展了 CSS2 中定义的特性。CSS3 也向后兼容 CSS2。最早的 CSS3 提案发布于 1999 年 6 月。CSS3 目前正在作为一个规范进行开发。

CSS4 应该在 CSS3 完成后实现。没有统一的 CSS4 规范，因为 CSS3 和 CSS4 被分割成独立的模块。有 4 级模块，而不是一个统一的规格建议。第 4 级模块规范可统称为 CSS4。

使用 CSS3 和 HTML5:样式标签

标签定义了一个 HTML 文档的样式信息，它不是使用 CSS 文件资源在外部定义的。它还覆盖本地文档中外部主 CSS3 定义中定义的样式；出于某种原因，这偏离了样式规范。在

这些

遗留 HTML 或 HTML5 中使用的

media 参数允许您指定 CSS3 样式为其优化的媒体设备。样式当然是定制的，以匹配设备类型，如打印机、iTV 设备或智能手机屏幕，因此这是 HTML5

值字符串(在引号内)可以接受几个值，包括布尔运算符，如 AND、NOT 和 OR(或使用逗号，而不是关键字)。

媒体参数支持的设备关键字值包括听觉语音合成器；用于盲文反馈设备的盲文；手持设备(小屏幕、有限带宽设备，如电话、PDA 或迷你平板电脑)；DLP、LCD 或 LED 投影仪的投影；打印机打印、打印预览模式或打印页面。电脑屏幕的屏幕；tty 用于电传打字和媒体，使用固定间距的字符网格；以及用于 iTV 电视机和类似的电视机相关设备的电视，其特征在于大屏幕、HD 和 UHD 分辨率以及有限的滚动能力。

还可以指定像素数据值来指定目标显示区域或设备的宽度或高度，包括最小宽度、最大宽度、最小高度、最大高度、设备宽度和设备高度。您还可以指定方向(纵向、横向)、纵横比、设备纵横比、单色、分辨率、网格或扫描、颜色和颜色索引。如果需要，还可以为这些参数指定最大值和最小值范围。

CSS3 格式:MIME 或媒体类型指定

type 参数(见表 18-1 )处理你的数据格式，它定义了 CSS3 代码的 MIME 类型。CSS MIME 类型(现在称为媒体类型)应该被指定为 text/css。这种类型指定适用于所有广泛使用的浏览器和操作系统(Mozilla Firefox、Google Chrome、Apple Safari 和 Opera)。

如果您有兴趣查看文本/css 媒体(MIME)类型的完整定义，请访问以下网站:

https://www.iana.org/assignments/media-types/text/css

在 HTML5 中，字符集通常被指定为 UTF-8。如果您决定指定一个字符集参数(当然是使用标签)，那么您也可以对 CSS3 文件使用 US-ASCII 或 ISO-8859-X 字符集。

作用域参数:标记本地 HTML5 样式

有了新的作用域参数，现在有三个级别的 CSS3 本地化。全局 CSS3 样式可以外部化，或者在导入(链接到)这些 CSS 文件的任何文档中全局定义。使用部分中的

下面是一个在 HTML5 文档的节中声明的限定了作用域的样式的示例:

<!DOCTYPE html><html>
<head>
 <title>Locally Scoped CSS3 Targeting DIV in Semantic Section</title>
</head>

<body>

 <section id="DIV Tag Locally Scoped Style Definition">
  <div>
   <style scoped>
     h1 {color:green;}
     p  {color:brown;}
   </style>

   <h1>This is a heading which has been locally styled green.</h1>
   <p>This is a paragraph which has been locally styled brown.</p>
  </div>
 </section>

</body>

</html>

内嵌 CSS3 代码:使用样式参数

虽然

<!DOCTYPE html><html>
<head>
 <title>Locally Scoped CSS3 Targeting DIV in Semantic Section</title>
</head>
<body>
 <section id="DIV Tag Locally Scoped Style Definition">
  <h1 style="color:green">Heading which has been in-line styled green</h1>
  <p style="color:brown">Paragraph which has been in-line styled brown</p>
 </section>
</body></html>

我试图让你了解 CSS 和 JavaScript 如何与 HTML5 一起工作而不偏离主题，因为这些主题非常复杂，应该有自己的书来掌握它们的复杂性。我只有几百页来涵盖 120 多个 HTML 5 和 5.1 标签，所以我必须专注于这些标签和它们的参数。

也就是说，我继续建议你购买专业主题的书籍，比如 CSS3、JavaScript、WebGL、Web Speech API、Web RTC 和新媒体内容制作基础。我在出版社( www.apress.com )有一个新媒体内容制作基础系列。如果你感兴趣，在网站上搜索我的名字。

摘要

在这一章中，你学习了一些 CSS 的历史。您还了解了 HTML

在下一章中，您将看到 HTML5 Canvas、WebGL 和 WebGL 2，它们是使用

标签访问的。

十九、HTML5 实时渲染:使用`<canvas>`标签

现在让我们讨论 HTML5 中的

标签，它允许您使用 canvas，这是一种高级的实时渲染表面，您可以使用 JavaScript 代码直接实时访问它。因为

标签指定(在内存中创建)了一个实时的绘图表面，所以在本书中它会向你展示它能为你的 HTML5 应用和文档做什么。HTML5 内容创建管道变得更加复杂(设计、标记、样式、编程、实时渲染和发布)。其他操作系统，如 Android，也有画布功能。i2D 和 i3D 应用和游戏需要画布，因为它的设计速度足以开发游戏应用或 OpenGL 交互式 3D。

使用 CANVAS 标签:HTML5 的新功能

HTML5

元素提供了一个绘图表面——像颜色、数字 2D 或 3D 蚀刻草图——通过使用脚本语言来绘制图形，如动画图形或交互式图形。在 HTML5 中，画布使用 JavaScript 作为编程语言；在 Android OS 中，Java 是编程语言。元素或标签是高速图形的专用容器，很像某种图形引擎。您必须使用 JavaScript 来实际绘制实时图形表面并与之交互。

HTML5 Canvas 具有绘制框、圆、路径、文本、线、点、多边形、样条线和图像的方法。这些画布元素可以被着色和动画化。他们可以绘制数据图表，以创建线形图和条形图等演示辅助工具。

画布对象可以逼真地移动；一切皆有可能——从重力和摩擦力导致弹跳衰减的真实弹跳球，到复杂的互动游戏。

Canvas 对象与 JavaScript 事件或任何用户操作交互响应:按键、鼠标单击、按钮单击、触摸屏手指移动和类似的事件处理逻辑，就像 HTML5 标记通过 onMouseDown 事件参数使用的一样。

Canvas 为 HTML5 游戏应用提供了许多可能性。事实上，如果您足够仔细地编写代码以节省处理能力，可以同时使用多个 HTML5

元素。

HTML5 中使用的两个

标签参数如表 19-1 所示。它们相对简单。它们定义了画布的宽度和高度。您还可以使用全局 HTML id 参数将您的名称分配给 Canvas 元素，以便可以从您的 JavaScript 中引用它。你可以在第十七章时钟中看到这一点。

表 19-1。

HTML5 <画布>标签参数

| Canvas parameters | Usage of canvas parameters | | --- | --- | | width | Specify the canvas width value in pixels. | | height | Specify the canvas height value in pixels. |

接下来，让我们看看如何在 HTML5 文档和应用中声明一个

标签或元素。

声明 HTML5 画布:使用参数

元素需要正确定义一些参数；否则，它不能用作绘图表面。它需要有两个空间维度——宽度和高度。此外，它必须有一个 id 属性，以便可以使用 JavaScript 引用它。

默认情况下，

元素没有边框，没有内容；简直就是一个空面。让我们使用一个全局样式参数来添加一个边框，以便您能够更好地可视化这个画布在屏幕上的位置。由于默认的画布颜色是黑色，我们将使用三个像素宽的红色边框。(当然，如果文档的背景色是白色的，无论如何您都能看到画布！)代码如下所示的 HTML5 标记:

<!DOCTYPE html><html>
<head>
 <title>Declaring an SD Resolution Canvas for Use in GamePlay</title>
</head>
<body>
 <section id="A Game Play HTML5 Canvas Declaration Example">
  <canvas id="gamePlayCanvasSample" width="720" height="480"
          style="border: 3px solid #FF0000; top: 0; left: 0;">
       If you are seeing this message, then your HTML5 Browser,
       or operating system, doesn't support the Canvas Element!
  </canvas>
 </section>
</body>
</html>

注意，我在样式参数中将

定位在 0，0 处。这为画布容器定位、调整大小和命名，并给它一个漂亮的边框，但它仍然是一个空画布，就像他们在艺术界说的那样。记住

元素本身没有绘图能力，就像真正的画布需要画笔和颜料一样。画布只是平面设计的容器；您必须使用 JavaScript 来实时绘制图形。

JavaScript 有一个 getContext()方法来返回一个对象，该对象提供在画布上进行绘制的方法和属性。这些方法(函数)和属性(变量)表示画布表面在任何时候的当前状态，这在逻辑上被称为对象的上下文，因此是 getContext()方法的名称。例如，有一个 save()来保存当前上下文，还有一个 restore()来恢复它。

这个 getContext("2d ")对象的属性和方法用于在画布上绘制文本、线条、框、圆、路径、多边形、椭圆等，将在下一节中介绍。随后，您将看到使用 WebGL 和 WebGL 2 使用 3D 和

。

在画布上绘画:2D 方法和属性

让我们看看一些方法分组，然后看看一些允许您在 HTML5

元素上绘制 2D 图形的属性。如果你想看一个 2D 内容的例子，使用这个

标签和 JavaScript 实时绘制，参考第十七章中的时钟 JavaScript。

第一个包含 JavaScript 方法的表格，如图 19-2 所示，包含了两种用于图像合成的方法。

如果你想了解数字图像合成，请查阅我的《数字图像合成基础》(Apress，2015)。合成涉及图像的分层，它使用 alpha 通道从几个(甚至数百个)图像层创建一个感知图像。这两种方法(见表 19-2 )允许你使用 globalAlpha()控制画布透明度，使用 globalCompositeOperation()控制合成层。

表 19-2。

HTML5 Tag Methods for Compositing

| 画布绘制方法 | 画布画法的使用 | | --- | --- | | globalCompositeOperation | 设置或返回新图像在现有图像之上(或之下)的绘制方式 | | globalAlpha | 设置或返回绘制操作的当前 alpha 通道或透明度值 |

有四种矩形方法(见表 19-3 )允许你创建、填充、描边和擦除基本 2D 矩形(因此也是正方形)绘图对象的部分。

表 19-3。

Four HTML5 Methods for Drawing Rectangles

| 画布绘制方法 | 画布画法的使用 | | --- | --- | | 矩形 | 在画布上创建 2D 矩形对象 | | fillRect | 在画布上填充 2D 矩形对象 | | strokeRect | 在画布上绘制 2D 矩形对象 | | clearRect(清晰) | 清除 2D 矩形对象中的一个区域 |

有四种线条样式方法(见表 19-4 )允许你使用路径命令绘制线条对象。您可以控制线帽、线条连接方式、线条宽度和斜接长度。

表 19-4。

Four HTML5 Methods Used for Styling Lines

| 画布绘制方法 | 画布画法的使用 | | --- | --- | | 线帽 | 设置或返回所用线帽的类型 | | 线条连接 | 设置或返回两条线相交时创建的线角的类型 | | 行距 | 设置或返回当前使用的线条宽度 | | 米特尔利姆 | 设置或返回最大线条斜接长度 |

使用图案和渐变填充(和描边)形状有四种方法(见表 19-5 )。它们允许您创建图案、线性和径向渐变以及渐变停止点，它们控制渐变颜色的开始和结束位置。

表 19-5。

Four HTML5 Methods for Filling 2D Shapes

| 画布绘制方法 | 画布画法的使用 | | --- | --- | | 创建模式 | 沿指定方向重复指定元素，以创建图案填充或描边 | | 线性渐变 | 创建在画布上使用的线性渐变 | | 放射渐变 | 创建在画布上使用的径向渐变 | | addColorStop | 在渐变中指定颜色和停止位置 |

有六个属性控制笔画、填充和阴影特征的应用(见表 19-6 )。这可让您设置描边、填充、阴影颜色和阴影模糊，从而控制阴影边缘柔和度以及 x 和 y 阴影与文本或形状的距离(偏移值)。

表 19-6。

Six HTML Canvas Methods for Fill, Stroke, and Shadow

| 画布绘制属性 | 画布绘制属性的用法 | | --- | --- | | fillStyle(填充样式) | 设置或返回用于填充绘图对象的颜色、渐变或图案 | | 线条 | 设置或返回用于描边绘图对象的颜色、渐变或图案 | | 阴影颜色 | 设置或返回用于阴影的颜色 | | 暗影行者 | 设置或返回阴影的模糊值 | | shadowOffsetX | 设置或返回阴影与阴影形状或文本的水平距离 | | 阴影社会 | 设置或返回阴影与阴影形状或文本的垂直距离 |

在 2D 空间变换 2D 形状物体有五种方法，如移动(平移)、旋转或缩放(见表 19-7 )。这些允许您使用时间轴(动画)或交互方式来更改或激活 2D 形状、线条、路径、新媒体，甚至其他画布对象。

表 19-7。

Five HTML5 Canvas Methods for 2D Transformations

| 画布绘制方法 | 画布画法的使用 | | --- | --- | | 刻度() | 缩放当前画布绘制图面 | | 旋转() | 旋转当前画布绘制表面 | | 翻译() | 重新映射画布的(0，0)位置 | | 转换() | 替换当前的变换矩阵 | | setTransform() | 将当前转换重置为单位矩阵，然后调用 transform()方法 |

使用文本或字体有六种方法(见表 19-8 )。它们定义文本对象字体、文本对齐、基线、填充文本、描边(轮廓)文本和文本宽度。文本对象是一个线条对象，它使用字体向画布显示如何画线，所以它实际上是一种多边形。

表 19-8。

Six HTML Canvas Methods for Text and Font Usage

| 画布绘制方法 | 画布画法的使用 | | --- | --- | | 字体 | 设置或返回当前字体属性 | | 文字型态 | 设置或返回当前文本对齐方式 | | 文本基线 | 设置或返回当前文本基线 | | fillText() | 在画布上绘制填充文本 | | strokeText() | 在画布上绘制文本(无填充) | | 测量文本() | 返回包含文本宽度的对象 |

如表 19-9 所示，有七种方法允许您处理可视新媒体素材，如数字图像、数字视频，甚至另一个画布对象实例。这些允许您使用 drawImage()方法在画布上实时绘制图像或视频资源，以及从图像中提取像素数据并确定其尺寸(高度、宽度)。还可以使用 createImageDate()方法创建一个空的 ImageData 对象，并使用 getImageData()方法将当前画布数据复制到 ImageData 对象中。还可以使用 put ImageData()方法将 ImageData 放到画布上。

表 19-9。

Seven HTML Canvas Methods for Digital New Media

| 画布绘制方法 | 画布画法的使用 | | --- | --- | | drawImage() | 在画布上绘制图像、画布或视频 | | 宽度 | 返回 ImageData 对象的宽度 | | 高度 | 返回 ImageData 对象的高度 | | 数据 | 返回一个对象，该对象包含指定 image data 对象的图像数据 | | createImageData() | 创建新的空白 ImageData 对象 | | getImageData() | 返回一个 ImageData 对象，该对象复制画布上指定区域的像素数据 | | putImageData() | 将图像数据(来自指定的 image data 对象)放回到画布上 |

最后，有十几种方法可以处理 2D 路径对象(见表 19-10 )。它们允许您填充和描边路径，创建直线、圆弧、三次贝塞尔曲线和二次贝塞尔曲线、剪辑区域以及与路径相关的实用程序，如 beginPath、closePath 和 isPointInPath。它们允许您创建 2D 可缩放矢量图形(SVG)类型的插图和类似的艺术作品，这些插图和艺术作品可以与图像、文本和样式方法相结合，使用 HTML5 < canvas >元素作为绘图表面来创建强大的 2D 图形图像。值得注意的是，对于 WebGL 和 WebGL 2，您还可以将 HTML5 < canvas >元素用于 3D 和 i3D 图形，这将在下一节中看到。我想先向您展示一些强大的 2D JavaScript 方法。

表 19-10。

Twelve HTML Canvas Methods for Lines and Paths

| 画布绘制方法 | 画布画法的使用 | | --- | --- | | 填充() | 填充当前路径对象 | | 笔画() | 描边当前路径对象 | | beginPath() | 开始 Path 对象或重置 Path 对象 | | 已移动() | 将路径对象移动到画布中的指定点，而不创建任何线条 | | closePath() | 创建一个从当前点回到起点的路径对象，以闭合路径 | | lineTo() | 添加一个新点，并从画布中的最后一个指定点创建一条到该点的线 | | 夹子() | 从原始画布中裁剪任何形状和大小的区域 | | 二次曲线() | 创建二次贝塞尔曲线 | | 贝齐尔库韦托 | 创建三次贝塞尔曲线 | | 弧形() | 创建弧/曲线(用于创建圆或圆的一部分) | | arcTo() | 在两条切线之间创建圆弧/曲线 | | isPointInPath() | 如果指定点在当前路径中，则返回 true，否则返回 false |

如果您是面向对象编程(OOP)专家，您已经知道如何使用这些方法调用和参数。如果你不是面向对象编程的专家，并且你想创造出与众不同的 HTML5 新媒体应用，去 Apress 网站( www.apress.com )购买一两个 JavaScript 标题吧！

接下来，让我们来看看 HTML5 中最强大但使用最少的 API 之一，叫做 WebGL。本月发布了一个 WebGL 2 版本，将 3D 和 i3D 带到了一个全新的水平，并且它已经在 Firefox 和 Chrome 中得到支持，所以当你读到这篇文章时，

元素在大多数主流浏览器和 HTML5 操作系统中支持 WebGL 或 WebGL 2。

交互式 3D: WebGL 或 WebGL 2 3D 渲染

到目前为止，我们已经在本书中介绍了许多很酷的东西，例如 i2D、语音合成、语义 web、新媒体支持等等，但 i3D 是 HTML5 支持的最酷的东西之一。它允许在 HTML5 浏览器和操作系统中完成类似于 Halo 4 和 Madden NFL 的用户体验。当你读这本书的时候，它可能已经通过 WebGL 2.0 就位了。更酷的是，很少有开发人员利用这些新的 i3D 技术，这为 HTML5 的征服敞开了大门。

自从 Acrobat 3D 出来我就一直在做 i3D，所以对于实时 i3D 渲染能来到 HTML5 我特别兴奋。随着 iTV 电视机拥有支持 GPU 的四核和八核 CPU，就像智能手机、平板电脑和笔记本电脑一样，实际上有数十亿潜在的 i3D HTML5 播放器在那里积累，等待这种类型的内容产生。这就是为什么我在 HTML5

元素的这一章结束之前向您展示这项技术，以便您了解它的所有内容，如果您想推动使用 HTML5 canvas 实时绘制和渲染引擎所能完成的工作的前沿。

WebGL 的历史:2006 年的 Mozilla 和 2007 年的 Opera

在过去的十年中，WebGL API 一直在发展。它始于 2006 年 Mozilla 的工程总监 Vladimir Vukic'evic 使用 HTML

进行的 i3D 实验。到 2007 年底，Opera 已经有了自己独立的 WebGL 实现。到 2009 年初，非营利技术联盟 Khronos Group 创建了 WebGL 工作组，最初参与的有苹果(Safari)、谷歌(Chrome)、Mozilla (Firefox)、Opera 和其他公司。WebGL 规范的 1.0 版本于 2011 年 3 月发布。该工作组由肯·罗素担任主席。

WebGL 2 规范的开发始于 2013 年，三年后完成。WebGL 2 规范基于 OpenGL ES 3，而 WebGL 基于 OpenGL ES 2。这个 webGL 或 Web 图形库是 JavaScript API，用于在任何兼容的 Web 浏览器上渲染交互式 3D 或 i3D、计算机图形以及 i2D 图形，而无需使用任何插件！WebGL 允许 GPU 加速的物理模拟、实时图像处理和特殊效果作为 HTML5 canvas 元素的一部分。

通过使用

元素和 alpha 通道，WebGL 元素可以与您的 HTML 内容无缝结合，以便其他 HTML5 元素与交互式 3D 内容合成。CSS3 允许所有元素利用 z-index、不透明度、alpha 通道(蒙版透明度)、SVG 滤镜和 Porter-Duff 模式，本质上是将 HTML5 变成一个合成引擎。它做了 Photoshop 或 GIMP 能为你做的大部分事情。

WebGL API 有 i3D 场景图素材管理。它控制用 JavaScript 编写的代码。它还控制在计算机图形处理单元(GPU)上执行的渲染和着色器代码。如果 WebGL 或 WebGL 2 不能在 HTML5 设备上工作，您需要确保 3D 硬件支持存在。AMD 有一个 CPU 系列叫 APU，包含 3D GPU。您可以在以下网站了解更多信息:

http://www.pricewatch.com/cpu/

如果您有兴趣查看 WebGL 2 规范的完整定义，请访问以下网站:

https://www.khronos.org/registry/webgl/specs/latest/2.0/

WebGL 2 中 i3D 编程的复杂性远远超出了本书的范围。如果你对这方面感兴趣，我建议你去 Apress 网站买一两本关于 WebGL 和 WebGL 2 的书。

摘要

本章讨论了 HTML5

标签，它允许您在 HTML5 文档、网站或应用中的高级绘图表面上实时呈现 2D、3D、i2D 和 i3D 图形。

下一章着眼于对象、嵌入和 applet HTML5 元素。

HTML5-快速标记参考-三-