Share via

快速入门：显示文本 (HTML)

  • 项目

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

使用 JavaScript 的 Windows 应用商店应用可以使用多个元素显示文本。用于显示只读文本的主要元素包含 label、div、paragraph 以及 heading。本快速入门介绍了使用这些元素来显示文本的方法。

请将此操作功能视为我们的应用功能大全系列的一部分: Windows 应用商店应用 UI 全解

先决条件

标签、div、段落以及文本区域

Label、div、paragraph 以及 heading 是主要控件，用于显示使用 JavaScript 的 Windows 应用商店应用中的只读文本。此 HTML 显示了如何定义简单的 label 控件并设置其文本。

<label>Hello, World!</label>

你可以使用嵌入式 style 属性来显示不同格式的文本。下面是使用 style 属性和 div、paragraph、label 以及 heading 控件定义多个不同格式文本字符串的方法。

注意  还可以使用级联样式表 (CSS) 而非 style 属性来显示不同格式的文本。这样允许你一次性定义样式，然后通过多个控件引用该样式。如果以后需要更改样式定义，则仅需要在一个位置进行这些更改即可。有关详细信息，请参阅级联样式表。

 


<div style="font-family:Arial">Sample text formatting runs</div>

<!-- 'margin:0px' removes any default margins from the <p> element. -->
<p style="margin:0px; color:lightgray; font-family:'courier new'; font-size:24px">Courier New 24</p>

<label style="color:teal; font-family:'times new roman'; font-style:italic; font-size:18px">Times New Roman Italic 18</label><br />
    
<!-- 'padding:0px' remove any default padding from the <h1> element. -->
<h1 style="padding:0px; background-color:transparent; color:steelblue; font-family:Verdana; font-weight:bold; font-size:14px">Verdana Bold 14</h1>

此处是结果。

使用运行的文本。

摘要和后续步骤

你已经了解如何创建 label、div、paragraph 以及 heading 元素，以便显示应用中的文本。

相关主题

字体指南

快速入门：添加文本输入和编辑控件