前端-什么是结构语言、样式语言、脚本语言？

目录

1. 结构语言（HTML / WXML）——房子的骨架

 2. 样式语言（CSS / WXSS）——房子的装修

3. 脚本语言（JavaScript）——房子的智能控制系统

总结对比表：

---

1. 结构语言（HTML / WXML）——房子的骨架

• 作用：搭建页面的结构和内容

• 类似在盖房子时搭好墙、门、窗这些基本框架。

• 你告诉电脑页面里有哪几部分，比如标题、图片、按钮等。

🔸 常见语言：

• 网页用：HTML（HyperText Markup Language）

• 小程序用：WXML（WeiXin Markup Language）

🔸 例子：

<div class="box">我是内容</div> <!-- HTML -->

<view class="box">我是内容</view> <!-- WXML -->

---

 2. 样式语言（CSS / WXSS）——房子的装修

• 作用：美化页面的外观和排版

• 类似房子的粉刷、颜色、尺寸、布局等装修。

• 控制颜色、字体、大小、位置等。

🔸 常见语言：

• 网页用：CSS（Cascading Style Sheets）

• 小程序用：WXSS（WeiXin Style Sheets）

🔸 例子：

.box {color: red;font-size: 20px;
}

---

3. 脚本语言（JavaScript）——房子的智能控制系统

• 作用：让页面能动起来、能交互

• 类似房子的智能灯光、自动窗帘、门禁系统。

• 控制行为，比如按钮点击后做什么、页面加载时请求数据等。

🔸 常见语言：

• 网页和小程序都用：JavaScript

🔸 例子：

document.querySelector('.box').onclick = function() {alert('你点了我！');
}

---

总结对比表：

类型	名字（网页）	名字（小程序）	功能	类比于房子
结构语言	HTML	WXML	定义页面结构和内容	房子的框架
样式语言	CSS	WXSS	控制页面外观、颜色、布局等	装修装饰
脚本语言	JavaScript	JavaScript	实现页面交互、逻辑、动态效果	智能系统