Поделиться через

Краткое руководство: отображение текста (HTML)

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Приложения Магазина Windows на JavaScript могут использовать для отображения текста несколько элементов. Основные элементы для отображения текста, доступного только для чтения, включают label, div, paragraph и heading. В этом кратком руководстве показано, как использовать элементы для отображения текста.

Узнайте о работе этого компонента в рамках нашей серии о компонентах приложений.: Пользовательский интерфейс приложения Магазина Windows от А до Я

Предварительные требования

Элементы управления label, div, paragraph и область текста

Label, div, paragraph и heading являются основными элементами управления для отображения текста, предназначенного только для чтения, в приложениях Магазина Windows на JavaScript. Данный HTML-код показывает, как определить простой элемент управления label и задать для него текст.

<label>Hello, World!</label>

Вы можете использовать встроенный атрибут style для отображения текста с различным форматированием. Атрибут style используется с элементами управления div, paragraph, label и heading следующим образом, позволяя определить несколько текстовых строк с разным форматированием.

Примечание  Для отображения текста с разным форматированием можно вместо атрибута style использовать каскадные таблицы стилей (CSS). Это позволяет однократно определить стиль и затем ссылаться на него из нескольких элементов управления. Если в дальнейшем потребуется внести изменения в определение стиля, нужно будет внести их только в одном месте. Подробнее: Каскадные таблицы стилей.

 


<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 для отображения текста в приложении.

Связанные разделы

Руководство по шрифтам

Краткое руководство: добавление элементов управления вводом и редактированием текста