【PHP基本规则】掌握变量与关联数组，来制作一张个人资料卡吧！

在上一篇文章中，我们使用PHP制作了一个根据星期变换消息的“今日名言”页面。相信大家已经体验到PHP在服务器上运行、动态生成HTML的乐趣了吧。

这次，我们将学习PHP编程的核心——“数据的处理方法”。具体来说，我们将掌握两个重要的武器：一个是用于存储单个数据的“变量”，另一个是用于统一管理多个关联数据的“关联数组”。

读完本文，你将掌握用PHP自如操纵信息的基础，并最终能够制作出像下面这样独一无二的**原创个人资料卡**。只需将信息替换成你自己的，就能立刻作为一个自我介绍的小组件来使用，是非常实用的内容。那么，我们开始吧！

运行PHP的准备做好了吗？

进入正题前，有一个重要的确认。要运行本文中的代码，你需要一个能够运行PHP的服务器环境。如果你的电脑上还没有准备好开发环境，请先参考这篇文章进行准备。

【PHP入门】XAMPP下载与安装方法完全指南！

准备好的朋友，就让我们进入下一步吧！

1. 变量：用于存放数据的“盒子”

在编程中，“变量”就像一个“带名字的盒子”，用于存放数值或字符串等数据。在PHP中，变量名必须以美元符号（$）开头。

例如，要用PHP来处理网站标题或你的名字，可以像下面这样写。


<?php
// 将字符串存入变量 $site_title
$site_title = "我的个人资料页";

// 将字符串存入变量 $my_name
$my_name = "李静";

// 将数值存入变量 $age
$age = 28;
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title><?php echo $site_title; ?></title>
</head>
<body>
    <p>你好，我是<?php echo $my_name; ?>，今年<?php echo $age; ?>岁。</p>
</body>
</html>

$my_name = "李静";这一行的意思是，“把‘李静’这个字符串放进名为`$my_name`的盒子里”。一旦存入变量，就可以使用echo在任何地方、任意次数地调用其内容。

2. 关联数组：用于归总相关数据的“带标签的架子”

个人资料中有很多相关数据，比如姓名、职位、爱好等。如果用一个个独立的变量（`$name`, `$role`, `$hobby`...）来管理，当数据增多时会变得很麻烦。

这时就该“数组(Array)”登场了。数组是一个可以统一管理多个数据的更大的盒子。在PHP中特别常用的是“关联数组(Associative Array)”，它就像一个“带标签的架子”，可以用“名字（键）”而不是数字来管理数据。

关联数组的创建与使用

如果想用关联数组来管理个人资料，可以像下面这样写。


<?php
// 将个人资料信息存入关联数组 $profile
$profile = [
    'name'    => '张伟',
    'role'    => '网页设计师',
    'hobby'   => '周末逛咖啡馆',
    'comment' => '致力于设计简洁易用的界面。'
];
?>

这里的'name'和'role'就是“键（标签）”，而=>右边的就是“值（内容）”。

要从数组中取出特定的数据，使用数组名['键']的形式来指定。


<?php
$profile = [
    'name'    => '张伟',
    'role'    => '网页设计师',
    'hobby'   => '周末逛咖啡馆',
    'comment' => '致力于设计简洁易用的界面。'
];

// 指定'name'键，取出并显示其值
echo $profile['name']; // 结果: 张伟

echo '<br>'; // 用于换行

// 指定'comment'键，取出并显示其值
echo $profile['comment']; // 结果: 致力于设计简洁易用的界面。
?>

像这样，使用关联数组，就可以把像个人资料这样关联性强的数据作为一个整体，非常清晰地进行管理。

最终成品：复制粘贴即可运行的“个人资料卡”

那么，让我们结合变量和关联数组的知识，来完成最终目标——“个人资料卡”吧。

【重要】请将以下代码全部复制，创建一个名为profile.php的文件。然后，将该文件放置在XAMPP等服务器的`htdocs`文件夹中，并通过浏览器访问，例如http://localhost/profile.php。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的个人资料</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #eef2f7; padding: 2rem; }
        .profile-card {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
            text-align: center;
            padding: 2.5rem;
            border-top: 5px solid #007bff;
        }
        .profile-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.15); margin-bottom: 1rem; }
        .profile-name { font-size: 1.8rem; font-weight: 600; color: #333; margin: 0; }
        .profile-role { font-size: 1.1rem; font-weight: 300; color: #777; margin-top: 0.25rem; }
        .profile-divider { border: 0; height: 1px; background-color: #eee; margin: 1.5rem 0; }
        .profile-info p { font-size: 1rem; color: #555; line-height: 1.6; text-align: left; margin: 0.5rem 0; }
        .profile-info p strong { color: #333; margin-right: 0.5em; }
    </style>
</head>
<body>
<?php
// 用一个关联数组统一管理个人资料
$profile = [
    'name'        => '李静',
    'role'        => '前端工程师',
    'hobby'       => '摄影、旅行',
    'comment'     => '追求为用户创造直观且印象深刻的UI/UX体验。',
    'image_url'   => 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=300' // 把你的图片URL放在这里
];
?>
    <div class="profile-card">
        <img src="<?php echo $profile['image_url']; ?>" alt="个人头像" class="profile-img">
        <h2 class="profile-name"><?php echo $profile['name']; ?></h2>
        <p class="profile-role"><?php echo $profile['role']; ?></p>
        <hr class="profile-divider">
        <div class="profile-info">
            <p><strong>爱好:</strong><?php echo $profile['hobby']; ?></p>
            <p><strong>一句话:</strong><?php echo $profile['comment']; ?></p>
        </div>
    </div>

</body>
</html>

浏览器里显示出漂亮的个人资料卡了吗？只需修改PHP部分$profile数组里的内容，换成你自己的信息，就能轻松制作出自我介绍卡片。请务必也换上自己的图片URL试试看吧。

进阶应用：自动生成多张员工介绍卡

如果想介绍多名员工，该怎么办呢？把个人资料卡的代码复制粘贴很多遍也太麻烦了吧。这种时候，就该程序大显身手了。

通过“在数组中再放入数组”的嵌套结构（多维数组），再结合上一篇文章也接触过的“循环处理（foreach）”，就可以自动生成所有员工的卡片。


<?php
// 将多个员工的资料作为数组存入一个大数组中
$staff_list = [
    [
        'name' => '张伟', 'role' => '总监', 'comment' => '带领整个项目走向成功。', 'image_url' => 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=300'
    ],
    [
        'name' => '李静', 'role' => '设计师', 'comment' => '创造令人印象深刻的设计。', 'image_url' => 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=300'
    ],
    [
        'name' => '王磊', 'role' => '工程师', 'comment' => '构筑稳定的系统。', 'image_url' => 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=300'
    ]
];
?>

<!-- HTML显示部分在循环的外部 -->
<div class="staff-container">
    <h1>我们的团队</h1>
    <div class="card-grid">
        <?php foreach ($staff_list as $staff_member): ?>
            <div class="profile-card">
                <img src="<?php echo $staff_member['image_url']; ?>" class="profile-img">
                <h2 class="profile-name"><?php echo $staff_member['name']; ?></h2>
                <p class="profile-role"><?php echo $staff_member['role']; ?></p>
                <p><?php echo $staff_member['comment']; ?></p>
            </div>
        <?php endforeach; ?>
    </div>
</div>

foreach循环会从$staff_list数组中逐个取出元素（每个员工的个人资料数组），并为之生成一张HTML卡片。无论员工增加多少人，我们都只需在PHP数组中添加数据即可，非常高效。

总结

辛苦了！这次我们学习了在PHP中处理数据的最基本方法。

变量：以$开头的命名盒子，用于存放单个数据（如字符串或数字）。
关联数组：以['键' => '值']的形式，将多个相关数据作为一个整体进行管理。
通过将它们与HTML结合，可以创建像个人资料卡这样数据与设计分离、易于管理且可复用性高的内容。

能够以“变量”和“数组”的形式来整理和处理数据，是编程的一大步。这种思想是在未来进行数据库连接等更高级处理时非常重要的基础。

下次，我们将学习让程序做出“如果……就……”这类判断的“控制结构（if语句等）”！