HTML、CSS、JavaScript、PHP的关系

一、担任作用

• HTML：骨架（结构）
• CSS：皮肤（样式）
• JavaScript：动作（前端交互）
• PHP：后台大脑（服务器逻辑）

二、嵌套关系（重要）

1. HTML 是 “容器”，所有东西都写在它里面

• CSS 可以嵌套在 HTML 里
• JavaScript 可以嵌套在 HTML 里
• PHP 可以嵌套在 HTML 里

结构顺序是：

HTML

├─ CSS（写在 <style> 里）

├─ JavaScript（写在 <script> 里）

└─ PHP（写在 <?php ?> 里，服务器执行）

三、逐个详细介绍

1. HTML（超文本标记语言）

负责：页面结构

• 标题、按钮、图片、输入框、表格
• 纯静态，不会动，不会计算
• 后缀：.html / .htm

例子：

<h1>我是标题</h1>

<button>点击我</button>

2. CSS（层叠样式表）

负责：长相、排版、颜色

• 字体大小、颜色、布局、居中、背景
• 不处理逻辑，只负责 “好看”

可以写在：

• HTML 的 <style> 里
• 单独 .css 文件

3. JavaScript（前端脚本）

负责：页面动起来、用户交互

• 点击按钮弹出提示
• 表单验证
• 异步请求后端（AJAX）
• 实时更新页面内容

写在 HTML 的 <script> 标签里

后缀：.js

<button onclick="alert('你点了我')">点我</button>

4. PHP（后端脚本）

负责：服务器逻辑、数据库、后台处理

• 登录验证
• 增删改查数据库
• 生成动态 HTML
• 接收前端传过来的数据

PHP 代码必须在服务器上运行

写在 HTML 里的格式：

<?php

echo "我是后端输出的内容";

?>

五、区别总结