在 OneNote 页中创建绝对定位元素Create absolute positioned elements in OneNote pages

OneNote 页面的正文可以包含多个直接 divimgobject 子元素,可在页面上对其独立定位。The body of a OneNote page can contain multiple direct div, img, and object child elements that can be positioned independently on the page.

属性和定位行为Attributes and positioning behavior

使用 data-absolute-enabledstyle 属性在页面上创建绝对定位的元素,如下所示:Use the data-absolute-enabled and style attributes to create absolute positioned elements on a page, as follows:

  • 正文元素必须指定 data-absolute-enabled="true"The body element must specify data-absolute-enabled="true". 如果省略或设置为 false,则所有正文内容在 API 创建的 _default 绝对定位 div 内呈现,所有位置设置将被忽略。If omitted or set to false, all body content is rendered inside a _default absolute positioned div that the API creates, and all position settings are ignored.

  • 只有 divimgobject 元素才能是绝对定位的元素。Only div, img, and object elements can be absolute positioned elements.

  • 绝对定位的元素必须指定 style="position:absolute"Absolute positioned elements must specify style="position:absolute".

  • 绝对定位的元素必须是 body 元素的直接子级。Absolute positioned elements must be direct children of the body element. 不是绝对定位的 divimgobject 元素正文的任何直接子级都将被呈现为绝对定位 _default div 内的静态内容。Any direct children of the body that aren't absolute positioned div, img, or object elements are rendered as static content inside the absolute positioned _default div.

  • 绝对定位元素位于其指定的顶部和左侧坐标,与页面左上角(在标题区域上方)的 0:0 起始位置相关。Absolute positioned elements are positioned at their specified top and left coordinates, relative to the 0:0 starting position at the top, left corner of the page above the title area.

  • 如果绝对定位的元素省略了顶部或左侧坐标,则缺少的坐标将被设置为其默认值:top:120pxleft:48pxIf an absolute positioned element omits the top or left coordinate, the missing coordinate is set to its default value: top:120px or left:48px. 这些默认坐标指定标题区域正下方的位置。These default coordinates specify a position just below the title area. 请注意,省略坐标可能会导致元素彼此相互堆叠。Be aware that omitting coordinates can result in elements that are stacked on top of each other.

  • 绝对定位元素无法进行嵌套或无法包含定位的元素。Absolute positioned elements cannot be nested or contain positioned elements. API 忽略在绝对定位的 div 中嵌套元素上指定的任何位置设置,在绝对定位的父 div 中呈现此嵌套内容,并在响应中返回 api.diagnostics 属性中的警告。The API ignores any position settings specified on nested elements inside an absolute positioned div, renders the nested content inside the absolute positioned parent div, and returns a warning in the api.diagnostics property in the response.

示例Example

下面的示例包含直接 p 子级、绝对定位的 div 和非绝对定位的 div。The following example contains a direct p child, an absolute positioned div, and a non-absolute positioned div.

输入 HTMLInput HTML

<body data-absolute-enabled="true">
    <p>This content will appear in the _default div.</p>
    <div style="position:absolute;top:175px;left:100px" data-id="div1">
      <p>This content will appear in an absolute positioned div.</p>
    </div>
    <div>
        <p>This content will also appear in the _default div.</p>
    </div>
</body>

API 在默认 div 中呈现非绝对定位 div。请注意,嵌套的 <div> 标记遭放弃,因为它们不定义任何语义信息(如 data-id)。The API renders the non-absolute positioned div in the default div. Note that the nested <div> tags are discarded because they do not define any semantic information (such as data-id).

输出 HTMLOutput HTML

<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">
        <p>This content will appear in the _default div.</p>
        <p>This content will also appear in the _default div.</p>
    </div>
    <div data-id="div1" style="position:absolute;left:99px;top:174px;width:624px">
        <p>This content will appear in an absolute positioned div.</p>
    </div>
</body>

示例Example

以下示例创建包含一个绝对定位的 div 和一个绝对定位的图像的页面。The following example creates a page that contains one absolute positioned div and one absolute positioned image.

输入 HTMLInput HTML

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true">
        <div style="position:absolute;width:280px;top:120px;left:68px">
            <p>Some text</p>
            <img style="width:120px" src="https://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
            <div>
                <p>More text inside a regular, nested div</p>
            </div>
        </div>
        <img style="position:absolute;width:360px;top:350px;left:300px" src="https://officeimg.vo.msecnd.net/en-us/files/018/949/ZA103278226.png" />
    </body>
</html>

OneNote API 评估输入 HTML 并保留所有语义内容和受 OneNote 支持的任何结构信息。The OneNote API evaluates the input HTML and preserves all semantic content and any structural information that is supported by OneNote. 呈现结果页面,如以下图像所示(但不呈现 div 和图像的可见边框)。The resulting page renders as shown in the following image (but without the visible borders for the div and image).

含有绝对定位的 div 和图像的结果页面

请注意,对来自输入 HTML 的非贡献嵌套 div 所做的更改。Notice the changes to the non-contributing, nested div from the input HTML. API 保留 div 的内容,但丢弃 <div> 标记,因为 div 无法定义语义信息(如 data-id)。The API preserves the div's content but discards the <div> tags because the div doesn't define semantic information (such as data-id).

有关 OneNote API 如何处理输入和输出 HTML 的详细信息,请参阅 OneNote 页面的输入和输出 HTMLFor more information about how the OneNote API handles input and output HTML, see Input and output HTML for OneNote pages.

受支持的 CSS 样式属性Supported CSS style attributes

所有绝对定位的元素都可以指定顶部和左侧位置。All absolute positioned elements can specify top and left positions. div 和图像可以指定宽度,并且图像还可以指定高度。Divs and images can specify width, and images can also specify height. 例如:For example:

<img style="position:absolute;top:140px;left:95px;width:480px;height:665px" src="..." />
属性Attribute 支持的元素Supported element 说明Description
toptop div, img, objectdiv, img, object 仅以像素为单位的元素顶部边框的 y 轴坐标。The y-axis coordinate of the element's top border, in pixels only. 默认值为 120 个像素。Default is 120 pixels.

示例:top:140pxExample: top:140px
leftleft div, img, objectdiv, img, object 仅以像素为单位的元素左边框的 x 轴坐标。The x-axis coordinate of the element's left border, in pixels only. 默认值为 48 个像素。Default is 48 pixels.

示例:left:95pxExample: left:95px
widthwidth div, imgdiv, img 仅以像素为单位的元素的宽度。The width of the element, in pixels only.

示例:width:480pxExample: width:480px
heightheight imgimg 仅以像素为单位的元素的高度。The height of the element, in pixels only. 对于 div,高度是在运行时计算的,且任何指定的高度值都将被忽略。For divs, height is calculated at runtime and any specified height value is ignored.

示例:height:665pxExample: height:665px

其他位置属性(如 z-index)都将被忽略。Other position attributes, such as z-index, are ignored. 绝对定位的图像可以使用 data-render-srcsrc 属性。Absolute positioned images can use either the data-render-src or src attribute.

响应信息Response information

OneNote API 在响应中返回以下信息。The OneNote API returns the following information in the response.

响应数据Response data 说明Description
成功代码Success code 成功的 POST 请求的 HTTP 状态代码为 201,成功的 PATCH 请求的 HTTP 状态代码为 204。A 201 HTTP status code for a successful POST request, and a 204 HTTP status code for a successful PATCH request.
错误Errors 请阅读 Microsoft Graph 中 OneNote API 的错误代码,以了解 Microsoft Graph 可以返回的 OneNote 错误。Read Error codes for OneNote APIs in Microsoft Graph to learn about OneNote errors that Microsoft Graph can return.

权限Permissions

若要创建或更新 OneNote 页面,需要请求相应的权限。To create or update OneNote pages, you'll need to request appropriate permissions. 选择应用运行所需的最低级别的权限。Choose the lowest level of permissions that your app needs to do its work.

POST 页面的权限Permissions for POST pages

  • Notes.CreateNotes.Create
  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

PATCH 页面的权限Permissions for PATCH pages

  • Notes.ReadWriteNotes.ReadWrite
  • Notes.ReadWrite.AllNotes.ReadWrite.All

有关权限范围及其工作方式的详细信息,请参阅 OneNote 权限范围For more information about permission scopes and how they work, see OneNote permission scopes.

另请参阅See also