onedrive网页预览不支持html旧式对齐属性、现代css/js及相对路径；需用table布局、内联样式、绝对图片url，并通过嵌入链接访问。
HTML图片对齐后在OneDrive里不生效
OneDrive网页预览器根本不解析 <img align="right"> 这类旧式属性，也不支持大部分内联 style 中的浮动或 flex 布局——它只做静态渲染，且会剥离或忽略许多 CSS 规则。
常见错误现象：<img src="a.jpg" align="left"> 文字没绕排、float: left 完全失效、display: inline-block 后仍换行。
- 唯一可靠的方式是用
<table> 布局（OneDrive 对 table 渲染最稳定） <li>避免用 <code>align属性，改用style="vertical-align: top;"配合<table> 单元格 <li>不要依赖外部 CSS 文件——OneDrive 不加载 <code><link rel="stylesheet">，所有样式必须写在<style></style>标签内或内联 - 必须手动在 OneDrive 网页端打开该 HTML 文件 → 点右上角「…」→ 「在新窗口中打开」→ 此时地址栏 URL 才是真正可分享的在线渲染链接
- 这个 URL 形如
https://onedrive.live.com/embed?cid=xxx&resid=xxx&authkey=xxx&em=2，不是原始分享链接 - 如果用的是个人免费版 OneDrive，嵌入链接有效期默认 7 天；企业版需确认租户是否开启
embed权限 - 所有图片必须先上传到 OneDrive 同一目录（或子目录），再右键图片 → 「获取链接」→ 选「任何人可查看」→ 把生成的
https://onedrive.live.com/...?cid=...链接粘贴进src - 不要用 OneDrive 的「缩短链接」或「二维码链接」，那些是跳转页，不能当图片地址
- 如果图片多，建议统一放在
/assets/子文件夹，并确保该文件夹也设为「可查看」权限 - 禁用所有动态脚本：OneDrive 默认阻止
<script></script>执行（安全策略），连alert()都不会弹 - CSS 只能用基础选择器，避免
:has()、::backdrop等实验性语法 - 字体务必用系统自带（如
font-family: "Segoe UI", sans-serif;），Web Font（@font-face）一律失效
OneDrive共享HTML文件链接生成后打不开或显示源码
根本原因：OneDrive 默认把 .html 当作纯文本处理，除非明确设置为“在线查看”，否则直接返回 Content-Type: text/plain，浏览器就只展示源码。
使用场景：你上传了 report.html，右键“获取链接” → 选“任何人可查看”，但打开后全是代码。
用 OneDrive 分享 HTML 时图片路径失效
本地写的 <img src="./images/logo.png"> 在 OneDrive 上必然 404——因为 OneDrive 不提供相对路径解析能力，所有资源必须是绝对可访问的公开 URL。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
性能影响：试图用 file:// 或本地路径，页面直接白屏；用相对路径，控制台报 Failed to load resource: the server responded with a status of 404()。
OneDrive 共享 HTML 的兼容性限制
OneDrive 内置渲染器基于老旧 EdgeHTML（Win10）或简化 Chromium（Win11），不支持 IntersectionObserver、fetch()、async/await、CSS grid（部分）、@supports 等现代特性。
容易被忽略的地方：你以为加了 loading="lazy" 能优化，结果 OneDrive 直接忽略该属性，图片全量加载；你以为用 data-src + JS 懒加载，结果 JS 根本不执行。
事情说清了就结束
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
