Входной и выходной код HTML на страницах OneNote

Статья
03/26/2023

HTML-код, определяющий содержимое и структуру страницы при создании или обновлении страницы OneNote, называется входным HTML-кодом.

HTML-код, возвращаемый при получении содержимого страницы, называется выходным HTML-кодом. Выходной HTML-код не совпадает со входным.

API OneNote в Microsoft Graph сохраняют семантическое содержимое и базовую структуру входного HTML-кода, но преобразовывают ее в набор поддерживаемых элементов HTML и свойств CSS. API также добавляют настраиваемые атрибуты, поддерживающие функции OneNote.

В этой статье описываются основные элементы и атрибуты входного и выходного HTML-кода. Разбираться во входном HTML-коде полезно при создании и обновлении содержимого страницы, а в выходном — при анализе возвращаемого содержимого страницы.

Элемент body

HTML-содержимое в тексте страницы представляет ее содержимое и структуру, в том числе ресурсы изображений и файлов. Входной и выходной HTML-код для элемента body может содержать перечисленные ниже атрибуты.

Входные атрибуты

Входной атрибут	Описание
data-absolute-enabled	Указывает, поддерживают ли во входном тексте элементы с абсолютным положением.
style	Свойства CSS style для основного текста. В выходном HTML-коде входные параметры могут быть встроены в соответствующие дочерние элементы. В настоящее время цвет фона не поддерживается для элемента body.

Входной атрибут

Описание

data-absolute-enabled

Указывает, поддерживают ли во входном тексте элементы с абсолютным положением.

style

Свойства CSS style для основного текста. В выходном HTML-коде входные параметры могут быть встроены в соответствующие дочерние элементы.

В настоящее время цвет фона не поддерживается для элемента body.

Выходные атрибуты

Выходной атрибут	Описание
data-absolute-enabled	Указывает, поддерживаются ли в тексте элементы с абсолютным положением. В выходном HTML-коде всегда задано значение true.
style	Свойства font-family и font-size основного текста.

Элементы div

Элементы div содержат текст, изображения и другой контент. Входной и выходной HTML-код для элемента div может содержать перечисленные ниже атрибуты.

Входные атрибуты

Входной атрибут	Описание
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
data-render-fallback	Резервное действие в случае ошибки извлечения: render (по умолчанию) или none
data-render-method	Выполняемый метод извлечения, например `extract.businesscard` или `extract.recipe`
data-render-src	Источник контента для извлечения.
style	Свойства положения, размера, шрифта и цвета для элемента div: position (только значение absolute), left, top и width (высота элементов Div настраивается автоматически). Используется для создания элемента div с абсолютным положением, только если он является непосредственным дочерним элементом основного текста, для которого задан атрибут `data-absolute-enabled="true"`. Пример: `<div style="position:absolute;width:360px;top:350px;left:300px" ... />` Свойства CSS style для элемента. В выходных данных HTML эти значения возвращаются встроенными в соответствующие дочерние элементы.

API OneNote в Microsoft Graph заключают все содержимое основного текста по крайней мере в один элемент div. API создает разделитель по умолчанию (с атрибутом data-id="_default") для содержимого основного текста, если:

Входной атрибут data-absolute-enabled элемента body пропущен или для него задано значение false. В этом случае все содержимое основного текста помещается в разделитель по умолчанию.
Для входного атрибута data-absolute-enabled элемента body задано значение true, но входной HTML-код содержит непосредственные дочерние элементыdiv, img или object без абсолютного положения. В этом случае непосредственные дочерние элементы div, img или object без абсолютного положения помещаются в элементы div по умолчанию.

Выходные атрибуты

Выходной атрибут	Описание
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
id	Уникальный сгенерированный ИД элемента. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса `includeIDs=true`. Используется для обновления содержимого страницы.
style	Свойства позиции и размера разделителя.

Вспомогательные разделители

Если элемент div во входных данных HTML не входит в структуру страницы и не переносит сведения, используемые приложением OneNote, API перемещает содержимое разделителя в родительский или используемый по умолчанию разделитель. Этот процесс показан в приведенных ниже примерах.

Входной HTML-код

Содержит вспомогательный вложенный разделитель.

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div>
            <p>Some text</p>
            <div>
                <p>More text inside a div that doesn't define page structure</p>
            </div>
        </div>
    </body>
</html>

Выходной HTML-код

Примечание.

Содержимое разделителя перемещено в родительский разделитель, а вложенные теги <div> удалены. Элемент div был бы сохранен, если бы в нем были определены какие-либо семантические сведения, такие как data-id (пример: <div data-id="keep-me">).

<html htmlns="https://www.w3.org/1999/xhtml" lang="en-US">
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true" style="font-family:Calibri;font-size:11px">
        <div data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
            <p>Some text</p>
            <p>More text inside a nested div</p>
        </div>
    </body>
</html>

Элементы img

Для представления изображений на страницах OneNote используются элементы img. Входной и выходной HTML-код для элемента img может содержать перечисленные ниже атрибуты.

Входные атрибуты

Входной атрибут	Описание
alt	Предоставленный замещающий текст для изображения.
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
data-render-src	Должно было задано значение data-render-src или src. Веб-страница, которая будет отображаться в виде битового изображения на странице OneNote: - `data-render-src="https://..."` для общедоступного URL-адреса. - `data-render-src="name:BlockName"` для части изображения в блоке Presentation составного запроса. Этот метод удобно использовать, если веб-страница слишком сложна для достоверного отображения в OneNote или для использования страницы необходимы учетные данные.
data-tag	Тег заметки для элемента.
style	Свойства положения и размера изображения: position (только absolute), left, top, width и height. Размер можно задать для любого изображения. Свойства положения используются для создания изображения с абсолютным положением, только если изображение является непосредственным дочерним элементом основного текста, для которого задан атрибут `data-absolute-enabled="true"`. Пример: `<img style="position:absolute;width:360px;top:350px;left:300px" ... />` В выходном HTML-коде размеры изображения возвращаются по отдельности через атрибуты width и height.
src	Должно было задано значение src или data-render-src. Изображение, отображаемое на странице OneNote: - `src="https://..."`: URL-адрес общедоступного изображения в Интернете. - `src="name:BlockName"`: именованная часть составного запроса, представляющая изображение.
width, height	Ширина и высота изображения в пикселях, но без обозначения px. Пример: `width="400"`

Примечание.

API OneNote автоматически определяют тип входного изображения и возвращают его в качестве атрибута data-fullres-src-type в выходном коде HTML. API также возвращает тип оптимизированного изображения в атрибуте data-src-type.

Выходные атрибуты

Выходной атрибут	Описание
alt	Предоставленный замещающий текст для изображения.
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
data-index	Положение изображения. Для поддержки разделения изображений.
data-fullres-src	Конечная точка версии изображения, которая была изначально внедрена на странице.
data-fullres-src-type	Тип мультимедиа для ресурса data-fullres-src, например `image/png` или `image/jpeg`.
data-options	Тип источника: printout для PDF-файлов или splitimage для всех остальных. Применяется только к разделенным изображениям, созданным с использованием атрибута data-render-src.
data-render-original-src	Исходный URL-адрес источника изображения, если исходное изображение находится в общедоступной части Интернета и создано с использованием атрибута data-render-src.
data-src-type	Тип мультимедиа для ресурса src, например `image/png` или `image/jpeg`.
data-tag	Тег заметки для элемента.
id	Уникальный сгенерированный ИД элемента. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса `includeIDs=true`. Используется для обновления содержимого страницы.
src	Конечная точка версии изображения, оптимизированного для веб-браузеров, а также мобильных телефонов и планшетов.
style	Свойства позиции изображения.
width, height	Ширина или высота изображения в пикселях.

Примеры выходного HTML-кода для изображений

Выходные элементы img содержат конечные точки для ресурсов файлов изображений и типа изображения, как показано ниже. Вы можете отправлять отдельные запросы GET к конечным точкам ресурсов изображений, чтобы получать их двоичное содержимое.

<img 
    src="https://graph.microsoft.com/v1.0/me/onenote/resources/{image-id}/$value"  
    data-src-type="image/png"
    data-fullres-src="https://graph.microsoft.com/v1.0/me/onenote/resources/{image-id}/$value"  
    data-fullres-src-type="image/png" ... />

В приведенных ниже примерах показаны сведения, которые может содержать элемент img в выходном HTML-коде.

Изображение с ресурсами высокого разрешения для Интернета

<img
    src="{web-ready-image-resource-url}/$value"
    data-src-type="image/{type}"
    data-fullres-src="{high-resolution-image-resource-url}/$value"
    data-fullres-src-type="image/{type}"
    [data-render-original-src="{original-source-url-or-named-part}"]
    [data-id="{image-id}"]
    [alt="supplied alt text"]
    [width="345"] [height="180"]
    [style="..."] />

Изображение, созданное с использованием атрибута data-render-src

<img
    src="{web-ready-image-resource-url}/$value"
    data-src-type="image/{type}"
    data-fullres-src="{high-resolution-image-resource-url}/$value"
    data-fullres-src-type="image/{type}"
    data-render-original-src="{original-source-url-or-named-part}"
    [data-id="{image-id}"]
    [data-index="{index-of-split-image}"]
    [data-options="{printout-or-splitimage}"]
    [alt="supplied alt text"]
    [width="1024"] [height="1900"]
    [style="..."] />

Разделенные изображения

Изображения, созданные с использованием атрибута data-render-src (из URL-адреса страницы или именованной части), могут быть разделены на несколько компонентов для повышения производительности и удобства отрисовки. Всем компонентам изображения назначается одно и то же значение data-id. У каждого компонента изображения есть атрибут data-index с отсчетом от нуля, определяющий исходную вертикальную компоновку.

Разделенное изображение с тремя компонентами

<div data-id="multi-component-image" style="position:absolute;left:48px;top:120px;width:624px">
    <img
        src="{image-resource0-url}/$value"
        data-src-type="image/{type}"
        data-fullres-src="{image-resource0-url}/$value" 
        data-fullres-src-type="image/{type}" 
        data-index="0" 
        data-render-original-src="{original-source-url-or-named-part}"
        data-id="{same-image-id}" ... />
    <img 
        src="{image-resource1-url}/$value" 
        data-src-type="image/{type}" 
        data-fullres-src="{image-resource1-url}/$value" 
        data-fullres-src-type="image/{type}" 
        data-index="1" 
        data-render-original-src="{original-source-url-or-named-part}"
        data-id="{same-image-id}" ... />
    <img 
        src="{image-resource2-url}/$value" 
        data-src-type="image/{type}" 
        data-fullres-src="{image-resource2-url}/$value" 
        data-fullres-src-type="image/{type}" 
        data-index="2" 
        data-render-original-src=""{original-source-url-or-named-part}"
        data-id="{same-image-id}" ... />
</div>

Так как пользователи могут перемещать изображения на странице, индексы могут возвращаться в измененном порядке. Сортировка должна выполняться сверху вниз, а затем слева направо (если возникнут конфликты при вертикальной сортировке).

Элементы iframe

Страницы OneNote могут содержать внедренные видео, представленные элементами iframe.

Примечание.

Также можно вложить видеофайл с помощью элемента object.

Входные атрибуты

Входной атрибут	Описание
data-original-src	Обязательный. URL-адрес источника видео. См. список поддерживаемых источников видео. Пример: `data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"`
width, height	Ширина или высота элемента iframe в пикселях. Пример: `width=300`

Выходные атрибуты

Выходной атрибут	Описание
data-original-src	URL-адрес источника видео.
src	Ссылка на видео, внедренное в страницу OneNote.
width, height	Ширина или высота элемента iframe в пикселях. Пример: `width=300`

Пример выходного HTML-кода для видео

Выходные элементы iframe содержат конечные точки, ссылающиеся на исходную страницу и видео, как показано ниже.

<iframe 
    width="340" height="280" 
    data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8" 
    src="https://www.youtube.com/embed/3Ztr44aKmQ8?feature=oembed&autoplay=true" />

Элементы object

Страницы OneNote могут содержать вложения, представленные элементами object. Входной и выходной HTML-код для элемента object может содержать перечисленные ниже атрибуты.

Примечание.

API OneNote также может отображать содержимое файлов в виде изображений на странице, если файл отправлен как изображение и использует атрибут data-render-src. Пример: <img data-render-src="name:part-name" ... />

Входные атрибуты

Входной атрибут	Описание
data	Обязательный. Имя части, которая представляет файл в составном запросе.
data-attachment	Обязательно. Имя файла.
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
style	Свойства положения и размера объекта: position (только absolute), left, top и width. Используется для создания объекта с абсолютным положением, только если объект является непосредственным дочерним элементом основного текста, для которого задан атрибут `data-absolute-enabled="true"`. Пример: `<object style="position:absolute;top:350px;left:300px" ... />`
type	Обязательный. Стандартный тип файла мультимедиа. Для файлов известных типов на странице OneNote отображается значок, связанный с типом файла. Для файлов неизвестных типов отображается универсальный значок файла.

Выходные атрибуты

Выходной атрибут	Описание
data	Конечная точка файлового ресурса.
data-attachment	Имя файла.
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
id	Уникальный сгенерированный ИД элемента. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса `includeIDs=true`. Используется для обновления содержимого страницы.
style	Свойства позиции объекта.
type	Стандартный тип файла мультимедиа.

Пример выходных данных HTML для объектов

Выходные элементы object содержат конечные точки, ссылающиеся на файловые ресурсы со страницы, как показано ниже. Вы можете отправлять отдельные запросы GET к конечным точкам файловых ресурсов, чтобы получать их двоичное содержимое.

<object
    data="https://graph.microsoft.com/v1.0/me/onenote/resources/{file-id}/$value"
    data-attachment="fileName.pdf" 
    type="application/pdf" 
    [style="..."] />

Абзацы и заголовки

Входной и выходной HTML-код для абзацев, заголовков и других текстовых контейнеров может содержать перечисленные ниже атрибуты.

Входные атрибуты

Входной атрибут	Описание
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
data-tag	Тег заметки для элемента p или h1 - h6.
style	Свойства CSS style для элемента.

Выходные атрибуты

Выходной атрибут	Описание
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
data-tag	Тег заметки для элемента p или h1 - h6.
id	Уникальный сгенерированный ИД элемента. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса `includeIDs=true`. Используется для обновления содержимого страницы.
style	Свойства CSS style для элемента. В выходном HTML-коде эти значения могут быть встроены в элементы span или соответствующие дочерние элементы.

В приведенных ниже примерах показан входной HTML-код, где используются разные способы определения стилей в текстовых контейнерах, и возвращаемый выходной HTML-код.

Входной HTML-код со стилями, определенными с помощью встроенных стилей знаков, в начальном теге внутри элемента span.

<h1>Heading <i>One</i> text</h1>
<p style="font-size:8pt;color:green;font-family:Courier;text-align:center">Some text</p>
<p>Some <span  style="font-size:16px;color:#ff0000;font-family:Segoe UI Black">more</span> text</p>

Выходной HTML-код со стилем знака `<i>` и параметрами шрифта в начальном теге `<p>`, возвращаемыми в виде встроенных стилей CSS в элементах span.

<h1 style="font-size:16pt;color:#1e4e79;margin-top:11pt;margin-bottom:11pt">Heading <span style="font-style:italic">One</span> text</h1>
<p style="text-align:center"><span style="font-family:Courier;font-size:8pt;color:green">Some text</span></p>
<p>Some <span style="font-family:Segoe UI Black;font-size:12pt;color:red">more</span> text</p>

Списки

Для представления списков используются элементы ol или ul, которые содержат элементы списка, представленные элементами li.

Входной и выходной HTML-код списков и их элементов может содержать перечисленные ниже атрибуты.

Входные атрибуты

Входной атрибут	Описание
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
data-tag	Тег заметки в элементе ul, ol или li.
style	Свойство list-style-type и свойство CSS style для списка или его элемента.

Выходные атрибуты

Выходной атрибут	Описание
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
data-tag	Тег заметки в элементе span внутри элемента li.
id	Уникальный сгенерированный ИД элемента. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса `includeIDs=true`. Используется для обновления содержимого страницы.
style	Свойство list-style-type и свойство CSS style для элемента. В выходном HTML-коде параметры на уровне списка возвращаются в элементах списка. Свойства по умолчанию не возвращаются.

Стили списков

API OneNote в Microsoft Graph поддерживают следующие стили списков:

Упорядоченный список	Неупорядоченный список
none	none
decimal (по умолчанию)	disc (по умолчанию)
lower-alpha	circle
lower-roman	square
upper-alpha
upper-roman

Вы можете применять глобальные стили для списка в элементе ol или ul входных данных HTML, но стили возвращаются в элементах li.

Однородный стиль списка

В этом примере показан входной HTML-код, который задает тип стиля списка в элементе ol и стили CSS для отдельных элементов списка.

<ol style="list-style-type:upper-roman;color:blue">
    <li style="font-weight:bold">Jacksonville</li>
    <li style="text-decoration:line-through">Orlando</li>
    <li style="font-family:Courier">Naples</li>
</ol>

Ниже представлен выходной HTML-код. Обратите внимание, что стили возвращаются встроенными в отдельные элементы li или span.

<ol>
    <li style="list-style-type:upper-roman"><span style="color:blue;font-weight:bold">Jacksonville</span></li>
    <li style="list-style-type:upper-roman"><span style="color:blue;text-decoration:line-through">Orlando</span></li>
    <li style="list-style-type:upper-roman"><span style="font-family:Courier;color:blue">Naples</span></li>
</ol>

Переменные стили списков

В этом примере показан входной HTML-код, который задает разные типы стилей списков в элементах li.

<ul style="font-style:italic">
    <li style="list-style-type:square">square style</li>
    <li style="list-style-type:circle">circle style</li>
    <li style="list-style-type:disc">disc style (default)</li>
</ul>

<ul>
    <li style="list-style-type:square"><span style="font-style:italic">square style</span></li>
    <li style="list-style-type:circle"><span style="font-style:italic">circle style</span></li>
    <li><span style="font-style:italic">disc style (default)</span></li>
</ul>

таблицы;

Таблицы представляются как элементы table, которые могут содержать элементы tr и td. Поддерживаются вложенные таблицы.

Входной и выходной HTML-код для таблиц может содержать перечисленные ниже атрибуты. API OneNote не поддерживают атрибуты rowspan и colspan.

Входные атрибуты

Входной атрибут	Описание
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
style	Свойства CSS style для элемента, а также: - width. Поддерживается в элементах table и td как количество пикселей или процент от ширины страницы. Пример: `width="100px"` или `width="60%"`
граница	Складывает границы с таблицей указанной ширины
ширина	Ширина таблицы
bgcolor	Цвет фона таблицы

Примечание.

Использование свойства border в стиле атрибута таблицы не поддерживается во входном HTML.

Выходные атрибуты

Выходной атрибут	Описание
data-id	Ссылка на элемент. Используется для обновления содержимого страницы.
id	Уникальный сгенерированный ИД элемента. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса `includeIDs=true`. Используется для обновления содержимого страницы.
style	Свойства CSS style для элемента.

В приведенных ниже примерах показан входной HTML-код, где используются разные способы определения стилей для таблиц, и возвращаемый выходной HTML-код.

Входной HTML-код с необязательными параметрами на разных уровнях.

<table border="1"; Width="500"; bgcolor = "green">
    <tr> 
        <td>Cell 1</td> 
        <td>Cell 2</td> 
        <td>Cell 3</td> 
    </tr> 
    <tr style="background-color:blue"> 
        <td style="text-align:right;background-color:red">Left</td> 
        <td style="text-align:center">Middle</td> 
        <td>Right</td> 
    </tr> 
</table>

Выходной HTML-код со стилями CSS, которые возвращаются встроенными в элементы td.

<table style="border:0px">
    <tr>
        <td style="background-color:green;width:166;border:0px">Cell 1</td>
        <td style="background-color:green;width:166;border:0px">Cell 2</td>
        <td style="background-color:green;width:166;border:0px">Cell 3</td>
    </tr>
    <tr>
        <td style="background-color:red;width:166;border:0px;text-align:right">Left</td>
        <td style="background-color:blue;width:166;border:0px;text-align:center">Middle</td>
        <td style="background-color:blue;width:166;border:0px">Right</td>
    </tr>
</table>

Стили

API OneNote в Microsoft Graph поддерживают перечисленные ниже встроенные свойства CSS style для элементов основного текста страницы, например body, div, p, li и span.

Свойство	Пример
background-color	`style="background-color:#66cc66"` (по умолчанию задан белый цвет) Поддерживаются как шестнадцатеричный формат, так и именованные цвета.
color	`style="color:#ffffff"` (по умолчанию задан черный цвет)
font-family	`style="font-family:Courier"` (по умолчанию задан шрифт Calibri)
font-size	`style="font-size:10pt"` (по умолчанию задан размер 11 точек) API принимают размер шрифта в единицах pt или px, но единицы px преобразуются в pt. Десятичные значения округляются до ближайшего значения n,0 или n,5 точек.
font-style	`style="font-style:italic"` (обычный или только курсив)
font-weight	`style="font-weight:bold"` (обычный или только полужирный)
strike-through	`style="text-decoration:line-through"`
text-align	`style="text-align:center"` (только для блочных элементов)
text-decoration	`style="text-decoration:underline"` (без оформления или только подчеркивание)

Кроме того, поддерживаются следующие встроенные стили знаков:

<b>	<i>	<u>
<em>	<strong>	<strike>
<sup>	<sub>	<del>
<cite>

Пример входного и выходного HTML-кода

На приведенном ниже рисунке показана простая страница, созданная с помощью Microsoft Graph.

Изображение страницы OneNote с учебными заметками по материалам из Википедии

Ниже показан входной HTML-код, отправляемый в тексте сообщения для создания страницы.

<html lang="en-US">
    <head>
        <title>Sample Study Notes</title>
        <meta name="created" content="2015-01-01T01:01"/>
    </head>
    <body>
        <h1>Aurora Borealis</h1>
        <p>Dancing lights in the sky. Also called <i>Northern Lights</i>. Caused by solar radiation.</p>
        <br />
        <p><b>Intersting facts</b></p>
        <table>
            <tr>
                <td>Neil Armstrong</td>
                <td>Commander</td>
            </tr>
            <tr>
                <td>Buzz Aldrin</td>
                <td>LM Pilot</td>
            </tr>
            <tr>
                <td>Michael Collins</td>
                <td>Command Module Pilot</td>
            </tr>
        </table>
        <img alt="Apollo 11 commemorative stamp." src="https://upload.wikimedia.org/wikipedia/commons/a/a4/First_Man_on_Moon_1969_Issue-10c.jpg"  width="400"/>
        <p>References:</p>
        <p><a href="https://en.wikipedia.org/wiki/Apollo_11">https://en.wikipedia.org/wiki/Apollo_11</a></p>
        <p><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html</a></p>
    </body>
</html>

Ниже показан выходной HTML-код, который Microsoft Graph возвращает при получении содержимого страницы.

Примечание.

При создании страницы или получении метаданных страницы API возвращает URL-адрес конечной точки content для страницы в свойстве contentUrl.

<html htmlns="https://www.w3.org/1999/xhtml" lang="en-US">
    <head>
        <title>Sample Study Notes</title>
    </head>
    <body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
        <div data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
            <h1 style="font-size:16pt;color:#1e4e79;margin-top:11pt;margin-bottom:11pt">American History 101: Moon Landing</h1>
            <p>First moon landing - July 20, 1969 with Apollo 11 (Eagle)</p>
            <br />
            <p><span style="font-weight:bold">Apollo 11 Astronauts</span></p>
            <table style="border:0px">
                <tr>
                    <td style="border:0px">Neil Armstrong</td>
                    <td style="border:0px">Commander</td>
                </tr>
                <tr>
                    <td style="border:0px">Buzz Aldrin</td>
                    <td style="border:0px">LM Pilot</td>
                </tr>
                <tr>
                    <td style="border:0px">Michael Collins</td>
                    <td style="border:0px">Command Module Pilot</td>
                </tr>
            </table>
            <br />
            <img alt="Apollo 11 commemorative stamp." width="400" height="248" src="https://graph.microsoft.com/v1.0/me/onenote/resources/0-f717b5fa5eaa454da7ecdf72a8c137fe!1-73DBAF9B7E5C4B4C!10456/$value"
                 data-src-type="image/jpeg" data-fullres-src="https://graph.microsoft.com/v1.0/me/onenote/resources/0-f717b5fa5eaa454da7ecdf72a8c137fe!1-73DBAF9B7E5C4B4C!10456/$value" data-fullres-src-type="image/jpeg" />
            <p>References:</p>
            <p><a href="https://en.wikipedia.org/wiki/Apollo_11">https://en.wikipedia.org/wiki/Apollo_11</a></p>
            <p><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html</a></p>
        </div>
    </body>
</html>

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

Входной и выходной код HTML на страницах OneNote

Элемент body

Входные атрибуты

Выходные атрибуты

Элементы div

Входные атрибуты

Выходные атрибуты

Вспомогательные разделители

Входной HTML-код

Выходной HTML-код

Элементы img

Входные атрибуты

Выходные атрибуты

Примеры выходного HTML-кода для изображений

Изображение с ресурсами высокого разрешения для Интернета

Изображение, созданное с использованием атрибута data-render-src

Разделенные изображения

Разделенное изображение с тремя компонентами

Элементы iframe

Входные атрибуты

Выходные атрибуты

Пример выходного HTML-кода для видео

Элементы object

Входные атрибуты

Выходные атрибуты

Пример выходных данных HTML для объектов

Абзацы и заголовки

Входные атрибуты

Выходные атрибуты

Входной HTML-код со стилями, определенными с помощью встроенных стилей знаков, в начальном теге внутри элемента span.

Выходной HTML-код со стилем знака <i> и параметрами шрифта в начальном теге <p>, возвращаемыми в виде встроенных стилей CSS в элементах span.

Списки

Входные атрибуты

Выходные атрибуты

Стили списков

Однородный стиль списка

Переменные стили списков

таблицы;

Входные атрибуты

Выходные атрибуты

Входной HTML-код с необязательными параметрами на разных уровнях.

Выходной HTML-код со стилями CSS, которые возвращаются встроенными в элементы td.

Стили

Пример входного и выходного HTML-кода

Связанные материалы

Обратная связь

Обратная связь

Дополнительные ресурсы

Выходной HTML-код со стилем знака `<i>` и параметрами шрифта в начальном теге `<p>`, возвращаемыми в виде встроенных стилей CSS в элементах span.