微信小程序不能直接使用HTML5标签，因其运行在非浏览器环境，需用wxml/wxss及特定API替代HTML5/DOM功能。
不能直接用 HTML5 标签写微信小程序。 微信小程序不是浏览器环境，不支持 <div>、<span>、window、document 等原生 HTML5/DOM API。它用的是自研的 wxml（类似 HTML 的模板语言）和 wxss（类 CSS），运行在封闭的双线程架构中。
为什么不能直接写 <video> 或 <canvas>？
虽然 HTML5 的 <video> 和 <canvas> 在语义上很常用，但小程序里必须改用平台提供的组件：
-
<video>→ 必须换成<video>（同名但行为受限：不支持src直接填 HTTP 链接，必须走 HTTPS；不支持autoplay在 iOS 非用户触发下生效） -
<canvas>→ 必须用<canvas canvas-id="xxx">，且 JS 操作需通过wx.createCanvasContext('xxx')，而非document.getElementById().getContext() -
<iframe>、<audio>（无 controls）、<svg>等标签完全不支持，连解析都会报错
哪些 HTML5 能力「间接可用」？
不是所有 HTML5 功能都被砍掉，部分能力通过小程序 API 封装后可等效使用：
-
localStorage→ 替换为wx.setStorage/wx.getStorage（异步、有 10MB 限制） -
fetch/XMLHttpRequest→ 只能用wx.request（强制 HTTPS，不支持 Cookie 自动管理，header 有白名单字段） -
WebGL→ 小程序提供webglcanvas 类型，但需显式声明type="webgl"，且上下文获取方式不同 -
Geolocation→ 用wx.getLocation，需提前在app.json声明permission字段并获用户授权
注意：WebSocket 可用 wx.connectSocket，但不支持二进制帧自动解包，收发都得手动处理 ArrayBuffer。
立即学习“前端免费学习笔记（深入）”；
跨平台开发时最常踩的三个坑
很多开发者想“一套代码跑 H5 + 小程序”，结果在真机上卡住。关键限制如下：
-
DOM/BOM 全面不可用：任何含
document.querySelector、window.location、history.pushState的代码，在小程序里会直接报ReferenceError -
CSS 兼容性断层：
flex: 1在某些安卓机型上失效；position: sticky完全不支持；@font-face加载字体需用base64或小程序上传的云资源，不能引用外链 -
跳转逻辑不互通：H5 用
window.open或a[href]，小程序必须用wx.navigateTo；H5 的 URL 参数靠location.search解析，小程序要从onLoad的options对象里取
真正可行的跨平台路径是：用 uni-app 或 Taro 这类框架做抽象层，它们把 view 编译成 wxml、把 request 编译成 wx.request。但一旦你手写原生小程序，就等于主动放弃了 HTML5 的 DOM 生态——这不是兼容性问题，是执行环境的根本差异。
