HTML5 快速标记参考（四）
二十、HTML5 插件:使用<object>、<embed>、<applet>和<param>标签
现在我们来谈谈 HTML5 中的标签，这些标签允许开发者插入不使用
标签渲染到屏幕上的非 JavaScript 内容。这包括较老的技术，如 Shockwave Flash 或较新的技术，如 JavaFX，它现在与 Java 集成在一起。Java 用于 Android 操作系统和所有桌面操作系统；它也适用于浏览器。
本章着眼于 HTML5 中的三个强大的标签，它们允许你无缝地将外部内容插入到你的 HTML5 内容中。这些包括嵌入标签、Java applet 标签和对象标签。您将了解何时使用每种标签，以及它们允许您在内容制作、发布和交付工作流程中添加哪些内容。相关的标签也包括在内。
插件应用:嵌入标签
标签定义了一个区域，作为任何外部应用或交互式内容的容器，您希望这些内容与您的 HTML5 标记和 HTML 设计无缝集成。有时这被称为插件或 Java 小程序。<嵌入>标签在“技术上”是 HTML5 中的一个新标签(元素)，尽管大多数流行的 web 浏览器在几个遗留 HTML 版本中都支持这个<嵌入>标签。有趣的是，<嵌入>标签并不是 HTML 4.01 规范的一部分。这意味着就标记验证而言，< embed >标签是 HTML5 的新标签，因此，< embed >现在可以在 HTML5 页面中进行验证。然而，如果您在遗留的 HTML 4.01 页面中使用<嵌入>，这些页面将不会被验证！
表 20-1 描述了<嵌入>标签支持的四个参数。
表 20-1。
Four HTML5 Tag Parameters
| 嵌入标签参数 | 嵌入标记参数的用法 | | --- | --- | | 高度 | 定义嵌入式应用的高度 | | 科学研究委员会 | 定义嵌入式应用的源代码 | | 类型 | 定义嵌入式应用媒体(MIME)类型 | | 宽度 | 定义嵌入式应用的宽度 |下面是一个如何将 Shockwave Flash 内容嵌入 HTML5 标记的示例:
<!DOCTYPE html><html>
<head><title>Exotic and Domestic Cars</title></head>
<body>
<section id="x-shockwave-flash-example">
<h1>Embedded Shockwave Flash Application</h1>
<embed src="shockwave-flash-example.swf"
type="application/x-shockwave-flash"
width="480" height="320"
id="javaScriptID" class="cssStyleClassName" />
</section>
</body>
</html>
让我们用本章的剩余部分来看看使用标签的几种替代方法，包括当你想使用这些替代方法将外部内容插入到你的 HTML5 内容创作中时。
接下来我们来讨论一下标签，HTML5 不支持。但是很多开发者还是用它来嵌入 Java 小程序。这是因为它有更多的跨浏览器支持，并且因为 HTML5 浏览器利用 HTML4 元素，即使它们在 HTML5 中已被否决。
Java 或 Java FX Applets:APPLET 标签
标签最初被设计用来在 HTML4 网页中嵌入 Java 小程序。浏览器一直支持 Java 小程序，并且可能会继续支持下去。表 20-2 显示了< applet >标签支持的 11 个参数。
表 20-2。
Eleven HTML4 Parameters Deprecated in HTML5
| 参数 | 参数数据值 | Applet 标签参数的用法 | | --- | --- | --- | | 密码 | 统一资源定位器 | 指定 Java 小程序类文件名 | | 目标 | 名字 | 指定对 applet 的序列化表示的引用 | | 中高音 | 文本 | 为子视图指定替代文本 | | 排列 | 左侧、右侧、顶部、底部、中间或基线 | 为子视图指定对齐方式 | | 档案馆 | 统一资源定位器 | 指定远程 JAR 归档位置 | | 代码库 | 统一资源定位器 | 为代码属性中指定的 applet 指定相对基本 URL(如果类不是本地的，则使用) | | 高度 | 像素 | 指定小程序的高度 | | hspace | 像素 | 定义小程序周围的水平间距 | | 名字 | 名字 | 定义 applet 的名称(在 JavaScript 或其他引用中使用) | | 存放空间 | 像素 | 定义小程序周围的垂直间距 | | 宽度 | 像素 | 指定小程序的宽度 |在 HTML4 中，当引入更一般化的 object 元素时，applet 元素被弃用。我将在下一节介绍对象。有趣的是，由于那些转向支持 object 的浏览器或操作系统引入了与嵌入 Java 应用相关的错误，所以目前的标签更加稳定，并且是一种用于“遗留”应用的 Java applet 嵌入的更加可靠的方法。走出去，对于 HTML5 和 5.1，applet 支持被否决，并停止支持 HTML5 内部编程语言 JavaScript。安卓用 Java！
代码参数指定了 Java 的名称。包含已编译的 applet 的类文件。该值相对于您的 URI，使用 codebase 属性指定。对于有小程序的安装。类文件在服务器根中，则不需要将 codebase 属性指定为路径；并且“基地 URI”对于引用素材的位置不是必需的。
需要宽度和高度属性来定义 Java 小程序的尺寸。这些值应该使用像素(图片元素)，或者包含子标签的宽度或高度的父元素的百分比来指定。让我们来看看这个标签的 HTML5 标记示例。
您可以使用 code 和 archive 参数定义一个基本的元素来引用您的。班级和。包含 Java(或 JavaFX)小程序的 jar 文件。您还可以使用一个 name 参数来引用一个< applet >元素和您的 applet 画布的尺寸，它们是通过使用 width 和 height 参数来定义的。如下面的 HTML5 标记示例所示:
<!DOCTYPE html><html>
<head>
<title>Basic Java Applet Element Insertion Example</title>
</head>
<body>
<section id="Java or JavaFX Applet Object Example">
<h1>Java or JavaFX Applet HTML Markup Example</h1>
<applet code="javaAppletName" archive="javaAppletName.jar"
width="1024" height="600"
alt="Your HTML5 Browser, or OS, does not support Java!"
codebase="https://www.YourRemoteServerURLgoesHere.net"
name="appletTagsName" align="middle">
<param name="permissions" value="sandbox" />
ALERT: Your HTML5 Browser, or OS, does not support Java!
</applet>
</section>
</body></html>
正如您所看到的，alt 参数为 HTML5 平台提供了替代文本，这些平台可以识别 applet 元素，但是不支持 Java 或者没有启用 Java。值得注意的是，开发人员也可以在开始和结束标记之间提供这种替代文本内容，如图所示。这是比使用 alt 属性更好的方法，因为它允许开发人员在替代内容中提供额外的 HTML5 标记。这种方法也适用于尚不支持这个元素的 HTML2 或 HTML 3.2 浏览器，但仍然会处理这个文本。
archive 参数指定以逗号分隔的存档文件列表。然而，Java 开发人员通常只提供一个 jar (Java 归档)文件，这是 Java 文件的标准归档格式。Jar 文件是由 Java SE 开发工具包中包含的 jar 工具创建的，您可以在本书的附录(A 到 C)中了解如何下载和安装该工具包。
值得注意的是，有些浏览器不支持存档参数，所以所有必需的 JAR 文件也应该作为。类文件，并使用代码参数引用。
align 属性指定 applet 的对齐方式，以指定上、中、下、左、右和基线的数据值。这些设置 applet 相对于其左右周围内容的位置。
示例中的 align="middle "将小程序的垂直中心与当前基线对齐。左对齐和右对齐值指定一个浮动子视图。在这个用例中，applet 被设置在左边或右边；周围的内容围绕着小程序流动。
hspace 和 vspace 参数允许 HTML5 开发人员分别指定 applet 周围的水平或垂直空白。数据值必须以像素为单位，并应用于 applet 的左侧和右侧(或顶部和底部)。
最后，对象参数(而不是代码参数)指定一个序列化的 Java applet，如下所示:
<applet object="serializedJavaAppletName.ser"
width="1024" height="600"
alt="Your HTML5 Browser, or OS, does not support Java!"
codebase="https://www.YourRemoteServerURLgoesHere.net"
name="appletTagsName" align="middle">
<param name="permissions" value="sandbox" />
ALERT: Your HTML5 Browser, or OS, does not support Java!
</applet>
当遇到这个标签配置时，HTML5 解析引擎通过反序列化它来创建 applet。这允许小程序在预初始化状态下发货。当 applet 被反序列化时，不调用 init()方法，允许在客户端执行初始化。
为 HTML5 提供了标签，以取代 HTML 4.01(及之前版本)中的标签。
在 HTML5 中嵌入对象:对象标签
标签定义了 HTML5 文档中的任何嵌入对象。您可以使用此元素在 HTML5 文档、网站和应用中嵌入多媒体资源，如数字音频、数字视频、Java 和 JavaFX 小程序、Active-X 控件、Adobe Acrobat PDF 文档和 Shockwave Flash 应用。有趣的是，您还可以使用标签将另一个 web 页面嵌入到 HTML5 文档中。您还可以使用子标签将参数传递给使用标签嵌入的插件。图像应该使用标签，而不是标签。
您的元素需要出现在元素内部，因为它们是本地对象，而不是全局()设置。和之间的文本是不支持该标签的浏览器的替换文本。还需要指定一个数据或类型参数。表单参数是 HTML5 中的新参数，因为对象可以在 HTML5 表单中提交。
在 HTML5 中，对象不能再出现在标签中。表 20-3 描述了<对象>标签或元素支持的 17 个参数。
表 20-3。
Seventeen Supported HTML5 Tag Parameters
| 参数 | 参数数据值 | 对象标签参数的用法 | | --- | --- | --- | | 排列 | 顶端 | 指定元素与其周围元素的对齐方式 | | 档案馆 | 统一资源定位器 | 相关对象资源存档的以空格分隔的 URL 列表 | | 边界 | 像素 | 指定对象边框的宽度 | | 分类码 | class_ID | 定义在 Windows 注册表或 URL 中设置的 class_ID 值 | | 代码库 | 统一资源定位器 | 定义基 URL，引用在哪里可以找到？对象的分类代码 | | 节点类型 | 媒体类型 | classid 属性引用的代码的媒体类型 | | 数据 | 统一资源定位器 | 指定了数据资源的 url | | 声明 | 声明 | 定义的对象应该只声明不实例化(创建) | | 形式 | 表单 id | 指定表单对象所属的 | | 高度 | 像素 | 指定了对象的高度 | | hspace | 像素 | 指定对象左侧和右侧的空白 | | 名字 | 名字 | 指定对象的名称 | | 备用的 | 文本 | 定义对象流动或加载时要显示的文本值 | | 类型 | 媒体类型 | 为数据属性中指定的数据指定媒体类型 | | 使用地图 | #mapname | 指定用于对象的客户端图像映射的名称 | | 存放空间 | 像素 | 指定了对象顶部和底部的空白 | | 宽度 | 像素 | 指定了对象的宽度 |您可以使用类型和数据参数定义一个基本的元素，以引用素材数据和对象 MIME 类型，以及定义对象画布尺寸的宽度和高度参数，如下面的 HTML5 标记所示:
<!DOCTYPE html><html><head><title>Acrobat PDF Object Example</title></head>
<body>
<section id="PDF-ObjectInsertionExample">
<h1>Adobe Acrobat Object is Inserted Below</h1>
<object data="abc.pdf" type="application/pdf" name="objectTagName"
standby="Loading, please wait..."
width="1024" height="600">
<embed src="abc.pdf" type="application/pdf">
<noembed>HTML5 Browser/OS doesn't support Java object type!</noembed>
<embed>
</object>
</section>
</body>
</html>
您还可以添加一个待机参数，以便在加载对象时显示“请稍候”消息。您可以在中使用来支持传统浏览器！标签是一个子标签，它向本章没有涉及的标签添加参数。这样做可以添加不一定是父标签参数的功能。在我们结束之前，接下来让我们看看标签。
声明参数:使用 PARAM 标签
参数标签与标签一起用于传递参数。它还与标签一起用来指定对象参数，如前面的 HTML5 标记示例所示。表 20-4 描述了四个< param >标签参数。
表 20-4。
四个< param >标签参数的值
| Param tag parameter | Usage of Param tag parameter | | --- | --- | | name | The name of the parameter is defined. | | value | Parameters are defined |让我们用来嵌入一个使用的 Java 小程序。
<!DOCTYPE html><html>
<head><title>Java Object Insertion Example</title></head>
<body>
<section id="Java-JavaFXObjectInsertionExample">
<h1>Java or JavaFX Application Object is Inserted Below</h1>
<object type="application/x-java-applet" name="objectTagName"
standby="Object is loading, please wait..."
width="1024" height="600">
<param name="code" value="classNameHere.class" />
<param name="archive" value="archiveNameHere.jar" />
<param name="scriptable" value="true" />
<param name="mayscript" value="true" />
ALERT: Your HTML5 Browser or OS doesn't support a Java object type!
</object>
</section>
</body>
</html>
接下来，让我们讨论一下什么时候使用一种嵌入方法和另一种嵌入方法的经验法则。
嵌入还是不嵌入:标签选择
关于 HTML5 标签最活跃的讨论话题之一是关于在 HTML5 文档和应用中嵌入内容时对对对。
标签已被弃用，但开发者仍在使用；其他三个是 HTML5 规范的一部分，但是每个都有自己的追随者。你需要发现每一个是如何为你自己的目的工作的。这些标签几乎和
标签以及 WebGL 2 一样复杂。
Oracle 在其 Java 8 网站上讨论了经验法则，网址为:
docs.oracle.com/javase/8/docs/technotes/guides/jweb/applet/using_tags.html
如果通过互联网访问 HTML5 网页，请使用标签。如果通过公司内部网访问 HTML5 网页，使用标签或标签。
在为特定的 HTML5 浏览器部署小程序时，只对 Internet Explorer 使用标签。为 Mozilla 系列浏览器使用一个标签。如果您必须在混合浏览器环境中部署 applet，请遵循以下准则。
当使用纯 HTML 方法在混合浏览器环境中部署小程序时，请注意以下关于 IE 和 Mozilla 的内容:
Internet Explorer 识别标签，并忽略<评论>标签的内容，如以下标记所示:
<!DOCTYPE html><html><head><title>Acrobat PDF Object Example</title></head>
<body>
<section id="PDF-ObjectInsertionExample">
<h1>Adobe Acrobat Object is Inserted Below</h1>
<object data="abc.pdf" type="application/pdf" name="objectTagName"
standby="Loading, please wait..."
width="1024" height="600">
<comment>
<embed src="abc.pdf" type="application/pdf">
<noembed>HTML5 Browser/OS doesn't support Java object type!</noembed>
<embed>
</comment>
</object>
</section>
</body>
</html>
Mozilla 浏览器使用 classid 属性忽略了标签，并解释了<注释>标签的内容，因此考虑使用之前的 html 5 PDF 示例代码，其中在<对象>标签中的<注释>标签内使用了<嵌入>标签。
本章的寓意是要仔细测试你所有的插件素材和应用！测试是确定 HTML5 应用和嵌入式素材最终如何协同工作的最佳方式。
摘要
在本章中，您学习了 HTML5 中对插入或嵌入外部应用或文档资源的标签支持，包括、、和标签。在下一章，你将探索 HTML5 模板<模板>标签，并学习如何使用 HTML5 模板。
二十一、HTML5 框架：使用<iframe>标签
现在让我们来看看 HTML 黄金时代的标签，那时框架集和框架通常用于定义屏幕上的区域。其中一个与帧相关的标签至今仍在使用。它允许开发者在他们的 HTML5 设计中将其他网站的页面添加到内部框架或 iframe 中。这有时被称为嵌入内容，但是它不同于、和元素。
在本章中，您将看到三个与框架相关的标签。其中两个是 HTML5 不支持的传统标签；不建议使用它们。它们在 HTML2 和 HTML 3.2 中被大量使用，所以为了完整起见，我把它们包含在这里。其中一个标签，即标签，在 HTML5 中仍然受支持，这也是我们在本章大部分时间关注的。
在这一章中，你会看到框架集标签，相关的框架标签，以及在 HTML5 中仍然支持使用的 iframe 标签。
HTML 框架遗产:框架集和框架标签
在传统的 HTML 规范中，< frameset>标签曾经是在网站中创建区域的一种流行方式，当你调整浏览器窗口大小时，这些区域会改变形状和大小。随着 HTML 多年来的发展，其他标签如
和以及 CSS 元素如 center、auto 和 fit-content 被引入来实现这一点，并成为推荐的做事方式。框架集和框架不再推荐在 HTML 中使用，HTML5 更是如此，在 HTML 5 中它们不受支持。所以，这里我简单介绍一下和它的子标签，然后进入，它在 HTML5 中仍然受支持。
标签定义了框架集，它包含了几个<框架>元素。每个<框架>元素保存一个单独的文档，使用 src 参数引用文档源 HTTP 位置。
一个元素使用一个百分比或像素值来指定框架集中的列或行的数量，以及空间的分布。这些表示每个框架在 HTML 文档或网站中占据的空间量。
如果要验证任何包含框架的网页，请确保将设置为 HTML 框架集 DTD 或 XHTML 框架集 DTD。
表 21-1 显示了遗留 HTML 中支持的两个框架集标签参数。
表 21-1。
Two Frameset Parameters
| 菜单参数 | 菜单参数的用法 | | --- | --- | | 关口 | 指定框架集中列的数量和大小 | | 行 | 指定框架集中的行数和大小 |下面是一个例子，说明如何使用子标签在 HTML 中创建一个框架集来保存框架定义:
<frameset cols="25%,*,25%"> <!-- 25% outer column width, center scales -->
<frame src="frame_one.html" />
<frame src="frame_two.html" />
<frame src="frame_three.html" />
</frameset>
接下来，我们来看看标签，它在 HTML5 的一个框架中显示了另一个 HTML5 页面。
HTML5 框架:使用 IFRAME 标签
标签定义了 HTML 文档设计中的一个区域，用来显示一个远程 HTML 页面；它有点像一个门户，将另一个 HTML 文档封装在你自己的 HTML5 文档、网站、电子书或应用设计中。一个标签有点类似于、和 applet 标签，但不是应用或插件，嵌入了另一个 HTML 文档设计。从技术上讲，标签指定了一个内嵌框架，它无缝地将另一个文档嵌入到当前的 HTML5 文档中。为了支持不支持的浏览器，在开始标签和结束标签之间添加文本。如果你想设计一个元素，你可以使用 CSS3。例如，您可能希望包含滚动条。这是通过使用以下 CSS3 样式中设置为 scroll 值的 CSS3 溢出属性来实现的:
iframe { overflow: scroll; }
表 21-2 显示了 11 个< iframe >标签参数。前六个是 HTML5 的新参数，后五个是遗留 HTML 项目中可接受的参数，但它们不在 HTML5 中使用。
表 21-2。
Eleven HTML5 iFrame Parameters (six new in HTML 5)
| iFrame 参数 | iFrame 参数用法 | | --- | --- | | 科学研究委员会 | 指定要嵌入到元素中的 HTML 文档的 HTTP URL 地址 | | 宽度 | 以像素为单位指定的宽度 | | 高度 | 以像素为单位指定的高度 | | 名字 | 指定您的元素的名称 | | 沙箱 | 在选项中为您的内容启用额外的限制集，包括:允许表单、允许指针锁定、允许弹出窗口、允许同源、允许脚本和允许顶部导航 | | 引用内容 | 指定要在中显示的页面的实际 HTML 内容值 | | 排列 | 根据周围的其他 HTML 元素指定的对齐方式 | | 框架边框 | 指定是否在元素周围显示边框 | | longdesc(长描述) | 指定一个页面的 URL，该页面包含对内容的详细描述 | | 框架边框与页面内容的水平边距 | 为元素中的内容指定左边距和右边距 | | 框架的上下边距 | 指定元素中内容的上边距和下边距 | | 卷动 | 指定是否显示元素的滚动条。参数选项包括是、否和自动 |让我们使用 800 × 600 分辨率的名为“Apress”的将 apress 网站添加到 HTML5 示例中。这是在下面的 HTML5 标记中完成的:
<iframe src=http://www.apress.com width="800" height="600" name="apress">
ALERT: If you can see this message, your browser doesn't support iFrame
</iframe>
您可以使用 sandbox 参数对外部内容进行“沙箱化”测试。sandbox 属性为显示在您的中的内容启用了一组额外的限制。
当沙箱属性存在时，它将 HTML5 内容视为来自唯一的来源。它阻止表单提交和 JavaScript 执行。sandbox 参数禁用任何 API，并防止任何链接指向另一个浏览上下文。沙盒通过、、阻止内容使用插件。它还阻止内容导航到顶级浏览上下文，并阻止自动触发的功能，如自动播放视频流或自动设置焦点以形成控件。
sandbox 属性的值就是关键字 sandbox，如下例所示。应用所有限制。这里，通过使用带有沙箱参数的将 Apress 网站添加到 HTML 示例中:
<iframe src=http://www.apress.com width="800" height="600" sandbox >
ALERT: If you can see this message, your browser doesn't support iFrame
</iframe>
您还可以为 sandbox 参数指定一个值，该参数包含一个以空格分隔的预定义值列表。这允许您关闭任何特定的限制。
让我们使用允许表单、弹出窗口和 JavaScript 的将 Apress 网站添加到当前的 HTML5 示例中。这是在下面的 HTML5 标记中完成的:
<iframe src=http://www.apress.com width="800" height="600" name="apress"
sandbox="allow-forms allow-popups allow-scripts" >
ALERT: If you can see this message, your browser doesn't support iFrame
</iframe>
一些 HTML5 开发人员使用带有 type=text/html 参数的标签来加载外部 HTML 内容，而不是使用标签。让我们再来回顾一下这个讨论，就像你在上一章讨论嵌入、applet 和 object 时所做的那样。
使用对象或 iFrame:更多讨论
一些 HTML5 开发人员必然会假设元素声明与使用相同，有些人甚至会假设更强大，因为它也允许嵌套(参数传递)子标签。然而，HTML5 开发者做出这样的假设是不正确的。
主要的“幕后”区别是在你的两个 HTML5 页面之间建立了一个实时链接，这样它在这两个服务器和它们建立的内容之间建立了“动态更新”。事实上，我们在上一节中看到的沙箱参数证明了这一点，并且<对象>标签没有这种内部“DOM 连接”,因为它最初的目的是连接 HTML5 和非 HTML5 内容类型，而不是“其他 HTML5 内容”类型。这是你在<对象>和< iframe >之间的主要区别，以及在<嵌入>和< iframe >之间的主要区别，就此而言，如果你想用一个总括的、高层次的假设来看一些东西。
这个故事的寓意是使用进行跨 HTML5 的实时嵌入，实时链接内容，将其他 HTML 和 HTML5 内容(如果不是你的知识产权(IP)，请确保获得书面许可)插入到你的 HTML 5 或 HTML 5.1 文档、网站、电子书、iTV 集和应用中。
摘要
本章解释了传统的和标签，以及 HTML5 对标签的支持。它讨论了、和标签之间的嵌入差异。在下一章中，您将看到 HTML5 中对 ruby 注释的新支持。
二十二、HTML5 Ruby 注释：使用<ruby>标签
现在让我们讨论 HTML5 中的一个全新标签，它允许开发人员提供 ruby 注释，这允许您为 HTML5 用户提供小文本助手，帮助他们理解您的主要内容。通常这是外语或技术术语的翻译帮助。
在本章中，您将看到 HTML5 中三个强大的标签，它们允许您无缝地为 HTML5 内容实现 ruby 注释内容。这些包括拼音注释标签、拼音括号标签和拼音文本容器标签。您将了解何时使用每个标签，以及它们允许您向 HTML5 内容制作、发布和工作交付流程添加什么。
目前，ruby 注释没有广泛的浏览器支持。本章作为快速参考包含在内。也就是说，ruby 注释是很多人都想了解的东西。
Ruby 注释:RUBY 标签
一个标签指定了一个 ruby 注释。它与流行的 Ruby 编程语言毫无关系！ruby 注释是附加在主文本上的一小段额外的文本。它指示与其连接的相应字符的发音或替代含义。这种注释常用于日文、中文、韩文或阿拉伯文出版物。
通过使用带有
在父标签中，有一个包含发音信息的
表 22-1 显示了 HTML5 目前支持的六个 ruby 注释标签。
表 22-1。
Six HTML5 Ruby Annotation Tags All Are New in HTML5
| HTML5 拼音标签 | HTML5 拼音注释标记的用法 | | --- | --- | | | 定义 ruby 注释定义(父) | | | 定义拼音注释文本元素(子元素) | | | 定义拼音文本容器(子容器) | | | 定义拼音注释括号(子) | | | 定义拼音基础文本元素(子元素) | | | 定义一个 ruby 基本容器(子容器) |下面是一个示例，说明如何使用 ruby 注释来定义单词口语，在 HTML5 标记中，使用所有浏览器都支持的三个主要 HTML5 标签来定义基本词典单词条目和发音:
<ruby>
<strong>col·lo·qui·al·ism</strong>
<rp>(</rp>
<rt>kə'lōkwēə'lizəm</rt>
<rp>)</rp>
</ruby>
父 ruby 标签包含单词口语，并用语义标签包围这个单词，使其加粗。这向用户表明这是一个对你的内容很重要的单词，并且是一个将要使用括号中的 ruby 注释来定义的单词。
之后是添加左括号的
我不确定出版商是否使用 UFT 16 字符集来出版这本书，但这里有一个使用注释定义的日语单词 Kanji 的例子:
<ruby>
漢 <rp>(</rp>
<rt>Kan</rt>
<rp>)</rp>
字 <rp>(</rp>
<rt>ji</rt>
<rp>)</rp>
</ruby>
如果你想看到将日本汉字、中文、韩文和阿拉伯文的例子混合在一起，你必须在线查看这些例子，以了解 ruby 注释如何与外语一起工作，因为每种语言都有完全不同的字符集。只需输入搜索“ruby annotation example ”,您就会找到一些例子。接下来，让我们介绍一些更复杂的 ruby annotation 子标签，它们允许您构建高级的 ruby 注释。
高级 Ruby 注释:Ruby 容器
在更高级的 ruby 注释中，ruby 文本容器元素可以用作
<ruby>
<rtc>
<rt>さい</rt>
<rt>とう</rt>
<rt>のぶ</rt>
<rt>お</rt>
</rtc>
</ruby>
ruby base 容器元素充当 ruby 批注的 ruby base 元素的容器。ruby 标记中只允许出现一个元素。
这个 ruby base 元素标记了基本文本。在简单的 ruby 注释中，只能出现一个元素。在复杂的 ruby 注释中，一个元素中可能会出现多个标签，如下面的 HTML5 标记所示:
<ruby>
<rbc>
<rb>斎</rb>
<rb>藤</rb>
<rb>信</rb>
<rb>男</rb>
</rbc>
</ruby>
每个标签都与相应的
一旦将这些放在一起，就得到一个复杂的定义，其中,构造保存基础语言的基础文本,保存翻译语言中的 ruby 文本定义。渲染时，文本在底部，
<ruby>
<rbc>
<rb>斎</rb>
<rb>藤</rb>
<rb>信</rb>
<rb>男</rb>
</rbc>
<rtc>
<rt>さい</rt>
<rt>とう</rt>
<rt>のぶ</rt>
<rt>お</rt>
</rtc>
</ruby>
随着 HTML5 操作系统的持续增长以及 HTML5 由于 HTML5 iTV 电视机和智能手机销量的增加而继续国际化，预计 ruby annotations 将获得支持。
摘要
在本章中，您了解了 HTML5 中用于定义 ruby 注释的标签支持，包括、、、和
二十三、HTML 5.1 标签：使用菜单和对话框设计元素
最后，让我们讨论 HTML 5.1 中新增的标签，这些标签允许开发人员添加 HTML 5 应用中使用的元素，如菜单结构和对话框。增加这些是因为 HTML5 现在正被用于至少六个主要的消费电子操作系统，包括 Mozilla 的 Firefox OS、Canonical 的 Ubuntu Touch OS、Opera OS、Jolla 的 Sailfish OS、Google 的 Chrome OS 和 Linux Foundation Tizen OS。
本章着眼于 HTML 5.1 中新增的三个强大的标签，它们允许在 HTML 5.1 操作系统内容中无缝地实现应用用户界面元素。请注意，目前的浏览器可能还没有实现这些功能；火狐浏览器是一个例外。这可能是由于 Mozilla 在全球范围内积极扩张 Firefox OS。
菜单
标签、相关菜单项标签和对话框标签都是新的。您将了解如何使用这些标签，以及它们允许您将哪些内容添加到 HTML5 应用中，以用于消费电子产品，如智能手表、UHD iTV 电视机、电子书阅读器、平板电脑、笔记本电脑和智能手机。HTML5 应用菜单:菜单标签
新 HTML 5.1 规范中的< menu>标签创建了菜单系统。这适用于文档、网站、电子书和 HTML5 应用，尽管它只对 HTML5 应用是必要的，因为 HTML 5.1 需要至少添加启动图标、菜单和对话框来实现所需的用户界面元素，以便作为一个操作系统受到重视。底层的 Linux 内核提供了其余必要的“底层”操作系统特性。
一个
标签可以用来定义一个命令列表或者一个充满命令的菜单。标签用于上下文菜单、工具栏、表单控件列表或命令列表。表 23-1 显示了 HTML 5.1 在 2016 年第四季度发布时支持的两个<菜单>标签参数，在本参考标题发布几个月后。
表 23-1。
HTML 5.1 Menu Parameters Supported in HTML 5.1
| 菜单参数 | 菜单参数的用法 | | --- | --- | | 标签 | 使用文本值定义菜单标签 | | 类型 | 定义菜单类型(列表、上下文或工具栏) |下面是一个示例，说明如何在标准 HTML 5 标记结构中使用主 HTML 5.1
标记创建一个空的弹出上下文(右键单击)菜单结构:<menu type="context" id="emptymenu" label="Click For Sub-Menu">
<menu label="submenu1">
<menuitem/>
<menuitem/>
</menu>
<menu label="submenu2">
<menuitem/>
<menuitem/>
</menu>
<menu label="submenu3">
<menuitem/>
<menuitem/>
</menu>
</menu>
接下来，让我们看看标签，它用菜单项填充菜单或子菜单。
填充 HTML5 菜单:使用 MENUITEM 标记
< menuitem>标签定义了一个命令或菜单项，用户可以使用弹出菜单(右键单击上下文或左键单击列表)或工具栏菜单(图形化的菜单表示)来选择它。您可以使用本书前面提到的 onclick 参数让您的命令执行 JavaScript 函数或 DOM API 调用。要给一个文本标签，您将使用必需的标签参数。还需要注意的是标签目前仅在 Mozilla Firefox 中受支持，即使在 Firefox 操作系统和浏览器中，它目前也仅适用于上下文菜单。预计标签菜单和工具栏支持即将到来！
表 23-2 显示了 2016 年 HTML 5.1 出来时应该很好支持的七个< menuitem >标签参数。
表 23-2。
Seven HTML5 MenuItem Parameters All New in HTML 5.1
| MenuItem 参数 | MenuItem 参数用法 | | --- | --- | | 标签(必填) | 指定命令/菜单项的文本，就像它显示给菜单用户一样 | | 检查 | 指定在页面加载时应选中(选择)此命令/菜单项。仅将此用于 type="radio "和 type="checkbox " | | 系统默认值 | 将命令或菜单项指定为默认命令或菜单项 | | 有缺陷的 | 指定命令或菜单项应被禁用(灰显，不可选择) | | 图标 | 指定命令/菜单项的图标 URL | | 选项按钮组 | 指定在切换命令或菜单项本身时切换的一组命令的名称。这是针对 type="radio "的 | | 类型 | 定义菜单项类型(复选框、命令或单选),默认为命令 |让我们向一个
标签添加三个标签，向您展示这如何与意大利汽车示例一起工作。因为这个标签只保存参数，所以您可以使用<菜单项目参数列表/ >标签格式，而不是<菜单项目参数列表></菜单项目>格式，这也是有效的标记，如果您喜欢使用那种标记方法:
<menu type="context" id="carmenu" label="Italian Cars">
<menuitem label="Lamborghini"
icon="lamborghini_icon.png"
type="command" />
<menuitem label="Maserati"
icon="maserati_icon.png"
type="command" />
<menuitem label="Ferrari"
icon="ferrari_icon.png"
type="command" />
</menu>
您可以使用其他参数来添加选择检查标记、默认菜单项、禁用菜单项、单选按钮组和图标图形，就像 Android、Solaris、Windows、Linux 和 Macintosh OS/X 等高级操作系统中的菜单一样。作为浏览器开始的 HTML5 操作系统应添加到此列表中，包括 Firefox OS、Opera OS、Tizen OS 和 Chrome OS。
创建子菜单:嵌套菜单标签用法
要创建子菜单，只需嵌套一个
标签，如本例中的 HTML5 标记所示:<menu type="context" id="carmenu">
<menu label="Italian Cars">
<menuitem label="Lamborghini"
icon="lamborghini_icon.png"
type="command" />
<menuitem label="Maserati"
icon="maserati_icon.png"
type="command" />
<menuitem label="Ferrari"
icon="ferrari_icon.png"
type="command" />
</menu>
<menu label="German Cars">
<menuitem label="Porsche"
icon="porsche_icon.png"
type="command" />
<menuitem label="Audi"
icon="audi_icon.png"
type="command" />
<menuitem label="Volkswagen"
icon="volkswagen_icon.png"
type="command" />
</menu>
<menu label="American Cars">
<menuitem label="Chevrolet"
icon="chevy_icon.png"
type="command" />
<menuitem label="Ford"
icon="ford_icon.png"
type="command" />
<menuitem label="Jeep"
icon="jeep_icon.png"
type="command" />
</menu>
</menu>
接下来，我们来看看如何添加 HTML5 对话框！
HTML5 应用对话框:一个对话框标签
对话框是应用的另一个重要组件，对于操作系统来说，对话框组件与菜单组件或应用启动图标一样重要。标签可以用来定义一个对话框或者一个对话框窗口。这个
元素允许开发者在文档、电子书、网页或应用中创建弹出对话框和模态对话框。目前支持这个 HTML 5.1 标签的浏览器包括 Opera 或 Chrome，但有趣的是，还没有 Firefox。表 23-3 显示了<对话框>标签(元素)当前支持的一个参数，它指定一个对话框最初是打开的。表 23-3。
One HTML5 Dialog Parameter That Is New in HTML 5.1
| 对话参数 | 对话框参数的用法 | | --- | --- | | 打开 | 定义对话框的初始打开对话框状态 |要创建包含一些文本信息的打开对话框，可以使用以下 HTML 5.1 标记，以意大利汽车为例，使用标准颜色的汽车型号基本表:
<table>
<tr>
<th>Ferrari<dialog open>Ferrari Cars Are Usually Red!</dialog></th>
<th>Lamborghini</th>
<th>Maserati</th>
</tr>
<tr>
<td>Red</td>
<td>Yellow</td>
<td>Black</td>
</tr>
</table>
预计其他 HTML5 引擎将很快提供支持。
摘要
在这最后一章中，您看到了 HTML5.1 中新的
和标签支持，用于为即将到来的 HTML 5 操作系统爆炸定义 HTML 5 应用组件，目前有六个操作系统正在使用中。您了解了 、和标签，以及如何创建基本的菜单和对话框。我希望你喜欢这本 HTML5 快速标记参考手册，就像我喜欢写它一样！祝你的 HTML5 开发工作好运。
