HTML结构须语义化、禁用私有标签及废弃标签，CSS需规避引擎差异、禁用私有前缀，样式须用BEM类名驱动，viewport与重置CSS必须硬编码进模板。
HTML结构必须语义化且无平台私有标签
微信小程序、鸿蒙 ArkWeb、iOS Safari 和 Android WebView 对 HTML 标签的解析能力差异极大。非标准或废弃标签（如 <center>、<font>、<marquee>）在部分环境直接被忽略或触发降级渲染，导致布局错乱。
常见错误现象：H5 正常显示的图文混排，在小程序 rich-text 中丢失缩进或换行；鸿蒙 ArkWeb 下 <details> 完全不展开。
- 只使用 HTML5.2 规范中明确支持的语义化标签：
<article>、<section>、<figure>、<time>等 - 禁用所有带前缀的自定义标签（如
<wx-view>、<hm-swiper>），它们无法跨平台复用 - 避免嵌套过深（建议 ≤ 6 层），鸿蒙 ArkWeb 和部分安卓 WebView 在深度 DOM 树下 layout 计算耗时陡增
- 表单类标签（
<select>、<input type="date">）必须配套降级逻辑，不能仅靠 CSS 隐藏原生控件
CSS 必须规避渲染引擎差异点
不同平台的 Blink（Chrome）、WebKit（Safari/iOS）、ArkWeb（鸿蒙）对 CSS 的实现存在实质性偏差。例如 position: sticky 在 iOS Safari 下受父容器 overflow 影响失效；backdrop-filter 在旧版安卓 WebView 中为空白。
常见错误现象：H5 上圆角+阴影的卡片，在微信内置浏览器中变成直角；iOS 上文字行高突然变大，挤压相邻元素。
立即学习“前端免费学习笔记（深入）”；
- 禁用所有私有前缀属性，除非同时提供标准属性兜底，例如：
-webkit-appearance: none;后必须写appearance: none; - 慎用
scroll-behavior: smooth—— iOS Safari 15.4 之前不支持，鸿蒙 ArkWeb 目前仍不支持 - 避免依赖
vh做关键高度计算，微信和鸿蒙在软键盘弹出时vh值会异常（不收缩） - 字体单位统一用
rem或clamp()，禁用px写字号或 padding，否则 iOS 动态字体设置下会强制放大
内联样式与 class 类名需严格收敛
微信小程序 rich-text 组件不解析 style 属性，鸿蒙 ArkWeb 对内联样式支持不稳定，而 H5 又依赖内联样式做服务端直出控制。三者交集极小，必须靠 class 名驱动样式。
常见错误现象：服务端注入的 style="color:red" 在小程序里完全失效；多端共用 class 名但样式规则冲突，导致某平台文字消失。
- 所有样式必须通过预设 class 名控制，禁止运行时拼接 style 字符串
- class 名采用 BEM 规范且全局唯一，避免
content、box这类泛用名与小程序框架样式冲突 - 服务端输出 HTML 时，只保留必要 class，移除所有
style属性（可用CleanHtmlFilter类自动清理） - 为兼容
rich-text，class 名不得含连字符以外的特殊字符（如.item-2x可用，.item@2x不可用）
viewport 与基础重置必须硬编码进模板
没有 <meta name="viewport">，移动端浏览器默认按 980px 渲染，后续所有 rem/vw 计算全部失准；没有 CSS 重置，各平台默认 margin/padding 差异会让段落间距、图片对齐彻底失控。
常见错误现象：同一份 HTML 在 iPhone 上文字挤成一团，在安卓机上段落空隙过大；H5 正常的居中按钮，在鸿蒙上偏右 20px。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">必须出现在每个页面<head>顶部，不可动态注入 - 重置样式需最小化：只重置
body、p、h1–h6、ul/ol/li、img、pre、code，避免影响小程序组件内部样式 - 字体栈必须显式声明，优先使用系统字体而非 Web 字体，例如：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - 所有重置 CSS 必须内联在
<style>中，不可外链，否则小程序rich-text和鸿蒙 ArkWeb 均不加载
