Входной и выходной HTML-код на страницах OneNoteInput and output HTML in OneNote pages

HTML-код, определяющий содержимое и структуру страницы при создании или обновлении страницы OneNote, называется входным HTML-кодом.The HTML that defines the page content and structure when you create or update a OneNote page is called input HTML.

HTML-код, возвращаемый при получении содержимого страницы, называется выходным HTML-кодом.The HTML that's returned when you get page content is called output HTML. Выходной HTML-код не совпадает со входным.Output HTML won't be the same as input HTML.

API OneNote в Microsoft Graph сохраняют семантическое содержимое и базовую структуру входного HTML-кода, но преобразовывают ее в набор поддерживаемых элементов HTML и свойств CSS.The OneNote APIs in Microsoft Graph preserve the semantic content and basic structure of the input HTML, but convert it to a set of supported HTML elements and CSS properties. API также добавляют настраиваемые атрибуты, поддерживающие функции OneNote.The APIs also add custom attributes that support OneNote features.

В этой статье описываются основные элементы и атрибуты входного и выходного HTML-кода.This article describes the principal elements and attributes of input and output HTML. Разбираться во входном HTML-коде полезно при создании и обновлении содержимого страницы, а в выходном — при анализе возвращаемого содержимого страницы.It can be helpful to understand input HTML when you're creating or updating page content, and output HTML when you're parsing returned page content.

Элемент bodybody element

HTML-содержимое в тексте страницы представляет ее содержимое и структуру, в том числе ресурсы изображений и файлов.The HTML content in the page body represents the page content and structure, including image and file resources. Входной и выходной HTML-код для элемента body может содержать перечисленные ниже атрибуты.The body element can contain the following attributes in the input and output HTML.

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

Входной атрибутInput attribute ОписаниеDescription
data-absolute-enableddata-absolute-enabled Указывает, поддерживают ли во входном тексте элементы с абсолютным положением.Indicates whether the input body supports absolute positioned elements.
stylestyle

Свойства CSS style для основного текста.The CSS style properties of the body. В выходном HTML-коде входные параметры могут быть встроены в соответствующие дочерние элементы.In the output HTML, input settings might be returned inline on appropriate child elements.

В настоящее время цвет фона не поддерживается для элемента body.Background color is not currently supported for the body element.

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

Выходной атрибутOutput attribute ОписаниеDescription
data-absolute-enableddata-absolute-enabled Указывает, поддерживаются ли в тексте элементы с абсолютным положением.Indicates whether the body supports absolute positioned elements. В выходном HTML-коде всегда задано значение true.Always true in output HTML.
stylestyle Свойства font-family и font-size основного текста.The font-family and font-size properties of the body.

Элементы divdiv elements

Элементы div содержат текст, изображения и другой контент.Div elements contain text, images, and other content. Входной и выходной HTML-код для элемента div может содержать перечисленные ниже атрибуты.A div element can contain the following attributes in the input and output HTML.

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

Входной атрибутInput attribute ОписаниеDescription
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
data-render-fallbackdata-render-fallback Резервное действие в случае ошибки извлечения: render (по умолчанию) или noneThe fallback action if the extraction fails: render (default) or none
data-render-methoddata-render-method Выполняемый метод извлечения, напримерThe extraction method to perform, for example:
extract.businesscard или extract.recipeextract.businesscard or extract.recipe
data-render-srcdata-render-src Источник контента для извлечения.The content source for the extraction.
stylestyle Свойства положения, размера, шрифта и цвета для элемента div:The position, size, font, and color properties for the div:
  • position (только значение absolute), left, top и width (высота элементов Div настраивается автоматически).position (absolute only), left, top, and width (height is auto-configured for divs)

    Используется для создания элемента div с абсолютным положением, только если он является непосредственным дочерним элементом основного текста, для которого задан атрибут data-absolute-enabled="true".Used to create an absolute positioned div, only if the div is a direct child of the body when the body sets data-absolute-enabled="true".

    Пример: <div style="position:absolute;width:360px;top:350px;left:300px" ... />Example: <div style="position:absolute;width:360px;top:350px;left:300px" ... />
  • Свойства CSS style элемента. В выходных данных HTML эти значения возвращаются встроенными в соответствующие дочерние элементы.The CSS style properties of the element. In the output HTML, these values are returned inline on appropriate child elements.

API OneNote в Microsoft Graph заключают все содержимое основного текста по крайней мере в один элемент div.The OneNote APIs in Microsoft Graph wrap all body content in at least one div. API создает разделитель по умолчанию (с атрибутом data-id="_default") для содержимого основного текста, если:The API creates a default div (attributed with data-id="_default") to contain the body content if:

  • Входной атрибут data-absolute-enabled элемента body пропущен или для него задано значение false.The input body element's data-absolute-enabled attribute is omitted or set to false. В этом случае все содержимое основного текста помещается в разделитель по умолчанию.In this case, all body content is put in the default div.

  • Для входного атрибута data-absolute-enabled элемента body задано значение true, но входной HTML-код содержит непосредственные дочерние элементы div, img или object без абсолютного положения.The input body element's data-absolute-enabled attribute is true, but the input HTML contains direct children that aren't absolute positioned div, img, or object elements. В этом случае непосредственные дочерние элементы  div, img или object без абсолютного положения помещаются в элементы div по умолчанию.In this case, direct children that aren't absolute positioned div, img, or object elements are put in the default div.

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

Выходной атрибутOutput attribute ОписаниеDescription
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
idid Уникальный сгенерированный ИД элемента.A unique, generated ID for the element. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса includeIDs=true.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Используется для обновления содержимого страницы.Used to update page content.
stylestyle Свойства позиции и размера разделителя.The position and size properties of the div.

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

Если элемент div во входных данных HTML не входит в структуру страницы и не переносит сведения, используемые приложением OneNote, API перемещает содержимое разделителя в родительский или используемый по умолчанию разделитель.When a div element in the input HTML does not contribute to the page structure or carry information that OneNote uses, the API moves the div's content into the parent or default div. Этот процесс показан в приведенных ниже примерах.This is illustrated in the following examples.

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

Содержит вспомогательный вложенный разделитель.Contains a non-contributing, nested div.

<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-кодOutput HTML

Примечание. Содержимое разделителя было перемещено в родительский разделитель, а вложенные теги <div> удалены.Note: The div's content was moved to the parent div and the nested <div> tags have been removed. Элемент div был бы сохранен, если бы в нем были определены какие-либо семантические сведения, такие как data-id (пример: <div data-id="keep-me">).The div would have been preserved if it defined any semantic information, such as a data-id (example: <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>

Элементы imgimg elements

Для представления изображений на страницах OneNote используются элементы img.Images on OneNote pages are represented by img elements. Входной и выходной HTML-код для элемента img может содержать перечисленные ниже атрибуты.An img element can contain the following attributes in the input and output HTML.

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

Входной атрибутInput attribute ОписаниеDescription
altalt Предоставленный замещающий текст для изображения.The supplied alt text for the image.
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
data-render-srcdata-render-src Должно было задано значение data-render-src или src.Either data-render-src or src is required.

Веб-страница, которая будет отображаться в виде битового изображения на странице OneNote:The webpage to render as a bit-mapped image on the OneNote page:

- data-render-src="https://..." для общедоступного URL-адреса.- data-render-src="https://..." for a public URL.

- data-render-src="name:BlockName" для части изображения в блоке Presentation составного запроса.- data-render-src="name:BlockName" for an image part in the "Presentation" block of a multipart request.

Этот метод удобно использовать, если веб-страница слишком сложна для достоверного отображения в OneNote или для использования страницы необходимы учетные данные.This method is useful when the webpage is more complex than the OneNote page can faithfully render, or when the page requires login credentials.
data-tagdata-tag Тег заметки для элемента.A note tag on the element.
stylestyle Свойства положения и размера изображения: position (только absolute), left, top, width и height.The position and size properties for the image: position (absolute only), left, top, width, and height.

Размер можно задать для любого изображения.Size can be set on any image.

Свойства положения используются для создания изображения с абсолютным положением, только если изображение является непосредственным дочерним элементом основного текста, для которого задан атрибут data-absolute-enabled="true".Position properties are used to create an absolute positioned image, only if the image is a direct child of the body when the body sets data-absolute-enabled="true".

Пример: <img style="position:absolute;width:360px;top:350px;left:300px" ... />Example: <img style="position:absolute;width:360px;top:350px;left:300px" ... />

В выходном HTML-коде размеры изображения возвращаются по отдельности через атрибуты width и height.In the output HTML, the image size is returned separately in width and height attributes.
srcsrc Должно было задано значение src или data-render-src.Either src or data-render-src is required.

Изображение, отображаемое на странице OneNote:The image to render on the OneNote page:

- src="https://...": URL-адрес общедоступного изображения в Интернете.- src="https://..." for a URL to a publicly available image on the Internet.

- src="name:BlockName": именованная часть составного запроса, представляющая изображение.- src="name:BlockName" for a named part in a multipart request that represents the image.
width, heightwidth, height Ширина и высота изображения в пикселях, но без обозначения px.The width or height of the image, in pixels but without the px. Пример: width="400"Example: width="400"

Примечание. API OneNote автоматически определяют тип входного изображения и возвращают его в качестве атрибута data-fullres-src-type в выходном HTML-коде.Note: The OneNote APIs automatically detect the input image type, and return it as the data-fullres-src-type in the output HTML. API также возвращает тип оптимизированного изображения в атрибуте data-src-type.The API also returns the image type of the optimized image in data-src-type.

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

Выходной атрибутOutput attribute ОписаниеDescription
altalt Предоставленный замещающий текст для изображения.The supplied alt text for the image.
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
data-indexdata-index Положение изображения. Для поддержки разделения изображений.The position of the image. For split image support.
data-fullres-srcdata-fullres-src Конечная точка версии изображения, которая была изначально внедрена на странице.The endpoint for the version of the image resource that was originally embedded in the page.
data-fullres-src-typedata-fullres-src-type Тип мультимедиа для ресурса data-fullres-src, например image/png или image/jpeg.The media type of the data-fullres-src resource, for example: image/png or image/jpeg.
data-optionsdata-options Тип источника: printout для PDF-файлов или splitimage для всех остальных. Применяется только к разделенным изображениям, созданным с помощью атрибута data-render-src.The source type: printout for PDF files or splitimage for all others. Applies only to split images created with the data-render-src attribute.
data-render-original-srcdata-render-original-src Исходный URL-адрес источника изображения, если исходное изображение находится в общедоступной части Интернета и создано с использованием атрибута data-render-src.The original source URL of the image, if the source image is from the public internet and was created with the data-render-src attribute.
data-src-typedata-src-type Тип мультимедиа для ресурса src, например image/png или image/jpeg.The media type of the src resource, for example: image/png or image/jpeg.
data-tagdata-tag Тег заметки для элемента.A note tag on the element.
idid Уникальный сгенерированный ИД элемента.A unique, generated ID for the element. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса includeIDs=true.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Используется для обновления содержимого страницы.Used to update page content.
srcsrc Конечная точка версии изображения, оптимизированного для веб-браузеров, а также мобильных телефонов и планшетов.The endpoint for the version of the image resource that has been optimized for web browsers and mobile and tablet form factors.
stylestyle Свойства позиции изображения.The position properties of the image.
width, heightwidth, height Ширина или высота изображения в пикселях.The width or height of the image, in pixels.

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

Выходные элементы img содержат конечные точки для ресурсов файлов изображений и типа изображения, как показано ниже.Output img elements contain endpoints for image file resources and the image type, as shown below. Вы можете отправлять отдельные запросы GET к конечным точкам ресурсов изображений, чтобы получать их двоичное содержимое.You can make separate GET requests to image resource endpoints to retrieve their binary contents.

<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-коде.The following examples show the information an img element might contain in the output HTML.

Изображение с ресурсами высокого разрешения для ИнтернетаImage with web-ready and high resolution resources

<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-srcImage created by using the data-render-src attribute

<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="..."] />

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

Изображения, созданные с использованием атрибута data-render-src (из URL-адреса страницы или именованной части), могут быть разделены на несколько компонентов для повышения производительности и удобства отрисовки.Images that are created using the data-render-src attribute (from a webpage URL or a named part) might be split into multiple component images for performance and rendering reasons. Всем компонентам изображения назначается одно и то же значение data-id.Component images are all assigned the same data-id value. У каждого компонента изображения есть атрибут data-index с отсчетом от нуля, определяющий исходную вертикальную компоновку.Each component image has a zero-based data-index attribute that defines the original vertical layout.

Разделенное изображение с тремя компонентамиSplit image with three component images

<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>

Так как пользователи могут перемещать изображения на странице, индексы могут возвращаться в измененном порядке.Because users can move the images on the page, the returned indexes might be out of order. Сортировка должна выполняться сверху вниз, а затем слева направо (если возникнут конфликты при вертикальной сортировке).Ordering should be in top to bottom y-order, and then left to right x-order if there are y-order conflicts.

Элементы iframeiframe elements

Страницы OneNote могут содержать внедренные видео, представленные элементами iframe.OneNote pages can contain embedded videos represented by iframe elements.

Примечание. Вы также можете вложить видеофайл с помощью элемента object.Note: You can also attach a video file using an object element.

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

Входной атрибутInput attribute ОписаниеDescription
data-original-srcdata-original-src Обязательный.Required. URL-адрес источника видео.The URL of the video source. См. список поддерживаемых источников видео.See the list of supported video sources.

Пример: data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"Example: data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"
width, heightwidth, height Ширина или высота элемента iframe в пикселях.The width or height of the iframe, in pixels. Пример: width=300Example: width=300

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

Выходной атрибутOutput attribute ОписаниеDescription
data-original-srcdata-original-src URL-адрес источника видео.The URL of the video source.
srcsrc Ссылка на видео, внедренное в страницу OneNote.A link to the video that is embedded in the OneNote page.
width, heightwidth, height Ширина или высота элемента iframe в пикселях.The width or height of the iframe, in pixels.

Пример: width=300Example: width=300

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

Выходные элементы iframe содержат конечные точки, ссылающиеся на исходную страницу и видео, как показано ниже.Output iframe elements contain endpoints that link to the source page and video, as shown.

<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" />

Элементы objectobject elements

Страницы OneNote могут содержать вложения, представленные элементами object.OneNote pages can contain file attachments represented by object elements. Входной и выходной HTML-код для элемента object может содержать перечисленные ниже атрибуты.An object element can contain the following attributes in the input and output HTML.

Примечание. API OneNote также может отображать содержимое файлов в виде изображений на странице, если файл отправлен как изображение и использует атрибут data-render-src.Note: The OneNote APIs can also render file content as images in a page when the file is sent as an image and uses the data-render-src attribute. Пример: <img data-render-src="name:part-name" ... />Example: <img data-render-src="name:part-name" ... />

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

Входной атрибутInput attribute ОписаниеDescription
datadata Обязательный.Required. Имя части, которая представляет файл в составном запросе.The name of the part that represents the file in the multipart request.
data-attachmentdata-attachment Обязательный параметр. Имя файла.Required. The file name.
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
stylestyle Свойства положения и размера объекта: position (только absolute), left, top и width.The position and size properties for the object: position (absolute only), left, top, and width.

Используется для создания объекта с абсолютным положением, только если объект является непосредственным дочерним элементом основного текста, для которого задан атрибут data-absolute-enabled="true".Used to create an absolute positioned object, only if the object is a direct child of the body when the body sets data-absolute-enabled="true".

Пример: <object style="position:absolute;top:350px;left:300px" ... />Example: <object style="position:absolute;top:350px;left:300px" ... />
typetype Обязательный.Required.

Стандартный тип файла мультимедиа.The standard media file type. Для файлов известных типов на странице OneNote отображается значок, связанный с типом файла.Known file types display the icon associated with the file type on the OneNote page. Для файлов неизвестных типов отображается универсальный значок файла.Unknown file types display a generic file icon.

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

Выходной атрибутOutput attribute ОписаниеDescription
datadata Конечная точка файлового ресурса.The endpoint for the file resource.
data-attachmentdata-attachment Имя файла.The file name.
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
idid Уникальный сгенерированный ИД элемента.A unique, generated ID for the element. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса includeIDs=true.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Используется для обновления содержимого страницы.Used to update page content.
stylestyle Свойства позиции объекта.The position properties of the object.
typetype Стандартный тип файла мультимедиа.The standard media file type.

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

Выходные элементы object содержат конечные точки, ссылающиеся на файловые ресурсы со страницы, как показано ниже.Output object elements contain endpoints that link to the file resources in the page, as shown. Вы можете отправлять отдельные запросы GET к конечным точкам файловых ресурсов, чтобы получать их двоичное содержимое.You can make separate GET requests to file resource endpoints to retrieve their binary contents.

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

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

Входной и выходной HTML-код для абзацев, заголовков и других текстовых контейнеров может содержать перечисленные ниже атрибуты.Paragraphs, headings, and other text containers can contain the following attributes in the input and output HTML.

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

Входной атрибутInput attribute ОписаниеDescription
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
data-tagdata-tag Тег заметки для элемента p или h1 - h6.A note tag on a p or h1 - h6 element.
stylestyle Свойства CSS style для элемента.The CSS style properties of the element.

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

Выходной атрибутOutput attribute ОписаниеDescription
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
data-tagdata-tag Тег заметки для элемента p или h1 - h6.A note tag on a p or h1 - h6 element.
idid Уникальный сгенерированный ИД элемента.A unique, generated ID for the element. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса includeIDs=true.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Используется для обновления содержимого страницы.Used to update page content.
stylestyle Свойства CSS style для элемента.The CSS style properties of the element. В выходном HTML-коде эти значения могут быть встроены в элементы span или соответствующие дочерние элементы.In the output HTML, these values may be returned inline on appropriate child elements or on span elements.

В приведенных ниже примерах показан входной HTML-код, где используются разные способы определения стилей в текстовых контейнерах, и возвращаемый выходной HTML-код.The following examples show input HTML that uses different ways to define styles on text containers and the output HTML that's returned.

Входной HTML-код со стилями, определенными с помощью встроенных стилей знаков, в начальном теге внутри элемента span.Input HTML with styles defined using inline character styles, in the start tag, and within a span element.

<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.Output HTML with the <i> character style and the font settings in the <p> start tag returned as inline CSS styles on span elements.

<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>

СпискиLists

Для представления списков используются элементы ol или ul, которые содержат элементы списка, представленные элементами li.Lists are represented as ol or ul elements that contain list items represented as li elements.

Входной и выходной HTML-код списков и их элементов может содержать перечисленные ниже атрибуты.Lists and list items can contain the following attributes in the input and output HTML.

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

Входной атрибутInput attribute ОписаниеDescription
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
data-tagdata-tag Тег заметки в элементе ul, ol или li.A note tag on a ul, ol, or li element.
stylestyle Свойство list-style-type и свойство CSS style для списка или его элемента.The list-style-type and the CSS style properties for the list or list item.

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

Выходной атрибутOutput attribute ОписаниеDescription
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
data-tagdata-tag Тег заметки в элементе span внутри элемента li.A note tag on a span in an li element.
idid Уникальный сгенерированный ИД элемента.A unique, generated ID for the element. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса includeIDs=true.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Используется для обновления содержимого страницы.Used to update page content.
stylestyle Свойство list-style-type и свойство CSS style для элемента.The list-style-type and CSS style properties of the element. В выходном HTML-коде параметры на уровне списка возвращаются в элементах списка.In the output HTML, list-level settings are returned on list items. Свойства по умолчанию не возвращаются.Default properties are not returned.

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

API OneNote в Microsoft Graph поддерживают следующие стили списков:The OneNote APIs in Microsoft Graph support the following list styles:

Упорядоченный списокOrdered list Неупорядоченный списокUnordered list
nonenone nonenone
decimal (по умолчанию)decimal (default)
disc (по умолчанию)disc (default)
lower-alphalower-alpha
circlecircle
lower-romanlower-roman

squaresquare | | upper-alphaupper-alpha |   | | upper-romanupper-roman |   |

Вы можете применять глобальные стили для списка в элементе ol или ul входных данных HTML, но стили возвращаются в элементах li.You can apply global styles for a list on the ol or ul element in the input HTML, but styles are returned on the li elements.

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

В этом примере показан входной HTML-код, который задает тип стиля списка в элементе ol и стили CSS для отдельных элементов списка.This example shows input HTML that sets the list style type on the ol element and CSS styles on individual list items.

<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.This is the output HTML. Notice that styles are returned inline on the individual li or span elements.

<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>

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

В этом примере показан входной HTML-код, который задает разные типы стилей списков в элементах li.This example shows input HTML that sets different list style types on the li elements.

<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>

Ниже приводятся выходные данные HTML. Обратите внимание, что стили возвращаются встроенными в отдельные элементы li или span.This is the output HTML. Notice that styles are returned inline on the individual li or span elements.

<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>

таблицы;Tables

Таблицы представляются как элементы table, которые могут содержать элементы tr и td. Поддерживаются вложенные таблицы.Tables are represented as table elements that can contain tr and td elements. Nested tables are supported.

Входной и выходной HTML-код для таблиц может содержать перечисленные ниже атрибуты.Tables can contain the following attributes in the input and output HTML. API OneNote не поддерживают атрибуты rowspan и colspan.The OneNote APIs do not support rowspan or colspan attributes.

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

Входной атрибутInput attribute ОписаниеDescription
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
stylestyle Свойства CSS style для элемента, а также:The CSS style properties of the element, and also:
- border.- border. Допустимые значения — 0px и 1px.Can be either 0px or 1px.
- width.- width. Поддерживается в элементах table и td как количество пикселей или процент от ширины страницы.Supported by table and td as pixels or percentage of page width.

Пример: width="100px" или width="60%"Example: width="100px" or width="60%"

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

Выходной атрибутOutput attribute ОписаниеDescription
data-iddata-id Ссылка на элемент.A reference for the element.

Используется для обновления содержимого страницы.Used to update page content.
idid Уникальный сгенерированный ИД элемента.A unique, generated ID for the element. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса includeIDs=true.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Используется для обновления содержимого страницы.Used to update page content.
stylestyle Свойства CSS style для элемента.The CSS style properties of the element.

В приведенных ниже примерах показан входной HTML-код, где используются разные способы определения стилей для таблиц, и возвращаемый выходной HTML-код.The following examples show input HTML that uses different ways to define styles on tables and the output HTML that's returned.

Входной HTML-код с необязательными параметрами на разных уровнях.Input HTML with optional settings at different levels

<table style="border:0px;width:500px;background-color: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.Output HTML with CSS styles returned inline on the td elements

<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>

СтилиStyles

API OneNote в Microsoft Graph поддерживают перечисленные ниже встроенные свойства CSS style для элементов основного текста страницы, например body, div, p, li и span.OneNote APIs in Microsoft Graph support the following inline CSS style properties for elements in the page body, such as body, div, p, li, and span.

СвойствоProperty ПримерExample
background-colorbackground-color style="background-color:#66cc66" (по умолчанию задан белый цвет)style="background-color:#66cc66" (defaults to white)

Поддерживаются как шестнадцатеричный формат, так и именованные цвета.Both hexadecimal format and named colors are supported.
colorcolor style="color:#ffffff" (по умолчанию задан черный цвет)style="color:#ffffff" (defaults to black)
font-familyfont-family style="font-family:Courier" (по умолчанию задан шрифт Calibri)style="font-family:Courier" (defaults to Calibri)
font-sizefont-size style="font-size:10pt" (по умолчанию задан размер 11 точек)style="font-size:10pt" (defaults to 11pt)

API принимают размер шрифта в единицах pt или px, но единицы px преобразуются в pt.The APIs accept font size in pt or px, but converts px to pt. Десятичные значения округляются до ближайшего значения n,0 или n,5 точек.Decimal values are rounded to the nearest n.0pt or n.5pt.
font-stylefont-style style="font-style:italic" (обычный или только курсив)style="font-style:italic" (normal or italic only)
font-weightfont-weight style="font-weight:bold" (обычный или только полужирный)style="font-weight:bold" (normal or bold only)
strike-throughstrike-through style="text-decoration:line-through"
text-aligntext-align style="text-align:center" (только для блочных элементов)style="text-align:center" (for block elements only)
text-decorationtext-decoration style="text-decoration:underline" (без оформления или только подчеркивание)style="text-decoration:underline" (none or underline only)

Кроме того, поддерживаются следующие встроенные стили знаков:The following inline character styles are also supported:

   

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

На приведенном ниже рисунке показана простая страница, созданная с помощью Microsoft Graph.The following image shows a simple page that was created with Microsoft Graph.

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

Ниже показан входной HTML-код, отправляемый в тексте сообщения для создания страницы.This is the input HTML sent in the message body to create the page.

<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 возвращает при получении содержимого страницы.This is the output HTML that Microsoft Graph returns when you get page content.

Примечание. При создании страницы или получении метаданных страницы API возвращает URL-адрес конечной точки content для страницы в свойстве contentUrl.Note: When you create a page or get page metadata, the API returns the content endpoint URL of the page in the contentUrl property.

<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>

См. такжеSee also