OneNote 页中的输入和输出 HTMLInput and output HTML in OneNote pages

创建更新 OneNote 页时定义页面内容和结构的 HTML 被称为输入 HTMLThe HTML that defines the page content and structure when you create or update a OneNote page is called input HTML.

获取页面内容时返回的 HTML 被称为输出 HTMLThe HTML that's returned when you get page content is called output HTML. 输出 HTML 与输入 HTML 存在差别。Output HTML won't be the same as input HTML.

Microsoft Graph 中的 OneNote API 保留输入 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 以及分析返回的页面内容时的输出 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.

body 元素body element

页面正文中的 HTML 内容表示页面内容和结构,其中包括图像和文件资源。The HTML content in the page body represents the page content and structure, including image and file resources. body 元素可以在输入和输出 HTML 中包含下列属性。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 中始终为 trueAlways true in output HTML.
stylestyle 正文的 font-familyfont-size 属性。The font-family and font-size properties of the body.

div 元素div elements

Div 元素包含文本、图像和其他内容。Div elements contain text, images, and other content. div 元素可以在输入和输出 HTML 中包含下列属性。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.businesscardextract.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:
  • 位置(仅限绝对)、左侧顶部宽度(会为 div 自动配置高度)position (absolute only), left, top, and width (height is auto-configured for divs)

    用于创建绝对定位 div(仅在正文设置 data-absolute-enabled="true" 且 div 是正文的直接子级时)。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 样式属性。在输出 HTML 中,这些值在适当的子元素上内嵌返回。The CSS style properties of the element. In the output HTML, these values are returned inline on appropriate child elements.

Microsoft Graph 中的 OneNote API 至少在一个 div 中包装所有正文内容。The OneNote APIs in Microsoft Graph wrap all body content in at least one div. 在以下情况下,API 创建一个默认 div(使用 data-id="_default" 设定属性)以包含正文内容:The API creates a default div (attributed with data-id="_default") to contain the body content if:

  • 输入 body 元素的 data-absolute-enabled 属性被省略或被设置为 falseThe input body element's data-absolute-enabled attribute is omitted or set to false. 在此情况下,所有正文内容都被设置为默认的 div。In this case, all body content is put in the default div.

  • 输入 body 元素的 data-absolute-enabled 属性为 true,但输入 HTML 包含的直接子级不是绝对定位  divimgobject 元素。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. 在此情况下,不是绝对定位  divimgobject 元素的直接子级被设置为默认的 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 元素的唯一生成的 ID。A unique, generated ID for the element. 使用 includeIDs=true 查询选项时,由对页面的 content 终结点的 GET 请求返回。Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

用于更新页面内容Used to update page content.
stylestyle div 的位置和大小属性。The position and size properties of the div.

非贡献 divNon-contributing divs

当输入 HTML 中的 div 元素不对页面结构做出贡献或带有 OneNote 所使用的信息时,此 API 将 div 的内容移动到父 div 或默认 div。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.

输入 HTMLInput HTML

包含非贡献嵌套 div。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>

输出 HTMLOutput HTML

注意:div 的内容已被移至父 div 且嵌套的 <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">),则保留该 div。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>

img 元素img elements

OneNote 页上的图像由 img 元素表示。Images on OneNote pages are represented by img elements. img 元素可以在输入和输出 HTML 中包含下列属性。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-srcsrcEither 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" 表示多部分请求的“演示文稿”块中的图像部分。- 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 图像的位置和大小属性:位置(仅限绝对)、左侧顶部宽度高度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 中,图像大小分别以 widthheight 属性返回。In the output HTML, the image size is returned separately in width and height attributes.
srcsrc 需要 srcdata-render-srcEither src or data-render-src is required.

要在 OneNote 页上呈现的图像:The image to render on the OneNote page:

- src="https://..." 表示 Internet 上公开可用图像的 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"

注意: OneNote API 自动检测输入图像类型,并在输出 HTML 中将其返回为 data-fullres-src-typeNote: 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/pngimage/jpegThe media type of the data-fullres-src resource, for example: image/png or image/jpeg.
data-optionsdata-options 源类型:PDF 文件的源类型为 printout,而所有其他文件的源类型为 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,前提是该源图像来自公共 Internet,且使用 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/pngimage/jpegThe media type of the src resource, for example: image/png or image/jpeg.
data-tagdata-tag 元素上的笔记标记A note tag on the element.
idid 元素的唯一生成的 ID。A unique, generated ID for the element. 使用 includeIDs=true 查询选项时,由对页面的 content 终结点的 GET 请求返回。Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

用于更新页面内容Used to update page content.
srcsrc 已针对 Web 浏览器以及移动设备和平板电脑外形规格进行优化的图像资源版本的终结点。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.

带有 Web 安全和高分辨率资源的图像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-src 属性创建的图像Image 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. 每个组件图像均具有从零开始的数据索引属性,该属性定义原始垂直布局。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. 排序方法应采用从上到下的 Y 轴排序,如果 Y 轴顺序存在冲突,则从左到右按 X 轴进行排序。Ordering should be in top to bottom y-order, and then left to right x-order if there are y-order conflicts.

iframe 元素iframe 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" />

object 元素object elements

OneNote 页可包含由 object 元素表示的文件附件。OneNote pages can contain file attachments represented by object elements. object 元素可以在输入和输出 HTML 中包含下列属性。An object element can contain the following attributes in the input and output HTML.

注意: 将文件发送为图像并使用 data-render-src 属性时,OneNote API 还可以将此文件的内容呈现为页面中的图像。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 对象的位置和大小属性:位置(仅限绝对)、左侧顶部宽度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 元素的唯一生成的 ID。A unique, generated ID for the element. 使用 includeIDs=true 查询选项时,由对页面的 content 终结点的 GET 请求返回。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 ph1 - 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 ph1 - h6 元素上的笔记标记A note tag on a p or h1 - h6 element.
idid 元素的唯一生成的 ID。A unique, generated ID for the element. 使用 includeIDs=true 查询选项时,由对页面的 content 终结点的 GET 请求返回。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.

在 span 元素的起始标记中使用内联字符样式定义样式的输入 HTML。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>

带有 <i> 字符样式以及 <p> 起始标记中的字体设置的输出 HTML 作为 span 元素上的内联 CSS 样式返回。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

列表表示为包含由 li 元素所表示的列表项的 olul 元素。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 ulolli 元素上的笔记标记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 li 元素中的 span 上的笔记标记A note tag on a span in an li element.
idid 元素的唯一生成的 ID。A unique, generated ID for the element. 使用 includeIDs=true 查询选项时,由对页面的 content 终结点的 GET 请求返回。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

Microsoft Graph 中的 OneNote API 支持以下列表样式:The OneNote APIs in Microsoft Graph support the following list styles:

已排序列表Ordered list 未排序列表Unordered list
none none
decimal (default)decimal (default) disc (default)disc (default)
lower-alphalower-alpha circlecircle
lower-romanlower-roman squaresquare
upper-alphaupper-alpha  
upper-romanupper-roman  

您可以在输入 HTML 中对 olul 元素上的列表应用全局样式,但样式在 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

本示例显示了在 ol 元素上设置列表样式类型以及在单独列表项上设置 CSS 样式的输入 HTML。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。请注意,这些样式在单独 lispan 元素上内嵌返回。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

本示例显示了在 li 元素上设置不同列表样式类型的输入 HTML。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。请注意,这些样式在单独 lispan 元素上内嵌返回。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

这些表表示为可以包含 trtd 元素的 table 元素。支持嵌套表。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. OneNote API 不支持 rowspancolspan 属性。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:
- width- width. tabletd 支持作为页面宽度的像素或百分比。Supported by table and td as pixels or percentage of page width.

示例:width="100px"width="60%"Example: width="100px" or width="60%"
边框border 添加边框至指定宽度的表格Adds border to table with specified width
宽度width 表格宽度Width of the table
bgcolorbgcolor 表格背景色The background color of the table

注意: 在输入 html 中不支持使用表格样式属性中“边框”属性。Note: The use of the border property in the style attribute of a table is not supported in input html.

输出属性Output attributes

输出属性Output attribute 说明Description
data-iddata-id 元素的引用。A reference for the element.

用于更新页面内容Used to update page content.
idid 元素的唯一生成的 ID。A unique, generated ID for the element. 使用 includeIDs=true 查询选项时,由对页面的 content 终结点的 GET 请求返回。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.

具有不同级别可选设置的输入 HTMLInput HTML with optional settings at different levels

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

具有 CSS 样式的输出 HTML 在 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

Microsoft Graph 中的 OneNote API 支持页面正文中元素的以下内联 CSS style 属性,如 bodydivplispanOneNote 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"(默认为 11pt)style="font-size:10pt" (defaults to 11pt)

API 接受 ptpx 的字体大小,但会将 px 转换为 ptThe APIs accept font size in pt or px, but converts px to pt. 十进制值被四舍五入为最接近的 n.0pt 或 n.5pt。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>

这是获取页面内容时 Microsoft Graph 返回的输出 HTML。This is the output HTML that Microsoft Graph returns when you get page content.

注意:创建页面获取页面元数据时,API 返回 contentUrl 属性中的页面的 content 终结点 URL。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