Partager via

Html d’entrée et de sortie sur les pages OneNote

  • Article

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.

Le code HTML qui est renvoyé lorsque vous obtenez le contenu de la page est appelé code HTML de sortie. Le code HTML de sortie ne sera pas le même que le code HTML d’entrée.

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. Les API ajoutent également des attributs personnalisés qui prennent en charge les fonctionnalités OneNote.

Cet article décrit les principaux éléments et attributs des codes HTML d’entrée et de sortie. 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é.

Élément de corps

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. L’élément body peut continuer les attributs suivants dans le code HTML d’entrée et de sortie.

Attributs d’entrée

Attribut d’entrée Description
data-absolute-enabled Indique si le corps d’entrée prend en charge les éléments ayant une position absolue.
style

Propriétés CSS de style du corps. 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.

La couleur d’arrière-plan n’est actuellement pas prise en charge pour l’élément body.

Attributs de sortie

Attribut de sortie Description
data-absolute-enabled Indique si le corps prend en charge les éléments ayant une position absolue. Toujours true dans le code HTML de sortie.
style Propriétés font-family et font-size du corps.

Éléments div

Les éléments div contiennent du texte, des images et d’autres types de contenu. Un élément div peut contenir les attributs suivants dans le code HTML d’entrée et de sortie.

Attributs d’entrée

Attribut d’entrée Description
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
data-render-fallback Action de secours en cas d’échec de l’extraction : render (par défaut) ou none.
data-render-method La méthode d’extraction à effectuer, par exemple :
extract.businesscard ou extract.recipe
data-render-src Source de contenu pour l’extraction.
style Propriétés d’emplacement, de taille, de police et de couleur pour la balise div :
  • position (absolute uniquement), left, top et width (la hauteur est automatiquement configurée pour les balises div)

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

    Exemple : <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 manière incorporée sur les éléments enfant appropriés.

Les API OneNote dans Microsoft Graph englobent tout le contenu du corps dans au moins un élément div. L’API crée une balise div par défaut (avec pour attribut data-id="_default") pour englober le contenu de corps si :

  • L’attribut de l’élément du corps d’entrée data-absolute-enabled est omis ou sa valeur est false. Dans ce cas, tout le contenu du corps est placé dans la balise div par défaut.

  • 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 absoluediv, img ou object. Dans ce cas, les enfants directs qui ne sont pas des éléments ayant une position absoluediv, img ou object sont placés dans la balise div par défaut.

Attributs de sortie

Attribut de sortie Description
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
id ID unique, généré pour l’élément. 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.

Utilisé pour mettre à jour le contenu de la page.
style Propriétés de position et de taille de l’élément div.

Éléments div non contributifs

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. Consultez les exemples suivants pour en voir une illustration.

Code HTML d’entrée

Contient un élément div imbriqué non contributif.

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

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. 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">).

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

Les images sur les pages OneNote sont représentées par des éléments img. Un élément img peut contenir les attributs suivants dans le code HTML d’entrée et de sortie.

Attributs d’entrée

Attribut d’entrée Description
alt Texte alt fourni pour l’image.
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
data-render-src L’élément data-render-src ou src est obligatoire.

Page web à afficher sous forme d’une image bitmap sur la page OneNote :

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

- data-render-src="name:BlockName" pour une partie d’image dans le bloc « Presentation » d’une requête en plusieurs parties.

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.
data-tag Balise de note sur l’élément.
style Propriétés d’emplacement et de taille de l’image : position (absolute uniquement), left, top, width et height.

La taille peut être définie sur n’importe quelle 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".

Exemple : <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.
src L’élément src ou data-render-src est obligatoire.

Image à afficher sur la page OneNote :

- src="https://..." pour l’URL d’une image disponible publiquement sur Internet.

- src="name:BlockName" pour une partie nommée dans une requête en plusieurs parties qui représente l’image.
width, height Largeur ou hauteur de l’image en pixels, mais sans la mention « px ». Exemple : width="400"

Remarque

Les API OneNote détectent automatiquement le type d’image d’entrée et le retournent en tant que type data-fullres-src dans le code HTML de sortie. L’API renvoie également le type de l’image optimisée dans data-src-type.

Attributs de sortie

Attribut de sortie Description
alt Texte alt fourni pour l’image.
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
data-index Position de l’image. Pour la prise en charge d’images fractionnées.
data-fullres-src Point de terminaison pour la version de la ressource image initialement incorporée dans la page.
data-fullres-src-type Type de support de la ressource data-fullres-src (par exemple, image/png ou image/jpeg).
data-options Type de source : printout pour les fichiers PDF ou splitimage pour tous les autres fichiers. S’applique uniquement aux images fractionnées créées avec l’attribut data-render-src.
data-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.
data-src-type Type de support de la ressource src (par exemple, image/png ou image/jpeg).
data-tag Balise de note sur l’élément.
id ID unique, généré pour l’élément. 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.

Utilisé pour mettre à jour le contenu de la page.
src 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.
style Propriétés de position de l’image.
width, height Largeur ou hauteur de l’image, en pixels.

Exemples de code HTML de sortie pour les 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. Vous pouvez exécuter plusieurs requêtes GET vers les points de terminaison de ressources d’image pour récupérer leur contenu binaire.

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

Image avec ressources web et haute résolution

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

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

Images fractionnées

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. La même valeur data-id est affectée à toutes les images de composant. Chaque image de composant possède un attribut data-index de base à zéro qui définit la disposition verticale d’origine.

Image fractionnée avec trois images de composant

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

Éléments iframe

Des pages OneNote peuvent contenir des vidéos incorporées représentées par des éléments iframe.

Remarque

Vous pouvez également joindre un fichier vidéo à l’aide d’un élément object.

Attributs d’entrée

Attribut d’entrée Description
data-original-src Obligatoire. URL de la source vidéo. Consultez la liste de sources vidéo prises en charge.

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

Attributs de sortie

Attribut de sortie Description
data-original-src URL de la source vidéo.
src Lien vers la vidéo incorporée dans la page OneNote.
width, height Largeur ou hauteur de l’élément iframe en pixels.

Exemple : width=300

Exemple de code HTML de sortie pour les vidéos

Les éléments iframe de sortie contiennent des points de terminaison établissant un lien vers la page source et la vidéo, comme ici.

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

Des pages OneNote peuvent contenir des fichiers joints représentés par des éléments object. Un élément object peut contenir les attributs suivants dans le code HTML d’entrée et de sortie.

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. Exemple : <img data-render-src="name:part-name" ... />

Attributs d’entrée

Attribut d’entrée Description
data Obligatoire. Nom de la partie qui représente le fichier dans une requête à plusieurs parties.
data-attachment Obligatoire. Nom du fichier.
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
style Propriétés d’emplacement et de taille de l’objet : position (absolute uniquement), left, top et 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".

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

Type de fichier de support standard. Les types de fichier connus affichent l’icône associée au type de fichier sur la page OneNote. Les types de fichiers inconnus affichent une icône de fichier générique.

Attributs de sortie

Attribut de sortie Description
data Point de terminaison pour la ressource de fichier.
data-attachment Nom du fichier.
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
id ID unique, généré pour l’élément. 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.

Utilisé pour mettre à jour le contenu de la page.
style Propriétés de position de l’objet.
type Type de fichier de support standard.

Exemple de code HTML de sortie pour les objets

Les éléments object de sortie contiennent des points de terminaison établissant un lien vers les ressources de fichier sur la page, comme ici. Vous pouvez exécuter plusieurs requêtes GET vers les points de terminaison de ressources de fichier pour récupérer leur contenu binaire.

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

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.

Attributs d’entrée

Attribut d’entrée Description
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
data-tag Une balise de note sur un élément p ou h1 - h6.
style Propriétés CSS de style de l’élément.

Attributs de sortie

Attribut de sortie Description
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
data-tag Une balise de note sur un élément p ou h1 - h6.
id ID unique, généré pour l’élément. 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.

Utilisé pour mettre à jour le contenu de la page.
style Propriétés CSS de style de l’élément. 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.

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

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.

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

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

Listes

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.

Les listes et éléments de liste peuvent contenir les attributs suivants dans le code HTML d’entrée et de sortie.

Attributs d’entrée

Attribut d’entrée Description
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
data-tag Balise de note sur un élément ul, ol ou li.
style Propriétés list-style-type et de style CSS pour la liste ou l’élément de liste.

Attributs de sortie

Attribut de sortie Description
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
data-tag Balise de note sur un élément span dans un élément li.
id ID unique, généré pour l’élément. 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.

Utilisé pour mettre à jour le contenu de la page.
style Propriétés CSS de style et list-style-type de l’élément. Dans le code HTML de sortie, les paramètres de niveau liste sont renvoyés sur des éléments de liste. Les propriétés par défaut ne sont pas renvoyées.

Styles de liste

Les API OneNote dans Microsoft Graph prennent en charge les styles de liste suivants :

Liste triée Liste non triée
none none
decimal (par défaut) disc (par défaut)
lower-alpha circle
lower-roman square
upper-alpha  
upper-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.

Style de liste homogène

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.

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

Il s’agit du code HTML de sortie. Les styles sont renvoyés de manière incorporée sur les éléments li ou span individuels.

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

Cet exemple illustre du code HTML d’entrée qui définit différents types de style de liste sur les éléments li.

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

Il s’agit du code HTML de sortie. Les styles sont renvoyés de manière incorporée sur les éléments li ou span individuels.

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

Tableaux

Les tableaux sont représentés comme des éléments table pouvant contenir des éléments tr et td. Les tableaux imbriqués sont pris en charge.

Les tableaux peuvent contenir les attributs suivants dans le code HTML d’entrée et de sortie. Les API OneNote ne prennent pas en charge les attributs rowspan et colspan.

Attributs d’entrée

Attribut d’entrée Description
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
style Propriétés CSS de style de l’élément, et également :
- width. Propriété prise en charge par table et td avec une valeur en pixels ou en pourcentage de largeur de page.

Exemple : width="100px" ou width="60%"
bordure Ajoute une bordure à un tableau avec une largeur spécifiée
largeur La largeur du tableau
bgcolor La couleur d’arrière-plan d’un tableau

Remarque

L’utilisation de la propriété de bordure dans l’attribut de style d’une table n’est pas prise en charge dans le code html d’entrée.

Attributs de sortie

Attribut de sortie Description
data-id Référence de l’élément.

Utilisé pour mettre à jour le contenu de la page.
id ID unique, généré pour l’élément. 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.

Utilisé pour mettre à jour le contenu de la page.
style Propriétés CSS de style de l’élément.

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

Code HTML d’entrée avec des paramètres facultatifs à différents niveaux

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

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

Styles

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.

Propriété Exemple
background-color style="background-color:#66cc66" (blanc par défaut)

Le format hexadécimal et les couleurs nommées sont pris en charge.
color style="color:#ffffff" (noir par défaut)
font-family style="font-family:Courier" (Calibri par défaut)
font-size style="font-size:10pt" (11 pt par défaut)

Les API acceptent les tailles de police en pt ou en px, mais convertissent les px en pt. Les valeurs décimales sont arrondies à la valeur n.0pt ou n.5pt la plus proche.
font-style style="font-style:italic" (normal ou italique uniquement)
font-weight style="font-weight:bold" (normal ou gras uniquement)
strike-through style="text-decoration:line-through"
text-align style="text-align:center" (pour les éléments de bloc uniquement)
text-decoration style="text-decoration:underline" (aucun ou souligné uniquement)

Les styles de caractères incorporés suivants sont également pris en charge :

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

Exemple de code HTML d’entrée et de sortie

L’image suivante illustre une page simple créée à l’aide de 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.

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

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.

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

Contenu connexe