Code HTML d’entrée et de sortie pour les pages OneNoteInput and output HTML in OneNote pages

Le code HTML qui définit le contenu et la structure de la page lorsque vous créez ou mettez à jour une page OneNote est appelé code HTML d’entrée.The HTML that defines the page content and structure when you create or update a OneNote page is called input HTML.

Le code HTML qui est renvoyé lorsque vous obtenez le contenu de la page est appelé code HTML de sortie.The HTML that's returned when you get page content is called output HTML. Le code HTML de sortie ne sera pas le même que le code HTML d’entrée.Output HTML won't be the same as input HTML.

Les API OneNote dans Microsoft Graph conservent le contenu sémantique et la structure de base du code HTML d’entrée, mais le convertit en un ensemble de propriétés CSS et d’éléments HTML pris en charge.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. Les API ajoutent également des attributs personnalisés qui prennent en charge les fonctionnalités OneNote.The APIs also add custom attributes that support OneNote features.

Cet article décrit les principaux éléments et attributs des codes HTML d’entrée et de sortie.This article describes the principal elements and attributes of input and output HTML. Il peut être utile de comprendre le code HTML d’entrée lorsque vous créez ou mettez à jour le contenu de la page, et le code HTML de sortie lorsque vous analysez le contenu de la page renvoyé.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.

Élément de corpsbody element

Le contenu HTML dans le corps de la page représente le contenu et la structure de la page, y compris les ressources d’image et de fichier.The HTML content in the page body represents the page content and structure, including image and file resources. L’élément body peut continuer les attributs suivants dans le code HTML d’entrée et de sortie.The body element can contain the following attributes in the input and output HTML.

Attributs d’entréeInput attributes

Attribut d’entréeInput attribute DescriptionDescription
data-absolute-enableddata-absolute-enabled Indique si le corps d’entrée prend en charge les éléments ayant une position absolue.Indicates whether the input body supports absolute positioned elements.
stylestyle

Propriétés CSS de style du corps.The CSS style properties of the body. Dans le code HTML de sortie, les paramètres d’entrée peuvent être renvoyés de manière incorporée sur les éléments enfant appropriés.In the output HTML, input settings might be returned inline on appropriate child elements.

La couleur d’arrière-plan n’est actuellement pas prise en charge pour l’élément body.Background color is not currently supported for the body element.

Attributs de sortieOutput attributes

Attribut de sortieOutput attribute DescriptionDescription
data-absolute-enableddata-absolute-enabled Indique si le corps prend en charge les éléments ayant une position absolue.Indicates whether the body supports absolute positioned elements. Toujours true dans le code HTML de sortie.Always true in output HTML.
stylestyle Propriétés font-family et font-size du corps.The font-family and font-size properties of the body.

Éléments divdiv elements

Les éléments div contiennent du texte, des images et d’autres types de contenu.Div elements contain text, images, and other content. Un élément div peut contenir les attributs suivants dans le code HTML d’entrée et de sortie.A div element can contain the following attributes in the input and output HTML.

Attributs d’entréeInput attributes

Attribut d’entréeInput attribute DescriptionDescription
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
data-render-fallbackdata-render-fallback Action de secours en cas d’échec de l’extraction : render (par défaut) ou none.The fallback action if the extraction fails: render (default) or none
data-render-methoddata-render-method La méthode d’extraction à effectuer, par exemple :The extraction method to perform, for example:
extract.businesscard ou extract.recipeextract.businesscard or extract.recipe
data-render-srcdata-render-src Source de contenu pour l’extraction.The content source for the extraction.
stylestyle Propriétés d’emplacement, de taille, de police et de couleur pour la balise div :The position, size, font, and color properties for the div:
  • position (absolute uniquement), left, top et width (la hauteur est automatiquement configurée pour les balises div)position (absolute only), left, top, and width (height is auto-configured for divs)

    Permet de créer une balise div avec position absolue, uniquement si la balise div est un enfant direct du corps lorsque la valeur du corps est définie sur 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".

    Exemple : <div style="position:absolute;width:360px;top:350px;left:300px" ... />Example: <div style="position:absolute;width:360px;top:350px;left:300px" ... />
  • Propriétés CSS de style de l’élément. Dans le code HTML de sortie, ces valeurs sont renvoyées de façon incorporée sur les éléments enfant appropriés.The CSS style properties of the element. In the output HTML, these values are returned inline on appropriate child elements.

Les API OneNote dans Microsoft Graph englobent tout le contenu du corps dans au moins un élément div.The OneNote APIs in Microsoft Graph wrap all body content in at least one div. L’API crée une balise div par défaut (avec pour attribut data-id="_default") pour englober le contenu de corps si :The API creates a default div (attributed with data-id="_default") to contain the body content if:

  • L’attribut de l’élément du corps d’entrée data-absolute-enabled est omis ou sa valeur est false.The input body element's data-absolute-enabled attribute is omitted or set to false. Dans ce cas, tout le contenu du corps est placé dans la balise div par défaut.In this case, all body content is put in the default div.

  • La valeur de l’attribut de l’élément du corps d’entrée data-absolute-enabled est true, mais le code HTML d’entrée contient des enfants directs qui ne sont pas des éléments ayant une position absolue div, img ou 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. Dans ce cas, les enfants directs qui ne sont pas des éléments ayant une position absolue div, img ou object sont placés dans la balise div par défaut.In this case, direct children that aren't absolute positioned div, img, or object elements are put in the default div.

Attributs de sortieOutput attributes

Attribut de sortieOutput attribute DescriptionDescription
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
idid ID unique, généré pour l’élément.A unique, generated ID for the element. Renvoyé par des requêtes GET à l’élément content du point de terminaison d’une page lorsque l’option de requête includeIDs=true est utilisée.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
stylestyle Propriétés de position et de taille de l’élément div.The position and size properties of the div.

Éléments div non contributifsNon-contributing divs

Lorsqu’un élément div dans le code HTML de sortie ne contribue pas à la structure de la page ou ne contient aucune information utilisée par OneNote, l’API déplace son contenu dans l’élément div parent ou par défaut.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. Consultez les exemples suivants pour en voir une illustration.This is illustrated in the following examples.

Code HTML d’entréeInput HTML

Contient un élément div imbriqué non contributif.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>

Code HTML de sortieOutput HTML

Remarque : le contenu de la balise div a été déplacé vers la balise div parent et les balises <div> imbriquées ont été supprimées.Note: The div's content was moved to the parent div and the nested <div> tags have been removed. La balise div aurait été conservée si elle avait défini une information sémantique, comme un élément data-id (exemple : <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>

Éléments imgimg elements

Les images sur les pages OneNote sont représentées par des éléments img.Images on OneNote pages are represented by img elements. Un élément img peut contenir les attributs suivants dans le code HTML d’entrée et de sortie.An img element can contain the following attributes in the input and output HTML.

Attributs d’entréeInput attributes

Attribut d’entréeInput attribute DescriptionDescription
altalt Texte alt fourni pour l’image.The supplied alt text for the image.
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
data-render-srcdata-render-src L’élément data-render-src ou src est obligatoire.Either data-render-src or src is required.

Page web à afficher sous forme d’une image bitmap sur la page OneNote :The webpage to render as a bit-mapped image on the OneNote page:

- data-render-src="https://..." pour une URL publique.- data-render-src="https://..." for a public URL.

- data-render-src="name:BlockName" pour une partie d’image dans le bloc « Presentation » d’une requête en plusieurs parties.- data-render-src="name:BlockName" for an image part in the "Presentation" block of a multipart request.

Cette méthode est utile lorsque le rendu de la page web est plus complexe à générer que le rendu réalisable sur la page OneNote ou lorsque la page requiert des informations d’identification.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 Balise de note sur l’élément.A note tag on the element.
stylestyle Propriétés d’emplacement et de taille de l’image : position (absolute uniquement), left, top, width et height.The position and size properties for the image: position (absolute only), left, top, width, and height.

La taille peut être définie sur n’importe quelle image.Size can be set on any image.

Les propriétés d’emplacement permettent de créer une image ayant une position absolue, uniquement si l’image est un enfant direct du corps lorsque la valeur du corps est définie sur 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".

Exemple : <img style="position:absolute;width:360px;top:350px;left:300px" ... />Example: <img style="position:absolute;width:360px;top:350px;left:300px" ... />

Dans le code HTML de sortie, la taille de l’image est renvoyée séparément dans les attributs width et height.In the output HTML, the image size is returned separately in width and height attributes.
srcsrc L’élément src ou data-render-src est obligatoire.Either src or data-render-src is required.

Image à afficher sur la page OneNote :The image to render on the OneNote page:

- src="https://..." pour l’URL d’une image disponible publiquement sur Internet.- src="https://..." for a URL to a publicly available image on the Internet.

- src="name:BlockName" pour une partie nommée dans une requête en plusieurs parties qui représente l’image.- src="name:BlockName" for a named part in a multipart request that represents the image.
width, heightwidth, height Largeur ou hauteur de l’image en pixels, mais sans la mention « px ».The width or height of the image, in pixels but without the px. Exemple : width="400"Example: width="400"

Remarque : les API OneNote détectent automatiquement le type d’image d’entrée et le renvoient en tant qu’élément data-fullres-src-type dans le code HTML de sortie.Note: The OneNote APIs automatically detect the input image type, and return it as the data-fullres-src-type in the output HTML. L’API renvoie également le type de l’image optimisée dans data-src-type.The API also returns the image type of the optimized image in data-src-type.

Attributs de sortieOutput attributes

Attribut de sortieOutput attribute DescriptionDescription
altalt Texte alt fourni pour l’image.The supplied alt text for the image.
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
data-indexdata-index Position de l’image. Pour la prise en charge des images fractionnées.The position of the image. For split image support.
data-fullres-srcdata-fullres-src Point de terminaison pour la version de la ressource image initialement incorporée dans la page.The endpoint for the version of the image resource that was originally embedded in the page.
data-fullres-src-typedata-fullres-src-type Type de support de la ressource data-fullres-src (par exemple, image/png ou image/jpeg).The media type of the data-fullres-src resource, for example: image/png or image/jpeg.
data-optionsdata-options Type de la source : printout pour les fichiers PDF ou splitimage pour tous les autres. S’applique uniquement aux images fractionnées créées avec l’attribut 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 source d’origine de l’image, si l’image provient d’Internet et a été créé avec l’attribut 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 Type de support de la ressource src (par exemple, image/png ou image/jpeg).The media type of the src resource, for example: image/png or image/jpeg.
data-tagdata-tag Balise de note sur l’élément.A note tag on the element.
idid ID unique, généré pour l’élément.A unique, generated ID for the element. Renvoyé par des requêtes GET à l’élément content du point de terminaison d’une page lorsque l’option de requête includeIDs=true est utilisée.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
srcsrc Point de terminaison de la version de la ressource image qui a été optimisée pour les navigateurs web et les formats tablette et mobile.The endpoint for the version of the image resource that has been optimized for web browsers and mobile and tablet form factors.
stylestyle Propriétés de position de l’image.The position properties of the image.
width, heightwidth, height Largeur ou hauteur de l’image, en pixels.The width or height of the image, in pixels.

Exemples de code HTML de sortie pour les imagesOutput HTML examples for images

Les éléments img de sortie contiennent des points de terminaison pour les ressources de fichier d’image et le type d’image, comme illustré ci-dessous.Output img elements contain endpoints for image file resources and the image type, as shown below. Vous pouvez exécuter plusieurs requêtes GET vers les points de terminaison de ressources d’image pour récupérer leur contenu binaire.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" ... />

Les exemples suivants montrent les informations qu’un élément img peut contenir dans le code HTML de sortie.The following examples show the information an img element might contain in the output HTML.

Image avec ressources web et haute résolutionImage 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="..."] />

Image créée à l’aide de l’attribut 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="..."] />

Images fractionnéesSplit images

Les images qui sont créées à l’aide de l’attribut data-render-src (à partir d’une URL de page web ou d’une partie nommée) peuvent être fractionnées en plusieurs images de composant pour des raisons de performances et de rendu.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. La même valeur data-id est affectée à toutes les images de composant.Component images are all assigned the same data-id value. Chaque image de composant possède un attribut data-index de base à zéro qui définit la disposition verticale d’origine.Each component image has a zero-based data-index attribute that defines the original vertical layout.

Image fractionnée avec trois images de composantSplit 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>

Étant donné que les utilisateurs peuvent déplacer les images sur la page, les index renvoyés peuvent être dans le désordre.Because users can move the images on the page, the returned indexes might be out of order. Le classement doit se faire de haut en bas sur l’axe des ordonnées, puis de gauche à droite sur l’axe des abscisses en cas de conflit sur l’ordonnée.Ordering should be in top to bottom y-order, and then left to right x-order if there are y-order conflicts.

Éléments iframeiframe elements

Des pages OneNote peuvent contenir des vidéos incorporées représentées par des éléments iframe.OneNote pages can contain embedded videos represented by iframe elements.

Remarque : vous pouvez également joindre un fichier vidéo à l’aide d’un élément object.Note: You can also attach a video file using an object element.

Attributs d’entréeInput attributes

Attribut d’entréeInput attribute DescriptionDescription
data-original-srcdata-original-src Obligatoire.Required. URL de la source vidéo.The URL of the video source. Consultez la liste de sources vidéo prises en charge.See the list of supported video sources.

Exemple : data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"Example: data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"
width, heightwidth, height Largeur ou hauteur de l’élément iframe en pixels.The width or height of the iframe, in pixels. Exemple : width=300Example: width=300

Attributs de sortieOutput attributes

Attribut de sortieOutput attribute DescriptionDescription
data-original-srcdata-original-src URL de la source vidéo.The URL of the video source.
srcsrc Lien vers la vidéo incorporée dans la page OneNote.A link to the video that is embedded in the OneNote page.
width, heightwidth, height Largeur ou hauteur de l’élément iframe en pixels.The width or height of the iframe, in pixels.

Exemple : width=300Example: width=300

Exemple de code HTML de sortie pour les vidéosOutput HTML example for videos

Les éléments iframe de sortie contiennent des points de terminaison établissant un lien vers la page source et la vidéo, comme ici.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" />

Éléments objetobject elements

Des pages OneNote peuvent contenir des fichiers joints représentés par des éléments object.OneNote pages can contain file attachments represented by object elements. Un élément object peut contenir les attributs suivants dans le code HTML d’entrée et de sortie.An object element can contain the following attributes in the input and output HTML.

Remarque : les API OneNote peuvent également afficher le contenu d’un fichier sous forme d’images sur une page lorsque le fichier est envoyé sous forme d’image et qu’il utilise l’attribut 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. Exemple : <img data-render-src="name:part-name" ... />Example: <img data-render-src="name:part-name" ... />

Attributs d’entréeInput attributes

Attribut d’entréeInput attribute DescriptionDescription
datadata Obligatoire.Required. Nom de la partie qui représente le fichier dans une requête à plusieurs parties.The name of the part that represents the file in the multipart request.
data-attachmentdata-attachment Obligatoire. Nom du fichier.Required. The file name.
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
stylestyle Propriétés d’emplacement et de taille de l’objet : position (absolute uniquement), left, top et width.The position and size properties for the object: position (absolute only), left, top, and width.

Permet de créer un objet avec position absolue, uniquement si l’objet est un enfant direct du corps lorsque la valeur du corps est définie sur 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".

Exemple : <object style="position:absolute;top:350px;left:300px" ... />Example: <object style="position:absolute;top:350px;left:300px" ... />
typetype Obligatoire.Required.

Type de fichier de support standard.The standard media file type. Les types de fichier connus affichent l’icône associée au type de fichier sur la page OneNote.Known file types display the icon associated with the file type on the OneNote page. Les types de fichiers inconnus affichent une icône de fichier générique.Unknown file types display a generic file icon.

Attributs de sortieOutput attributes

Attribut de sortieOutput attribute DescriptionDescription
datadata Point de terminaison pour la ressource de fichier.The endpoint for the file resource.
data-attachmentdata-attachment Nom du fichier.The file name.
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
idid ID unique, généré pour l’élément.A unique, generated ID for the element. Renvoyé par des requêtes GET à l’élément content du point de terminaison d’une page lorsque l’option de requête includeIDs=true est utilisée.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
stylestyle Propriétés de position de l’objet.The position properties of the object.
typetype Type de fichier de support standard.The standard media file type.

Exemple de code HTML de sortie pour les objetsOutput HTML example for objects

Les éléments object de sortie contiennent des points de terminaison établissant un lien vers les ressources de fichier sur la page, comme ici.Output object elements contain endpoints that link to the file resources in the page, as shown. Vous pouvez exécuter plusieurs requêtes GET vers les points de terminaison de ressources de fichier pour récupérer leur contenu binaire.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="..."] />

Paragraphes et en-têtesParagraphs and headings

Les paragraphes, en-têtes et autres conteneurs de texte peuvent contenir les attributs suivants dans le code HTML d’entrée et de sortie.Paragraphs, headings, and other text containers can contain the following attributes in the input and output HTML.

Attributs d’entréeInput attributes

Attribut d’entréeInput attribute DescriptionDescription
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
data-tagdata-tag Une balise de note sur un élément p ou h1 - h6.A note tag on a p or h1 - h6 element.
stylestyle Propriétés CSS de style de l’élément.The CSS style properties of the element.

Attributs de sortieOutput attributes

Attribut de sortieOutput attribute DescriptionDescription
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
data-tagdata-tag Une balise de note sur un élément p ou h1 - h6.A note tag on a p or h1 - h6 element.
idid ID unique, généré pour l’élément.A unique, generated ID for the element. Renvoyé par des requêtes GET à l’élément content du point de terminaison d’une page lorsque l’option de requête includeIDs=true est utilisée.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
stylestyle Propriétés CSS de style de l’élément.The CSS style properties of the element. Dans le code HTML de sortie, ces valeurs peuvent être renvoyées de manière incorporée sur les éléments enfant appropriés ou sur des éléments span.In the output HTML, these values may be returned inline on appropriate child elements or on span elements.

Les exemples suivants illustrent du code HTML d’entrée utilisant différentes méthodes pour définir les styles sur les conteneurs de texte, ainsi que le code HTML de sortie renvoyé.The following examples show input HTML that uses different ways to define styles on text containers and the output HTML that's returned.

Code HTML d’entrée avec des styles définis à l’aide des styles de caractères incorporés, dans la balise de début et à l’intérieur d’un élément 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>

Code de sortie HTML avec le style de caractère <i> et les paramètres de police dans la balise de début <p> renvoyés en tant que styles CSS incorporés sur les éléments 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>

ListesLists

Les listes sont représentées en tant qu’éléments ol ou ul qui peuvent contenir des éléments de liste représentés sous forme d’éléments li.Lists are represented as ol or ul elements that contain list items represented as li elements.

Les listes et éléments de liste peuvent contenir les attributs suivants dans le code HTML d’entrée et de sortie.Lists and list items can contain the following attributes in the input and output HTML.

Attributs d’entréeInput attributes

Attribut d’entréeInput attribute DescriptionDescription
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
data-tagdata-tag Balise de note sur un élément ul, ol ou li.A note tag on a ul, ol, or li element.
stylestyle Propriétés list-style-type et de style CSS pour la liste ou l’élément de liste.The list-style-type and the CSS style properties for the list or list item.

Attributs de sortieOutput attributes

Attribut de sortieOutput attribute DescriptionDescription
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
data-tagdata-tag Balise de note sur un élément span dans un élément li.A note tag on a span in an li element.
idid ID unique, généré pour l’élément.A unique, generated ID for the element. Renvoyé par des requêtes GET à l’élément content du point de terminaison d’une page lorsque l’option de requête includeIDs=true est utilisée.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
stylestyle Propriétés CSS de style et list-style-type de l’élément.The list-style-type and CSS style properties of the element. Dans le code HTML de sortie, les paramètres de niveau liste sont renvoyés sur des éléments de liste.In the output HTML, list-level settings are returned on list items. Les propriétés par défaut ne sont pas renvoyées.Default properties are not returned.

Styles de listeList styles

Les API OneNote dans Microsoft Graph prennent en charge les styles de liste suivants :The OneNote APIs in Microsoft Graph support the following list styles:

Liste triéeOrdered list Liste non triéeUnordered list
nonenone nonenone
decimal (par défaut)decimal (default)
disc (par défaut)disc (default)
lower-alphalower-alpha
circlecircle
lower-romanlower-roman

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

Vous pouvez appliquer des styles globaux pour une liste sur l’élément ol ou ul dans le code HTML d’entrée, mais les styles sont renvoyés sur les éléments 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.

Style de liste homogèneHomogenous list style

Cet exemple illustre du code HTML d’entrée qui définit le type de style de liste sur l’élément ol et les styles CSS sur les éléments de liste individuels.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>

Voici le code HTML de sortie. Notez que les styles sont renvoyés de façon incorporée sur les éléments li ou span individuels.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>

Styles de liste variablesVariable list styles

Cet exemple illustre du code HTML d’entrée qui définit différents types de style de liste sur les éléments 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>

Voici le code HTML de sortie. Notez que les styles sont renvoyés de façon incorporée sur les éléments li ou span individuels.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>

TableauxTables

Les tableaux sont représentés comme des éléments table pouvant contenir des éléments tr et td. Les tables imbriquées sont prises en charge.Tables are represented as table elements that can contain tr and td elements. Nested tables are supported.

Les tableaux peuvent contenir les attributs suivants dans le code HTML d’entrée et de sortie.Tables can contain the following attributes in the input and output HTML. Les API OneNote ne prennent pas en charge les attributs rowspan et colspan.The OneNote APIs do not support rowspan or colspan attributes.

Attributs d’entréeInput attributes

Attribut d’entréeInput attribute DescriptionDescription
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
stylestyle Propriétés CSS de style de l’élément, et également :The CSS style properties of the element, and also:
- width.- width. Propriété prise en charge par table et td avec une valeur en pixels ou en pourcentage de largeur de page.Supported by table and td as pixels or percentage of page width.

Exemple : width="100px" ou width="60%"Example: width="100px" or width="60%"
bordureborder Ajoute une bordure à un tableau avec une largeur spécifiéeAdds border to table with specified width
largeurwidth La largeur du tableauWidth of the table
bgcolorbgcolor La couleur d’arrière-plan d’un tableauThe background color of the table

Remarque : l’utilisation de la propriété bordure dans l’attribut style d’un tableau n’est pas prise en charge dans le code html d’entrée.Note: The use of the border property in the style attribute of a table is not supported in input html.

Attributs de sortieOutput attributes

Attribut de sortieOutput attribute DescriptionDescription
data-iddata-id Référence de l’élément.A reference for the element.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
idid ID unique, généré pour l’élément.A unique, generated ID for the element. Renvoyé par des requêtes GET à l’élément content du point de terminaison d’une page lorsque l’option de requête includeIDs=true est utilisée.Returned by GET requests to a page's content endpoint when the includeIDs=true query option is used.

Utilisé pour mettre à jour le contenu de la page.Used to update page content.
stylestyle Propriétés CSS de style de l’élément.The CSS style properties of the element.

Les exemples suivants illustrent du code HTML d’entrée utilisant différentes méthodes pour définir les styles sur les tableaux, ainsi que le code HTML de sortie renvoyé.The following examples show input HTML that uses different ways to define styles on tables and the output HTML that's returned.

Code HTML d’entrée avec des paramètres facultatifs à différents niveauxInput 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>

Code HTML de sortie avec des styles CSS renvoyés de façon incorporée sur les éléments tdOutput 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>

StylesStyles

Les API OneNote dans Microsoft Graph prennent en charge les propriétés CSS de style incorporées suivantes pour les éléments du corps de page, comme body, div, p, li et 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.

PropriétéProperty ExempleExample
background-colorbackground-color style="background-color:#66cc66" (blanc par défaut)style="background-color:#66cc66" (defaults to white)

Le format hexadécimal et les couleurs nommées sont pris en charge.Both hexadecimal format and named colors are supported.
colorcolor style="color:#ffffff" (noir par défaut)style="color:#ffffff" (defaults to black)
font-familyfont-family style="font-family:Courier" (Calibri par défaut)style="font-family:Courier" (defaults to Calibri)
font-sizefont-size style="font-size:10pt" (11 pt par défaut)style="font-size:10pt" (defaults to 11pt)

Les API acceptent les tailles de police en pt ou en px, mais convertissent les px en pt.The APIs accept font size in pt or px, but converts px to pt. Les valeurs décimales sont arrondies à la valeur n.0pt ou n.5pt la plus proche.Decimal values are rounded to the nearest n.0pt or n.5pt.
font-stylefont-style style="font-style:italic" (normal ou italique uniquement)style="font-style:italic" (normal or italic only)
font-weightfont-weight style="font-weight:bold" (normal ou gras uniquement)style="font-weight:bold" (normal or bold only)
strike-throughstrike-through style="text-decoration:line-through"
text-aligntext-align style="text-align:center" (pour les éléments de bloc uniquement)style="text-align:center" (for block elements only)
text-decorationtext-decoration style="text-decoration:underline" (aucun ou souligné uniquement)style="text-decoration:underline" (none or underline only)

Les styles de caractères incorporés suivants sont également pris en charge :The following inline character styles are also supported:

   

Exemple de code HTML d’entrée et de sortieInput and output HTML example

L’image suivante illustre une page simple créée à l’aide de Microsoft Graph.The following image shows a simple page that was created with Microsoft Graph.

Image d’une page OneNote avec des notes d’étude de contenu Wikipédia

Voici le code HTML d’entrée envoyé dans le corps du message pour créer la page.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>

Voici le code HTML de sortie que Microsoft Graph renvoie lorsque vous obtenez le contenu de la page.This is the output HTML that Microsoft Graph returns when you get page content.

Remarque : lorsque vous créez une page ou obtenez les métadonnées d’une page, l’API renvoie l’URL du point de terminaison du contenu de la page dans la propriété 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>

Voir aussiSee also