一、WXML（WeiXin Markup Language）与 HTML（HyperText Markup Language）
（一）语法和标签
-
标签系统：HTML 拥有一套完整且丰富的标签体系，涵盖了文档结构、文本格式、多媒体嵌入、表单元素等多个方面。而 WXML 的标签库是微信小程序自定义的一套标签，如 <view> 、 <text> 、 <button> 等，并且这些标签的功能和特性是为了适应小程序的应用场景和需求专门设计的。
-
属性设置：在 HTML 中，属性的设置方式和种类非常丰富。而在 WXML 中，属性的设置和使用方式也有自身的规则和限制，并且部分属性的功能和行为与 HTML 中的对应属性有所不同。
（二）事件处理
- 事件模型：HTML 中的事件可以通过在标签的属性中添加事件处理函数来实现，例如 onclick 、 onmouseover 等。WXML 中的事件处理机制也是通过在组件标签上添加相应的事件属性来实现，如 bindtap 、 bindinput 等，但事件的触发条件和处理方式是基于微信小程序的运行环境和框架来实现的，与传统的 HTML 事件模型有所不同。
（三）数据绑定
- 数据绑定方式：HTML 本身并没有内置强大的数据绑定功能。而 WXML 支持数据绑定，可以将数据从逻辑层传递到视图层，实现动态的数据展示和更新，通过 {{}} 双花括号的方式来引用数据。
二、WXSS（WeiXin Style Sheets）与 CSS（Cascading Style Sheets）
（一）选择器
-
选择器种类：CSS 提供了丰富的选择器，如类选择器、ID 选择器、属性选择器、伪类选择器和伪元素选择器等。WXSS 的选择器相对较少，主要支持类选择器和 ID 选择器等基本选择器。
-
选择器权重计算：在 CSS 中，选择器的权重计算有一套复杂的规则来确定样式的优先级。WXSS 中的选择器权重计算方式可能与 CSS 有所不同，并且在小程序的渲染环境中，样式的应用和覆盖规则也需要遵循微信小程序的相关规范和机制。
（二）单位和尺寸
- 尺寸单位：CSS 中常用的尺寸单位有像素（px）、百分比（%）、em、rem 等。WXSS 也支持这些单位，但在一些特定的场景下，如响应式布局和屏幕适配方面，WXSS 的处理方式和效果可能会因为微信小程序的运行环境和设备特性而有所不同。
（三）样式特性和兼容性
- 样式特性支持：CSS 随着版本的更新和发展，不断增加新的样式特性和功能。WXSS 是基于微信小程序的运行环境和需求开发的，它只会支持部分与小程序应用场景相关的样式特性，并且在不同版本的微信客户端和不同设备上的兼容性表现也需要进行针对性的测试和优化。
WXML、WXSS 与 HTML、CSS 在语法上的区别：
一、WXML（WeiXin Markup Language）与 HTML（HyperText Markup Language）语法区别
（一）标签
- 标签种类与功能
-
HTML 具有众多的标签，如 <div> 、 <p> 、 <img> 、 <a> 等，功能涵盖了文档结构搭建、内容展示、超链接、多媒体嵌入等各个方面。
-
WXML 则是一套为微信小程序定制的标签集，如 <view> 用于视图容器、 <text> 用于文本展示、 <button> 用于按钮组件等。WXML 的标签功能更侧重于小程序的页面元素展示和交互。
- 标签属性
-
HTML 标签的属性丰富多样，例如 <img> 标签的 src 、 alt 、 width 、 height 属性， <a> 标签的 href 、 target 属性等。
-
WXML 中标签的属性也是根据小程序的需求和功能设计的。例如，在 <button> 标签中有 size 、 type 等属性来控制按钮的大小和类型； <text> 标签中有 space 属性来控制文本的空格处理方式等。
- 数据绑定
-
在 HTML 中，没有像 WXML 中那样内置的数据绑定机制。
-
WXML 支持数据绑定，通过使用双花括号 {{}} 来引用数据。例如 <text>{{message}}</text> ，其中 message 是在对应的数据对象中定义的属性，通过这种方式可以实现数据与视图的动态绑定和更新。
（二）事件
- 事件名称与触发方式
-
HTML 中的常见事件，如 click （点击）、 mouseover （鼠标悬停）、 submit （表单提交）等，通过在标签的属性中添加对应的事件处理函数来响应，如 <button οnclick="myFunction()">点击我</button> 。
-
WXML 中的事件名称和触发方式有所不同，例如 tap （点击）、 input （输入）等事件，通过在组件标签上添加相应的事件属性来绑定事件处理函数，如 <button bindtap="myFunction">点击我</button> 。
二、WXSS（WeiXin Style Sheets）与 CSS（Cascading Style Sheets）语法区别
（一）选择器
- 基本选择器
-
CSS 中的基本选择器包括类选择器（ .class ）、ID 选择器（ #id ）、元素选择器（ element ）等。
-
WXSS 同样支持这些基本选择器，语法上没有太大差异。
- 复合选择器
-
CSS 中的复合选择器如后代选择器（ selector1 selector2 ）、子代选择器（ selector1 > selector2 ）、相邻兄弟选择器（ selector1 + selector2 ）、通用兄弟选择器（ selector1 ~ selector2 ）等，可以实现对元素之间关系的精确选择。
-
WXSS 出于小程序的性能和设计需求，对这些复合选择器的支持有限，主要还是以基本选择器和一些简单的组合使用为主。
- 属性选择器
-
CSS 的属性选择器可以根据元素的属性和属性值来选择元素，例如 [attribute] 、 [attribute=value] 、 [attribute^=value] 、 [attribute$=value] 、 [attribute*=value] 等多种形式。
-
WXSS 对属性选择器的支持相对较少，在实际开发中使用频率较低。
（二）单位
- 长度单位
-
CSS 中常用的长度单位有像素（ px ）、百分比（ % ）、 em 、 rem 、 vw 、 vh 等，以适应不同的布局和响应式设计需求。
-
WXSS 同样支持这些长度单位，但在小程序的特定场景下，对于单位的使用和效果可能会因微信客户端的渲染机制和设备屏幕特性而有所不同。
- 颜色表示
-
在 CSS 中，可以使用颜色名称（如 red 、 blue ）、十六进制值（如 #ff0000 ）、RGB 函数（如 rgb(255, 0, 0) ）、HSL 函数（如 hsl(0, 100%, 50%) ）等多种方式来表示颜色。
-
WXSS 也支持这些颜色表示方式，语法上完全相同。
（三）样式特性
- 盒模型
-
CSS 中的盒模型包括内容（ content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ），可以通过设置相应的属性来控制元素的尺寸和布局。
-
WXSS 中的盒模型原理与 CSS 相同，但在某些细节的计算和表现上，可能会因微信小程序的渲染引擎和设备差异而有所不同。
- 动画与过渡
-
CSS 提供了丰富的动画和过渡功能，如 transition 属性用于过渡效果、 animation 属性用于动画定义，可以实现复杂的元素动态效果。
-
WXSS 也支持基本的动画和过渡功能，但在性能和兼容性方面，需要根据微信小程序的运行环境进行优化和调整。